/* portadas-plano.css */ /* Portadas «Plano técnico» · Remotos Academy — estilos de portadas-plano.js Todas las clases empiezan con «plano». Necesita Bebas Neue y Poppins (500 y 600), que el campus ya carga. Escala sola con container queries: una «u» = 1 % del ancho en 16:9 (de 300 a 900 px de ancho). · Por defecto la portada mide 16:9 y toma el ancho de su contenedor. · Con «plano--llenar» llena el alto de un contenedor de otra proporción (el contenedor necesita alto propio): el dibujo queda a la derecha sin deformarse y el título abajo a la izquierda. */ .plano { --plano-azul: #0400BC; --plano-azul-b: #0012FD; --plano-noche: #121452; --plano-lav: #6C78FF; --plano-lav-c: #B3BAFF; /* 1 % del ancho en 16:9; si el marco es más ancho que 16:9, manda el alto (así el dibujo y el título no se agrandan de más) */ --plano-u: min(1cqw, 1.7778cqh); position: relative; display: block; box-sizing: border-box; width: 100%; aspect-ratio: 16 / 9; container-type: size; overflow: hidden; isolation: isolate; border-radius: var(--plano-radio, 16px); background: var(--plano-noche); color: #fff; text-align: left; font-family: Poppins, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .plano *, .plano *::before, .plano *::after { box-sizing: border-box; } .plano--llenar { aspect-ratio: auto; height: 100%; } /* fondo: azul de la marca (arriba a la derecha) a azul noche (abajo a la izquierda) + cuadrícula blanca muy suave */ .plano__lienzo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(62% 78% at 82% 24%, rgba(0, 18, 253, .34) 0%, rgba(0, 18, 253, 0) 72%), linear-gradient(to bottom left, var(--plano-azul) 0%, var(--plano-noche) 100%); } .plano__lienzo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: calc(var(--plano-u) * 12.5) calc(var(--plano-u) * 12.5), calc(var(--plano-u) * 12.5) calc(var(--plano-u) * 12.5), calc(var(--plano-u) * 2.5) calc(var(--plano-u) * 2.5), calc(var(--plano-u) * 2.5) calc(var(--plano-u) * 2.5); background-position: right -1px top -1px; -webkit-mask-image: radial-gradient(115% 125% at 80% 28%, #000 32%, rgba(0, 0, 0, .3) 100%); mask-image: radial-gradient(115% 125% at 80% 28%, #000 32%, rgba(0, 0, 0, .3) 100%); } .plano__lienzo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(179, 186, 255, .18); } /* dibujo (SVG 1600 × 900, pegado a la derecha) */ .plano__dib { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .plano__dib text { font-family: Poppins, system-ui, sans-serif; } .plano__dib .plano-l1 { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .plano__dib .plano-l2 { fill: none; stroke: var(--plano-lav-c); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; } .plano__dib .plano-l2b { fill: none; stroke: #fff; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; } .plano__dib .plano-l3 { fill: none; stroke: var(--plano-lav-c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .62; } .plano__dib .plano-ray { fill: none; stroke: var(--plano-lav); stroke-width: 2.4; opacity: .75; } .plano__dib .plano-visto { fill: none; stroke: #fff; stroke-width: 4.8; stroke-linecap: round; stroke-linejoin: round; } .plano__dib .plano-aguja { stroke: #fff; stroke-width: 7; stroke-linecap: round; } .plano__dib .plano-aguja2 { stroke: #fff; stroke-width: 4.6; stroke-linecap: round; } .plano__dib .plano-cota { fill: none; stroke: var(--plano-lav-c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; } .plano__dib .plano-guia { fill: none; stroke: var(--plano-lav-c); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 0 11; opacity: .8; } .plano__dib .plano-eje { fill: none; stroke: var(--plano-lav); stroke-width: 2.4; stroke-dasharray: 28 9 4 9; opacity: .8; } .plano__dib .plano-onda { fill: none; stroke: var(--plano-lav-c); stroke-width: 3.8; stroke-linecap: round; stroke-dasharray: 14 12; } .plano__dib .plano-rumbo { fill: none; stroke: #fff; stroke-width: 4.8; stroke-linecap: round; stroke-dasharray: 15 12; } .plano__dib .plano-g1 { fill: none; stroke: var(--plano-lav-c); stroke-width: 2.8; stroke-linecap: round; opacity: .8; } .plano__dib .plano-g1.plano-ecuador { stroke: #fff; stroke-width: 3.4; opacity: 1; } .plano__dib .plano-g0 { fill: none; stroke: var(--plano-lav-c); stroke-width: 2.2; stroke-dasharray: 5 9; opacity: .3; } .plano__dib .plano-punto { fill: var(--plano-lav-c); stroke: none; } .plano__dib .plano-lleno { fill: #fff; stroke: none; } .plano__dib .plano-estrella { fill: var(--plano-lav-c); stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; } .plano__dib .plano-nota { font-size: 42px; font-weight: 500; fill: var(--plano-lav-c); letter-spacing: .01em; } .plano__dib .plano-chica { font-size: 34px; font-weight: 600; fill: var(--plano-lav-c); } .plano__dib .plano-glifo { font-size: 40px; font-weight: 600; fill: #fff; letter-spacing: .04em; } /* textos */ .plano__marca { position: absolute; z-index: 1; margin: 0; left: calc(var(--plano-u) * 6); top: calc(var(--plano-u) * 5.2); font: 600 max(8px, calc(var(--plano-u) * 1.9))/1 Poppins, system-ui, sans-serif; letter-spacing: .3em; color: var(--plano-lav-c); opacity: .92; white-space: nowrap; } .plano__bloque { position: absolute; z-index: 1; left: calc(var(--plano-u) * 6); bottom: calc(var(--plano-u) * 5.6); max-width: calc(var(--plano-u) * 46); } .plano__ceja { display: flex; align-items: center; gap: calc(var(--plano-u) * 1.3); margin: 0 0 calc(var(--plano-u) * 1.5); white-space: nowrap; } .plano__num { font: 400 calc(var(--plano-u) * 5)/.8 'Bebas Neue', Impact, sans-serif; letter-spacing: .03em; color: var(--plano-lav); } .plano__ceja i { display: block; width: calc(var(--plano-u) * 3.4); height: 1px; background: var(--plano-lav); } .plano__area { font: 600 max(8px, calc(var(--plano-u) * 2.05))/1 Poppins, system-ui, sans-serif; letter-spacing: .2em; color: var(--plano-lav-c); } .plano__medida { width: max-content; max-width: 100%; } .plano__tit { margin: 0; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: calc(var(--plano-u) * var(--plano-t, 9.2)); line-height: .9; letter-spacing: .012em; text-transform: uppercase; color: #fff; } .plano__linea { display: block; white-space: nowrap; } /* raya de medida bajo el título (la firma del estilo) */ .plano__raya { display: block; height: calc(var(--plano-u) * 1.3); margin: calc(var(--plano-u) * 1) 0 calc(var(--plano-u) * 1.25); border-left: 1px solid var(--plano-lav); border-right: 1px solid var(--plano-lav); background: linear-gradient(var(--plano-lav), var(--plano-lav)) center / 100% 1px no-repeat; } .plano__comp { margin: 0; max-width: calc(var(--plano-u) * 44); font: 400 calc(var(--plano-u) * 4.2)/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .025em; text-transform: uppercase; color: var(--plano-lav-c); text-wrap: balance; } /* estado: el campus pone su pastilla arriba a la derecha */ .plano__estado { position: absolute; z-index: 2; top: max(8px, calc(var(--plano-u) * 3.2)); right: max(8px, calc(var(--plano-u) * 3.2)); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 64%; } .plano-pastilla { display: inline-flex; align-items: center; gap: .45em; padding: .55em .95em .55em .75em; border-radius: 999px; font: 600 clamp(8.5px, calc(var(--plano-u) * 2.2), 12.5px)/1 Poppins, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; color: #EEF0FF; background: rgba(18, 20, 82, .66); border: 1px solid rgba(179, 186, 255, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .plano-pastilla svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .plano-pastilla--completada { color: var(--plano-azul); background: #fff; border-color: #fff; } .plano-pastilla--progreso { color: var(--plano-noche); background: var(--plano-lav-c); border-color: var(--plano-lav-c); } .plano-pastilla--bloqueada { color: rgba(238, 240, 255, .88); } /* ── Un azul por área (12-oct-2026) ────────────────────────────────────────────────────────────────────────────────── El dueño: «muy azules» → pidió ver tonalidades y eligió que CADA ÁREA tenga su propio azul oscuro (carta de 10 tonos). Mismo dibujo y mismas líneas; solo cambia el fondo. Experiencia queda en el azul real de antes; el dibujo genérico también. Vale en claro y en oscuro (son tonos oscuros). */ .plano.plano--mentalidad .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(120,120,255, .3) 0%, rgba(120,120,255, 0) 72%), linear-gradient(to bottom left, #2E2CA8 0%, #191870 48%, #0C0C36 100%); } /* índigo */ .plano.plano--herramientas .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(70,140,255, .3) 0%, rgba(70,140,255, 0) 72%), linear-gradient(to bottom left, #0B4AB8 0%, #0A2A72 48%, #061A40 100%); } /* cobalto */ .plano.plano--ia .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(90,110,255, .3) 0%, rgba(90,110,255, 0) 72%), linear-gradient(to bottom left, #1C2ACF 0%, #121C84 48%, #0A0F45 100%); } /* ultramar */ .plano.plano--comunicacion .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(80,160,255, .3) 0%, rgba(80,160,255, 0) 72%), linear-gradient(to bottom left, #0F5BC4 0%, #0B3277 48%, #071F45 100%); } /* zafiro */ .plano.plano--experiencia .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(0,18,253, .3) 0%, rgba(0,18,253, 0) 72%), linear-gradient(to bottom left, #0400BC 0%, #0A0A86 48%, #121452 100%); } /* azul real */ .plano.plano--empleabilidad .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(130,165,235, .3) 0%, rgba(130,165,235, 0) 72%), linear-gradient(to bottom left, #3157A0 0%, #1C3366 48%, #0E1D3F 100%); } /* acero */ .plano.plano--cobros .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(100,150,220, .3) 0%, rgba(100,150,220, 0) 72%), linear-gradient(to bottom left, #1E4380 0%, #112850 48%, #071428 100%); } /* azul de prusia */ .plano.plano--reto .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(100,100,230, .3) 0%, rgba(100,100,230, 0) 72%), linear-gradient(to bottom left, #1E1E80 0%, #111148 48%, #07071F 100%); } /* medianoche */ .plano.plano--especializacion .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(110,130,230, .3) 0%, rgba(110,130,230, 0) 72%), linear-gradient(to bottom left, #1F2F7A 0%, #121C4C 48%, #080D2A 100%); } /* marino */ .plano.plano--bono .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(150,130,255, .3) 0%, rgba(150,130,255, 0) 72%), linear-gradient(to bottom left, #4434B0 0%, #25196E 48%, #120D3D 100%); } /* violeta azulado */ .plano.plano--atencion .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(80,160,255, .3) 0%, rgba(80,160,255, 0) 72%), linear-gradient(to bottom left, #0F5BC4 0%, #0B3277 48%, #071F45 100%); } /* zafiro */ .plano.plano--perfil .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(70,140,255, .3) 0%, rgba(70,140,255, 0) 72%), linear-gradient(to bottom left, #0B4AB8 0%, #0A2A72 48%, #061A40 100%); } /* cobalto */ .plano.plano--entrevista .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(130,165,235, .3) 0%, rgba(130,165,235, 0) 72%), linear-gradient(to bottom left, #3157A0 0%, #1C3366 48%, #0E1D3F 100%); } /* acero */ .plano.plano--freelance .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(90,110,255, .3) 0%, rgba(90,110,255, 0) 72%), linear-gradient(to bottom left, #1C2ACF 0%, #121C84 48%, #0A0F45 100%); } /* ultramar */ .plano.plano--biblioteca .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(100,150,220, .3) 0%, rgba(100,150,220, 0) 72%), linear-gradient(to bottom left, #1E4380 0%, #112850 48%, #071428 100%); } /* azul de prusia */ .plano.plano--masterclass .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(100,100,230, .3) 0%, rgba(100,100,230, 0) 72%), linear-gradient(to bottom left, #1E1E80 0%, #111148 48%, #07071F 100%); } /* medianoche */ .plano.plano--tickets .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(110,130,230, .3) 0%, rgba(110,130,230, 0) 72%), linear-gradient(to bottom left, #1F2F7A 0%, #121C4C 48%, #080D2A 100%); } /* marino */ /* styles.css */ /* ========================================================================== Remotos Academy · Campus — sistema de diseño (prototipo local) Tokens en :root, modo oscuro por preferencia del sistema + [data-theme]. ========================================================================== */ :root { /* Tipografía */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14.5px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px; --lh: 1.55; /* Espaciado (escala 4) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; /* Radios */ --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* Colores (claro) */ --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f2f4f8; --surface-3: #e9ecf3; --border: #e3e6ee; --border-strong: #cfd4e0; --text: #121726; --text-2: #4a5268; --text-3: #6b7387; --primary: #4f46e5; --primary-600: #4338ca; --primary-soft: #eef0ff; --primary-contrast: #ffffff; --success: #12805c; --success-soft: #e3f6ee; --warning: #b45309; --warning-soft: #fff1e0; --danger: #c2272d; --danger-soft: #fdeaea; --info: #0b6bcb; --info-soft: #e5f1fd; --gold: #a16207; --gold-2: #e0a526; --gold-soft: #fdf5dc; --focus: #6366f1; /* Sombras */ --sh-xs: 0 1px 2px rgba(16, 24, 40, .05); --sh-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --sh: 0 6px 16px -6px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .05); --sh-lg: 0 20px 40px -12px rgba(16, 24, 40, .18), 0 4px 10px -4px rgba(16, 24, 40, .06); /* Layout */ --sidebar-w: 264px; --topbar-h: 64px; --content-max: 1180px; --ease: cubic-bezier(.2, .7, .2, 1); --dur: .18s; } /* Modo oscuro: tokens */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0c0f17; --surface: #141824; --surface-2: #1a1f2d; --surface-3: #232a3a; --border: #262d3d; --border-strong: #353e52; --text: #eceef5; --text-2: #b4bbcc; --text-3: #8b93a7; --primary: #8b85ff; --primary-600: #a29dff; --primary-soft: #23244a; --primary-contrast: #0c0f17; --success: #3ccf91; --success-soft: #12301f; --warning: #f5a74a; --warning-soft: #3a2711; --danger: #ff6b6f; --danger-soft: #3b1618; --info: #5eb1ff; --info-soft: #0f2740; --gold: #f2c14e; --gold-2: #f2c14e; --gold-soft: #33280e; --focus: #a5a1ff; --sh-xs: 0 1px 2px rgba(0, 0, 0, .4); --sh-sm: 0 1px 3px rgba(0, 0, 0, .45); --sh: 0 8px 20px -8px rgba(0, 0, 0, .6); --sh-lg: 0 24px 48px -12px rgba(0, 0, 0, .7); } } :root[data-theme="dark"] { --bg: #0c0f17; --surface: #141824; --surface-2: #1a1f2d; --surface-3: #232a3a; --border: #262d3d; --border-strong: #353e52; --text: #eceef5; --text-2: #b4bbcc; --text-3: #8b93a7; --primary: #8b85ff; --primary-600: #a29dff; --primary-soft: #23244a; --primary-contrast: #0c0f17; --success: #3ccf91; --success-soft: #12301f; --warning: #f5a74a; --warning-soft: #3a2711; --danger: #ff6b6f; --danger-soft: #3b1618; --info: #5eb1ff; --info-soft: #0f2740; --gold: #f2c14e; --gold-2: #f2c14e; --gold-soft: #33280e; --focus: #a5a1ff; --sh-xs: 0 1px 2px rgba(0, 0, 0, .4); --sh-sm: 0 1px 3px rgba(0, 0, 0, .45); --sh: 0 8px 20px -8px rgba(0, 0, 0, .6); --sh-lg: 0 24px 48px -12px rgba(0, 0, 0, .7); } /* ------------------------------ Base ------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.015em; color: var(--text); } h1 { font-size: var(--fs-2xl); font-weight: 750; } h2 { font-size: var(--fs-xl); font-weight: 700; } h3 { font-size: var(--fs-md); font-weight: 650; } h4 { font-size: var(--fs-base); font-weight: 650; } p { margin: 0; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } img { max-width: 100%; } .ic { flex: none; display: inline-block; vertical-align: middle; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--primary); color: var(--primary-contrast); padding: 8px 12px; border-radius: var(--r-sm); } .skip:focus { left: 8px; } .muted { color: var(--text-3); } .text-2 { color: var(--text-2); } .small { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); } .strong { font-weight: 650; } .nowrap { white-space: nowrap; } .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .row { display: flex; align-items: center; gap: var(--s-2); } .row-wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .grow { flex: 1; min-width: 0; } .stack { display: flex; flex-direction: column; gap: var(--s-4); } .stack-sm { display: flex; flex-direction: column; gap: var(--s-2); } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Boot */ .boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-3); } .boot-logo { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: #fff; /* [CERT] 14-oct · R azul sobre blanco (dueño: «en todos lados») */ box-shadow: 0 0 0 1px rgba(4,0,188,.12), 0 12px 24px -12px rgba(4,0,188,.6); animation: pulse 1.4s var(--ease) infinite; } /* [CERT] 10-oct: el logo de verdad (como en «Entrar»), no las letras «RA» */ /* ------------------------------ Layout ------------------------------ */ .app { min-height: 100vh; } .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--s-4) var(--s-3); scrollbar-width: thin; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; } .brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.02em; background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%); box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .6); } .brand-name { font-weight: 750; font-size: 15px; line-height: 1.15; } .brand-sub { font-size: 12px; color: var(--text-3); font-weight: 500; } .nav-group { margin-top: var(--s-3); } .nav-label { font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 6px 10px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--text-2); font-weight: 550; font-size: 14px; text-align: left; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--primary-soft); color: var(--primary); } .nav-item.active .ic { color: var(--primary); } .nav-item .ic { color: var(--text-3); } .nav-count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--danger); color: #fff; border-radius: var(--r-full); padding: 1px 7px; min-width: 20px; text-align: center; } .side-products { margin-top: var(--s-2); display: flex; flex-direction: column; gap: 2px; } .side-prod { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-2); font-size: 13.5px; font-weight: 550; text-decoration: none; } .side-prod:hover { background: var(--surface-2); text-decoration: none; color: var(--text); } .side-prod.active { background: var(--surface-2); color: var(--text); } .side-prod-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--pc) 16%, transparent); color: var(--pc); flex: none; } .side-prod .status-dot { margin-left: auto; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; } .status-dot.warn { background: var(--warning); } .status-dot.bad { background: var(--danger); } .sidebar-foot { margin-top: auto; padding-top: var(--s-4); } .help-card { border: 1px solid var(--border); border-radius: var(--r); padding: var(--s-3); background: var(--surface-2); font-size: 13px; } .main { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-6); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); } .content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9); } .hamburger { display: none; } /* Buscador */ .search { position: relative; flex: 1; max-width: 460px; } .search input { width: 100%; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); padding: 0 12px 0 38px; font-size: 14px; color: var(--text); transition: border-color var(--dur), box-shadow var(--dur); } .search input::placeholder { color: var(--text-3); } .search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } .search > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } kbd { font: 600 11px/1 var(--font); color: var(--text-3); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; background: var(--surface-2); } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; } /* Dropdowns / popovers */ .pop { position: absolute; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-lg); padding: 6px; min-width: 240px; animation: popIn .16s var(--ease); } .pop-right { right: 0; top: calc(100% + 8px); } .pop-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-weight: 650; font-size: 14px; } .pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 0; background: none; text-align: left; color: var(--text); font-size: 14px; text-decoration: none; } .pop-item:hover, .pop-item.kbd-active { background: var(--surface-2); text-decoration: none; } .pop-item .ic { color: var(--text-3); } .pop-sep { height: 1px; background: var(--border); margin: 6px 0; } .pop-scroll { max-height: 380px; overflow-y: auto; } .pop-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: 13px; } .rel { position: relative; } .top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); } .icon-btn { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--text-2); transition: background var(--dur), color var(--dur); } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn .dot-badge { position: absolute; top: 6px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); } .prod-switch { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 6px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 13.5px; max-width: 260px; } .prod-switch:hover { border-color: var(--border-strong); } .prod-switch .side-prod-ic { width: 28px; height: 28px; } .prod-switch-label { display: flex; flex-direction: column; line-height: 1.15; text-align: left; min-width: 0; } .prod-switch-label small { font-size: 11px; color: var(--text-3); font-weight: 500; } .avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-weight: 700; font-size: 13px; color: #fff; letter-spacing: .02em; background: linear-gradient(135deg, var(--av1, #6366f1), var(--av2, #a855f7)); } .avatar.sm { width: 28px; height: 28px; font-size: 11px; } .avatar.lg { width: 56px; height: 56px; font-size: 19px; } .avatar.xl { width: 84px; height: 84px; font-size: 28px; } .avatar-btn { border: 0; background: none; padding: 2px; border-radius: 50%; } /* ------------------------------ Componentes ------------------------------ */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); } .page-title { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -.02em; } .page-sub { color: var(--text-3); margin-top: 4px; } .eyebrow { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); } .section { margin-top: var(--s-7); } .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); } .section-title { font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; gap: 8px; } .section-title .ic { color: var(--text-3); } .link-btn { border: 0; background: none; color: var(--primary); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 6px; text-decoration: none; } .link-btn:hover { text-decoration: underline; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--s-5); } .card.pad-0 { padding: 0; overflow: hidden; } .card.hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); } .card.hover:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: var(--border-strong); } .card-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; } .card-title .ic { color: var(--text-3); } .grid { display: grid; gap: var(--s-4); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .g-auto-sm { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-6); align-items: start; } /* Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent; font-weight: 600; font-size: 14px; white-space: nowrap; text-decoration: none; transition: background var(--dur), border-color var(--dur), transform .08s, box-shadow var(--dur); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .btn-primary { background: var(--primary); color: var(--primary-contrast); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, var(--sh-xs); } .btn-primary:hover { background: var(--primary-600); } .btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--sh-xs); } .btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-2); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-soft { background: var(--primary-soft); color: var(--primary); } .btn-soft:hover { filter: brightness(.97); } .btn-success { background: var(--success); color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-warning { background: var(--warning); color: #fff; } .btn-gold { background: linear-gradient(135deg, #f6d365, #e0a526); color: #3b2a00; } .btn-white { background: #fff; color: #111827; } .btn-white:hover { background: #f3f4f6; } .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: var(--r); } .btn-block { width: 100%; } .btn-prod { background: var(--pc); color: #fff; } .btn-prod:hover { filter: brightness(1.06); } /* Chips */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; } .chip .ic { width: 13px; height: 13px; } .chip-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .chip-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } .chip-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .chip-info { background: var(--info-soft); color: var(--info); border-color: transparent; } .chip-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; } .chip-gold { background: var(--gold-soft); color: var(--gold); border-color: transparent; } .chip-prod { background: color-mix(in srgb, var(--pc) 14%, transparent); color: color-mix(in srgb, var(--pc) 80%, var(--text)); border-color: transparent; } /* Segmented / filtros */ .seg { display: inline-flex; padding: 3px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); gap: 2px; } .seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); } .filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .select { height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); padding: 0 10px; font-size: 13.5px; } .input { height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); padding: 0 12px; width: 100%; } .input:focus, .select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } textarea.input { height: auto; min-height: 140px; padding: 12px; resize: vertical; line-height: 1.55; } /* Progreso */ .progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: inherit; background: var(--pc, var(--primary)); transition: width .6s var(--ease); } .progress.thin { height: 6px; } .progress.gold > span { background: linear-gradient(90deg, #f6d365, #e0a526); } .ring { position: relative; display: inline-grid; place-items: center; flex: none; } .ring svg { transform: rotate(-90deg); } .ring .ring-track { stroke: var(--surface-3); } .ring .ring-val { stroke: var(--pc, var(--primary)); transition: stroke-dashoffset .8s var(--ease); } .ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 750; font-size: 14px; letter-spacing: -.02em; } /* Hero continuar */ .hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--s-7); color: #fff; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--pc) 60%, #000) 0%, transparent 55%), linear-gradient(135deg, var(--pc) 0%, color-mix(in srgb, var(--pc) 55%, #0b1020) 100%); box-shadow: var(--sh); } .hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; border: 40px solid rgba(255,255,255,.07); } .hero h2 { color: #fff; font-size: 24px; margin-top: 6px; } .hero .hero-meta { color: rgba(255,255,255,.82); font-size: 13.5px; } .hero .progress { background: rgba(255,255,255,.22); } .hero .progress > span { background: #fff; } .hero-eyebrow { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); } .hero-inner { position: relative; z-index: 1; display: flex; gap: var(--s-6); align-items: center; justify-content: space-between; flex-wrap: wrap; } .greeting { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); } .streak { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-full); background: var(--warning-soft); color: var(--warning); font-weight: 700; font-size: 13.5px; } /* Stat */ .stat { display: flex; gap: 12px; align-items: center; } .stat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); } .stat-ic.gold { background: var(--gold-soft); color: var(--gold); } .stat-ic.green { background: var(--success-soft); color: var(--success); } .stat-ic.orange { background: var(--warning-soft); color: var(--warning); } .stat-ic.blue { background: var(--info-soft); color: var(--info); } .stat-val { font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; } .stat-lbl { font-size: 12.5px; color: var(--text-3); font-weight: 550; } /* Tarjeta de programa */ .prog-card { display: flex; flex-direction: column; gap: var(--s-4); position: relative; overflow: hidden; padding: 0; } .prog-cover { height: 92px; position: relative; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 50%, #0b1020)); display: flex; align-items: flex-end; padding: 14px 18px; } .prog-cover::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 14px 14px; mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); } .prog-cover-ic { position: relative; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.25); } .prog-cover .chip { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.28); color: #fff; border-color: transparent; } .prog-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .prog-body h3 { font-size: 16px; } .prog-foot { margin-top: auto; display: flex; gap: var(--s-2); align-items: center; justify-content: space-between; flex-wrap: wrap; } .prog-card.expired .prog-cover { filter: grayscale(.85); opacity: .8; } .alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 550; } .alert .ic { margin-top: 1px; } .alert-warning { background: var(--warning-soft); color: var(--warning); } .alert-danger { background: var(--danger-soft); color: var(--danger); } .alert-info { background: var(--info-soft); color: var(--info); } .alert-success { background: var(--success-soft); color: var(--success); } .alert-gold { background: var(--gold-soft); color: var(--gold); } /* Eventos */ .event { display: flex; gap: 12px; align-items: center; padding: 10px 0; } .event + .event { border-top: 1px solid var(--border); } .event-date { width: 48px; flex: none; text-align: center; border-radius: 10px; background: var(--surface-2); padding: 6px 0; border: 1px solid var(--border); } .event-date b { display: block; font-size: 18px; line-height: 1.1; } .event-date small { font-size: 10.5px; text-transform: uppercase; color: var(--text-3); font-weight: 650; letter-spacing: .05em; } .ev-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; } .ev-live { background: var(--danger-soft); color: var(--danger); } .ev-deadline { background: var(--warning-soft); color: var(--warning); } .ev-exam { background: var(--primary-soft); color: var(--primary); } .ev-mentoring { background: var(--success-soft); color: var(--success); } /* Oferta */ .offer { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--s-6); background: linear-gradient(120deg, #111827 0%, #1e1b4b 55%, #3b0764 100%); color: #fff; display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; box-shadow: var(--sh); } .offer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 90% 10%, rgba(224,165,38,.35), transparent 60%); } .offer > * { position: relative; } .offer-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fcd34d; flex: none; } .offer h3 { color: #fff; font-size: 18px; } .offer p { color: rgba(255,255,255,.8); font-size: 14px; margin-top: 4px; } .offer .badge-ribbon { display: inline-flex; align-items: center; gap: 4px; background: #fcd34d; color: #3b2a00; border-radius: 99px; padding: 2px 10px; font-size: 11.5px; font-weight: 750; } .offer .price { font-weight: 750; font-size: 15px; color: #fde68a; } /* Lista genérica */ .list-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; } .list-item + .list-item { border-top: 1px solid var(--border); } .li-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-2); } /* Tabs */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { border: 0; background: none; padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--pc, var(--primary)); } /* Header de programa */ .course-head { border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 45%, #0b1020)); color: #fff; padding: var(--s-7); position: relative; margin-bottom: var(--s-6); } .course-head::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 16px 16px; mask-image: linear-gradient(100deg, transparent 40%, #000); -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000); } .course-head > * { position: relative; } .course-head h1 { color: #fff; } .course-head .muted { color: rgba(255,255,255,.78); } .course-head .chip { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; } .course-head .ring .ring-track { stroke: rgba(255,255,255,.2); } .course-head .ring .ring-val { stroke: #fff; } .course-head-inner { display: flex; gap: var(--s-6); align-items: center; justify-content: space-between; flex-wrap: wrap; } .crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); flex-wrap: wrap; margin-bottom: var(--s-3); } .crumbs a { color: var(--text-3); } .crumbs a:hover { color: var(--text); } .course-head .crumbs, .course-head .crumbs a { color: rgba(255,255,255,.8); } /* Acordeón */ .acc { display: flex; flex-direction: column; gap: var(--s-3); } .acc-item { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-xs); overflow: hidden; } .acc-item.gold { border-color: color-mix(in srgb, var(--gold-2) 55%, var(--border)); background: linear-gradient(180deg, var(--gold-soft), var(--surface) 140px); } .acc-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 0; background: none; text-align: left; } .acc-head:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .acc-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-weight: 750; background: color-mix(in srgb, var(--pc) 14%, transparent); color: var(--pc); } .acc-item.gold .acc-num { background: linear-gradient(135deg, #f6d365, #e0a526); color: #3b2a00; } .acc-item.locked .acc-num { background: var(--surface-3); color: var(--text-3); } .acc-chev { transition: transform var(--dur) var(--ease); color: var(--text-3); } .acc-item.open > .acc-head .acc-chev { transform: rotate(180deg); } .acc-body { display: none; padding: 0 18px 18px; } .acc-item.open > .acc-body { display: block; animation: fadeIn .2s var(--ease); } .module { border: 1px solid var(--border); border-radius: var(--r); margin-top: var(--s-3); overflow: hidden; background: var(--surface); } .module-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-2); font-weight: 650; font-size: 14px; border: 0; width: 100%; text-align: left; } .module-head .progress { width: 80px; } .lesson-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; transition: background var(--dur); } .lesson-row:hover { background: var(--surface-2); text-decoration: none; } .lesson-row .lr-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-2); } .lesson-row.done .lr-ic { background: var(--success-soft); color: var(--success); } .lesson-row.current { background: color-mix(in srgb, var(--pc, var(--primary)) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--pc, var(--primary)); } .lesson-row.current .lr-ic { background: var(--pc, var(--primary)); color: #fff; } .lesson-row.locked { color: var(--text-3); cursor: not-allowed; } .lesson-row.locked:hover { background: transparent; } .lesson-row .lr-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12.5px; white-space: nowrap; } .exam-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); margin-top: var(--s-3); border: 1px dashed var(--border-strong); background: var(--surface-2); flex-wrap: wrap; } .exam-card .li-ic { background: var(--primary-soft); color: var(--primary); } .exam-card.passed { border-style: solid; border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: var(--success-soft); } .exam-card.passed .li-ic { background: var(--success); color: #fff; } .exam-card.failed .li-ic { background: var(--danger-soft); color: var(--danger); } .gold-lock { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--gold-soft); color: var(--gold); font-weight: 550; font-size: 13.5px; } /* Lección */ .lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; } .player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(80% 100% at 30% 20%, color-mix(in srgb, var(--pc) 70%, #000), #070912 80%); display: grid; place-items: center; color: #fff; box-shadow: var(--sh); } .player::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; } .play-btn { position: relative; width: 78px; height: 78px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: #111827; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .2s var(--ease); } .play-btn:hover { transform: scale(1.06); } .play-btn .ic { margin-left: 4px; } .player-title { position: absolute; left: 20px; bottom: 54px; right: 20px; font-weight: 700; font-size: 17px; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .player-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 18px; display: flex; align-items: center; gap: 12px; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-size: 12.5px; } .player-bar .progress { flex: 1; background: rgba(255,255,255,.25); height: 4px; } .player-bar .progress > span { background: #fff; } .player.playing .play-btn { opacity: 0; transform: scale(.8); pointer-events: none; } .article { font-size: 15.5px; line-height: 1.75; color: var(--text); } .article h1, .article h2, .article h3 { margin: 1.3em 0 .5em; } .article p, .article ul, .article ol { margin: 0 0 1em; } .article ul, .article ol { padding-left: 1.3em; } .article blockquote { margin: 1em 0; padding: 12px 16px; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .article code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: .92em; } .reading-hero { display: flex; gap: 14px; align-items: center; padding: var(--s-5); border-radius: var(--r-lg); background: color-mix(in srgb, var(--pc) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pc) 25%, var(--border)); } .lesson-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--s-4); } .syllabus { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; padding: 0; } .syllabus-head { padding: 16px; border-bottom: 1px solid var(--border); } .syllabus .lesson-row:first-of-type { border-top: 0; } .resource { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); text-decoration: none; color: var(--text); } .resource:hover { border-color: var(--border-strong); text-decoration: none; background: var(--surface-2); } .comment { display: flex; gap: 12px; padding: 12px 0; } .comment + .comment { border-top: 1px solid var(--border); } /* Examen */ .exam-wrap { max-width: 760px; margin: 0 auto; } .exam-top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); } .timer { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 6px 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); } .timer.low { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .q-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: var(--r); border: 1.5px solid var(--border); background: var(--surface); text-align: left; font-size: 15px; transition: border-color var(--dur), background var(--dur); } .q-option:hover { border-color: var(--border-strong); background: var(--surface-2); } .q-option[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); } .q-letter { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); } .q-option[aria-checked="true"] .q-letter { background: var(--primary); color: var(--primary-contrast); border-color: transparent; } .q-option.correct { border-color: var(--success); background: var(--success-soft); } .q-option.wrong { border-color: var(--danger); background: var(--danger-soft); } .q-dots { display: flex; gap: 6px; flex-wrap: wrap; } .q-dot { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 650; color: var(--text-3); } .q-dot.answered { background: var(--primary-soft); color: var(--primary); border-color: transparent; } .q-dot.now { outline: 2px solid var(--primary); outline-offset: 1px; } .result-hero { text-align: center; padding: var(--s-8) var(--s-5); } .result-hero.pass { background: linear-gradient(180deg, var(--success-soft), var(--surface) 70%); } .result-hero.fail { background: linear-gradient(180deg, var(--danger-soft), var(--surface) 70%); } /* Ranking */ .podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--s-4); align-items: end; margin-bottom: var(--s-6); } .podium-col { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .podium-base { width: 100%; border-radius: var(--r) var(--r) 6px 6px; display: grid; place-items: center; font-weight: 800; font-size: 26px; color: #fff; } .podium-col.p1 .podium-base { height: 120px; background: linear-gradient(180deg, #f6d365, #e0a526); color: #3b2a00; } .podium-col.p2 .podium-base { height: 88px; background: linear-gradient(180deg, #d7dce5, #9aa3b5); color: #1f2937; } .podium-col.p3 .podium-base { height: 68px; background: linear-gradient(180deg, #f0b58a, #c47a45); color: #3b1d06; } .podium-col .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ring-c, var(--border)); } .podium-col.p1 .avatar { --ring-c: #e0a526; } .podium-col.p2 .avatar { --ring-c: #9aa3b5; } .podium-col.p3 .avatar { --ring-c: #c47a45; } .podium-col.me .podium-name::after { content: " (tú)"; color: var(--primary); } .rank-table { width: 100%; border-collapse: collapse; } .rank-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 650; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .rank-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 14px; } .rank-table tr:last-child td { border-bottom: 0; } .rank-table tr.me td { background: var(--primary-soft); font-weight: 650; } .rank-pos { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--surface-2); } .trend-up { color: var(--success); } .trend-down { color: var(--danger); } .trend-same { color: var(--text-3); } .me-sticky { position: sticky; bottom: 12px; z-index: 5; margin-top: var(--s-3); display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--primary); color: var(--primary-contrast); box-shadow: var(--sh-lg); font-weight: 600; } .me-sticky .avatar { background: rgba(255,255,255,.2); } /* Logros */ .level-card { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; } .level-badge { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(135deg, var(--pc, #6366f1), color-mix(in srgb, var(--pc, #6366f1) 40%, #000)); color: #fff; flex: none; position: relative; box-shadow: var(--sh); } .level-badge b { font-size: 30px; font-weight: 800; } .level-badge small { position: absolute; bottom: -9px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; font-size: 11px; font-weight: 700; } .ach { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--s-5) var(--s-4); } .ach-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; box-shadow: 0 8px 18px -8px rgba(245,158,11,.7); } .ach.locked .ach-ic { background: var(--surface-3); color: var(--text-3); box-shadow: none; } .ach.locked h4 { color: var(--text-2); } .ach .progress { width: 100%; } /* Certificados */ .diploma { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-sm); display: flex; flex-direction: column; } .diploma-art { position: relative; padding: 22px; min-height: 170px; background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 12%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; } .diploma-art::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid color-mix(in srgb, var(--pc) 40%, transparent); border-radius: 10px; pointer-events: none; } .diploma-art::after { content: ""; position: absolute; inset: 14px; border: 1px dashed color-mix(in srgb, var(--pc) 25%, transparent); border-radius: 8px; pointer-events: none; } .diploma-seal { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f6d365, #e0a526); color: #3b2a00; box-shadow: 0 6px 14px -6px rgba(224,165,38,.8); } .diploma.locked .diploma-seal, .diploma.in_progress .diploma-seal { background: var(--surface-3); color: var(--text-3); box-shadow: none; } .diploma.locked .diploma-art { filter: grayscale(1); opacity: .7; } .diploma-name { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-style: italic; } .diploma-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; } /* Calendario */ .cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; } .cal-day-head { font-size: 13px; font-weight: 700; color: var(--text-2); margin: var(--s-5) 0 var(--s-2); display: flex; gap: 8px; align-items: center; } .cal-day-head:first-child { margin-top: 0; } .cal-event { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); margin-bottom: var(--s-2); box-shadow: var(--sh-xs); border-left: 4px solid var(--pc, var(--primary)); flex-wrap: wrap; } .minical { padding: var(--s-4); } .minical-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; } .minical-grid .dow { font-size: 11px; font-weight: 650; color: var(--text-3); padding: 4px 0; } .minical-grid .d { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: 13px; border-radius: 8px; color: var(--text-2); } .minical-grid .d.out { color: var(--text-3); opacity: .45; } .minical-grid .d.today { background: var(--primary); color: var(--primary-contrast); font-weight: 700; } .minical-grid .d.has::after { content: ""; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--warning); } .minical-grid .d.today.has::after { background: #fff; } .legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--text-2); } .legend span { display: inline-flex; gap: 6px; align-items: center; } /* Comunidad */ .thread { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); } .thread:last-child { border-bottom: 0; } .thread:hover { background: var(--surface-2); text-decoration: none; } .thread.pinned { background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); } .thread-stats { margin-left: auto; display: flex; gap: 16px; color: var(--text-3); font-size: 13px; white-space: nowrap; } /* Notificaciones */ .notif { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--border); position: relative; } .notif:last-child { border-bottom: 0; } .notif.unread { background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface)); } .notif.unread::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); transform: translateY(-50%); } .n-achievement { background: var(--gold-soft); color: var(--gold); } .n-class { background: var(--danger-soft); color: var(--danger); } .n-system { background: var(--info-soft); color: var(--info); } .n-community { background: var(--success-soft); color: var(--success); } .n-offer { background: var(--primary-soft); color: var(--primary); } /* Perfil */ .profile-head { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; } .kv { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; font-size: 14px; } .kv dt { color: var(--text-3); font-weight: 550; display: flex; align-items: center; gap: 8px; } .kv dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 12px 0; } .toggle-row + .toggle-row { border-top: 1px solid var(--border); } .switch { position: relative; width: 42px; height: 24px; flex: none; border-radius: 99px; border: 0; background: var(--surface-3); transition: background var(--dur); padding: 0; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease); } .switch[aria-checked="true"] { background: var(--primary); } .switch[aria-checked="true"]::after { transform: translateX(18px); } /* FAQ */ .faq-item { border-bottom: 1px solid var(--border); } .faq-item:last-child { border-bottom: 0; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 0; background: none; text-align: left; font-weight: 600; font-size: 14.5px; } .faq-q .ic { transition: transform var(--dur); color: var(--text-3); } .faq-item.open .faq-q .ic { transform: rotate(180deg); } .faq-a { display: none; padding: 0 18px 16px; color: var(--text-2); } .faq-item.open .faq-a { display: block; animation: fadeIn .2s var(--ease); } .status-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; } .status-row + .status-row { border-top: 1px solid var(--border); } /* Recursos */ .res-card { display: flex; flex-direction: column; gap: 10px; } .res-area { margin: 22px 0 10px; font: 700 15px/1.3 var(--font, Poppins, sans-serif); color: var(--text-2); } /* 15-oct · Biblioteca: material de las clases, área por área */ .res-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; } .k-pdf { background: var(--danger-soft); color: var(--danger); } .k-template { background: var(--success-soft); color: var(--success); } .k-video { background: var(--primary-soft); color: var(--primary); } .k-link { background: var(--info-soft); color: var(--info); } /* Estados vacíos, skeleton, error */ .empty { text-align: center; padding: var(--s-8) var(--s-5); display: flex; flex-direction: column; align-items: center; gap: 10px; } .empty-art { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); border: 1px dashed var(--border-strong); margin-bottom: 6px; position: relative; } .empty-art::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; right: -6px; top: -6px; background: var(--primary-soft); border: 3px solid var(--surface); } .empty h3 { font-size: 16px; } .empty p { color: var(--text-3); max-width: 380px; font-size: 14px; } .skel { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: 8px; } .skel-line { height: 12px; margin: 8px 0; } .skel-block { height: 120px; border-radius: var(--r-lg); } .onboard-step { display: flex; gap: 12px; align-items: center; padding: 12px 0; } .onboard-step + .onboard-step { border-top: 1px solid var(--border); } .check-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; flex: none; color: transparent; } .check-dot.on { background: var(--success); border-color: var(--success); color: #fff; } /* Toasts */ .toasts { position: fixed; z-index: 90; top: 76px; right: 20px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 360px; padding: 12px 16px; border-radius: var(--r); background: var(--text); color: var(--bg); box-shadow: var(--sh-lg); font-weight: 600; font-size: 14px; animation: toastIn .35s var(--ease); } .toast.out { animation: toastOut .3s var(--ease) forwards; } .toast-xp { background: linear-gradient(135deg, #1e1b4b, #4f46e5); color: #fff; } .toast-xp .xp-burst { width: 40px; height: 40px; border-radius: 12px; background: #fcd34d; color: #3b2a00; display: grid; place-items: center; animation: burst .6s var(--ease); } .toast small { display: block; font-weight: 500; opacity: .8; font-size: 12.5px; } /* Demo */ .demo-pill { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 99px; background: var(--text); color: var(--bg); box-shadow: var(--sh-lg); font-size: 13px; font-weight: 600; } .demo-pill select { height: 30px; border-radius: 99px; border: 0; padding: 0 10px; background: color-mix(in srgb, var(--bg) 18%, transparent); color: inherit; font-weight: 650; font-size: 13px; } .demo-pill select option { color: #111; } .demo-pill .icon-btn { width: 30px; height: 30px; color: inherit; border-radius: 99px; } .demo-pill .icon-btn:hover { background: color-mix(in srgb, var(--bg) 18%, transparent); color: inherit; } .demo-panel { position: fixed; z-index: 81; right: 20px; bottom: 70px; width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--s-5); animation: popIn .18s var(--ease); font-size: 13.5px; } .demo-panel h3 { margin-bottom: 8px; } .demo-panel ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); } .demo-panel li { margin: 3px 0; } .code-block { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } /* Bottom nav (móvil) */ .bottom-nav { display: none; } .backdrop { display: none; } /* Animaciones */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.92); } } @keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(20px); } } @keyframes burst { 0% { transform: scale(.3) rotate(-30deg); } 60% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1) rotate(0); } } .view { animation: fadeIn .25s var(--ease); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ------------------------------ Responsive ------------------------------ */ @media (max-width: 1180px) { .dash { grid-template-columns: minmax(0, 1fr); } .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { .lesson-layout, .cal-layout { grid-template-columns: minmax(0, 1fr); } .syllabus { position: static; max-height: none; } } @media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr); } .sidebar { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 284px; max-width: 86vw; transform: translateX(-102%); transition: transform .25s var(--ease); box-shadow: var(--sh-lg); } .app.nav-open .sidebar { transform: none; } .app.nav-open .backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8, 10, 18, .45); animation: fadeIn .2s; } .hamburger { display: inline-grid; } .topbar { padding: 0 var(--s-3); gap: var(--s-2); } .content { padding: var(--s-5) var(--s-4) 110px; } .bottom-nav { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 62px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); } .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--text-3); text-decoration: none; } .bottom-nav a.active { color: var(--primary); } .demo-pill { bottom: 74px; right: 12px; } .demo-panel { bottom: 122px; right: 12px; } .toasts { top: 72px; right: 12px; left: 12px; } .toast { max-width: none; } .prod-switch-label small { display: none; } .search kbd { display: none; } } @media (max-width: 640px) { :root { --fs-2xl: 23px; } .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } .g-4.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero, .course-head { padding: var(--s-5); border-radius: var(--r-lg); } .hero h2 { font-size: 20px; } .offer { padding: var(--s-5); } .card { padding: var(--s-4); } .prod-switch { max-width: 56px; padding: 0 6px; } .prod-switch-label, .prod-switch > .ic { display: none; } .search { max-width: none; } .podium { gap: 8px; } .podium-col .avatar.lg { width: 44px; height: 44px; font-size: 15px; } .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 10px; } .rank-table .hide-sm { display: none; } .rank-table td, .rank-table th { padding: 10px; } .thread-stats .hide-sm { display: none; } .lesson-row .lr-meta .hide-sm { display: none; } .top-actions .hide-sm { display: none; } } /* ===================== [CERT] Piezas de la Certificación dentro del campus ===================== */ /* Barra de juego (racha, XP, monedas, potenciador) */ .gami { display: flex; align-items: center; gap: 6px; } .gami-chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; } .gami-chip.racha svg { color: #f97316; } .gami-chip.xp svg { color: var(--gold-2); } .gami-chip.coin svg { color: #d97706; } .gami-chip.boost { background: #ffe400; border-color: #ffe400; color: #0b0d1c; } @media (max-width: 1100px) { .gami-chip.xp { display: none; } } @media (max-width: 900px) { .gami { gap: 4px; } .gami-chip { height: 30px; padding: 0 8px; font-size: 12px; } .gami-chip.coin { display: none; } } /* Clase en vivo con «Confirmar asistencia» */ .live-card { border-radius: var(--r-lg, 16px); padding: 18px 20px; background: #0b0d1c; color: #fff; position: relative; overflow: hidden; } .live-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,18,253,.55), transparent 70%); pointer-events: none; } .live-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #ff6b8a; margin-bottom: 10px; } .live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,107,138,.2); } @media (prefers-reduced-motion: no-preference) { .live-badge::before { animation: livePulse 1.6s ease-in-out infinite; } @keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(255,107,138,0); } } } .live-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; } .live-body h2 { margin: 0; font-size: 18px; line-height: 1.3; } .live-body p { margin: 4px 0 0; font-size: 13px; color: #c9cdea; } .live-date { width: 58px; text-align: center; line-height: 1; padding: 8px 0; border-radius: 12px; background: rgba(255,255,255,.08); } .live-date b { display: block; font-size: 24px; } .live-date span { font-size: 12px; color: #c9cdea; } .live-card .chip-success { background: rgba(84,217,140,.15); color: #54d98c; } /* Panda con tu puesto + quiz diario */ .cert-duo { align-items: stretch; } .panda-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; } .panda-card img { width: 96px; height: 96px; object-fit: contain; flex: none; } .panda-bubble { position: relative; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); font-size: 14px; font-weight: 600; line-height: 1.4; } .panda-bubble::before { content: ""; position: absolute; left: -7px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 0; border-right-color: var(--primary-soft); } .quiz-card { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; } .quiz-card .card-title { display: flex; align-items: center; gap: 8px; } .quiz-card .btn { align-self: flex-start; } .panda-card img { object-fit: cover; object-position: 50% 42%; transform: scale(1.5); } .live-body .grow { flex: 1 1 220px; min-width: 0; } @media (max-width: 600px) { .gami { display: none; } /* en el celular la racha ya está en el saludo; así el buscador conserva espacio */ .live-body .btn, .live-body .chip { flex: 1 1 100%; justify-content: center; } } /* ===================== [CERT] Ajustes del dueño (08-10-2026) ===================== */ /* 1. Siempre versión clara, con más contraste y el azul de REMOTOS como color principal */ :root, :root[data-theme="light"] { --bg: #eceef4; --surface: #ffffff; --surface-2: #f3f4f8; --surface-3: #e4e7ef; --border: #d6dae5; --border-strong: #b4bccd; --text: #0b0d1c; --text-2: #353d55; --text-3: #575f75; --primary: #0012fd; --primary-600: #000ec4; --primary-soft: #e6e9ff; --focus: #0012fd; --sidebar-w: 76px; } .card { border-color: var(--border); } /* 2. Menú izquierdo solo con íconos; el nombre aparece al pasar el ratón o con el teclado */ @media (min-width: 901px) { .sidebar { overflow: visible; padding: 14px 10px; align-items: center; background: #0b0d1c; border-right: 0; } .brand { padding: 4px 0 14px; justify-content: center; } .brand-iso { width: 34px; height: auto; display: block; } .nav-group { margin-top: 6px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; } .nav-group + .nav-group { border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; } .nav-label, .nav-txt, .sidebar-foot, .side-prod .status-dot { display: none; } .nav-item, .side-prod { position: relative; width: 52px; height: 48px; padding: 0; justify-content: center; border-radius: 12px; color: #c4c9e4; } .nav-item .ic { color: #c4c9e4; } .nav-item:hover, .side-prod:hover { background: rgba(255,255,255,.08); color: #fff; } .nav-item:hover .ic { color: #fff; } .nav-item.active { background: #ffe400; color: #0b0d1c; } .nav-item.active .ic { color: #0b0d1c; } .nav-count { position: absolute; top: 4px; right: 4px; margin: 0; padding: 0 5px; min-width: 18px; font-size: 10px; line-height: 16px; } .side-products { margin: 0; align-items: center; } .side-prod-ic { width: 32px; height: 32px; background: color-mix(in srgb, var(--pc) 35%, #0b0d1c); color: #fff; } [data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); background: #0b0d1c; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; padding: 7px 11px; border-radius: 8px; box-shadow: 0 8px 20px -8px rgba(11,13,28,.5); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 80; } .brand[data-tip] { position: relative; } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); } } /* 3. Logo grande de Remotos Academy arriba */ .top-logo { display: flex; align-items: center; flex: none; margin-right: 8px; } .top-logo img { height: 40px; width: auto; display: block; } @media (max-width: 900px) { .top-logo img { height: 30px; } } @media (max-width: 600px) { .top-logo img { height: 26px; } .topbar .search { display: none; } } /* 4. Inicio más limpio */ .solo-movil { display: none; } @media (max-width: 600px) { .solo-movil { display: inline-flex; } } .greeting { margin-bottom: 4px; } .live-body h2 { color: #fff; } @media (min-width: 901px) { .topbar .hamburger { display: none; } } @media (min-width: 901px) { [data-tip]::after { background: #fff; color: #0b0d1c; border: 1px solid var(--border-strong); box-shadow: 0 10px 24px -10px rgba(11,13,28,.45); } } /* ===================== [CERT] Marca REMOTOS v2 (guía de marca, 08-10-2026) ===================== Paleta: #FFE400 amarillo · #0400BC azul · #CECECE gris · #11111A negro · #0012FD azul brillante. Tipografías: Poppins (principal), Montserrat (secundaria), Bebas Neue (cifras y títulos de sección). Superficies: degradados que se funden con el fondo, sin rectángulos con borde duro. */ :root, :root[data-theme="light"] { --font: "Poppins", system-ui, sans-serif; --font-2: "Montserrat", system-ui, sans-serif; --font-display: "Bebas Neue", Impact, sans-serif; --azul: #0400bc; --azul-brillante: #0012fd; --amarillo: #ffe400; --gris: #cecece; --negro: #11111a; --bg: #f1f2fa; --surface: #ffffff; --surface-2: #f4f5fc; --border: rgba(4, 0, 188, .08); --border-strong: rgba(4, 0, 188, .18); --text: #11111a; --text-2: #3a3d55; --text-3: #5d6078; --primary: #0400bc; --primary-600: #030091; --primary-soft: #eceaff; --focus: #0012fd; } body { background: radial-gradient(900px 500px at 85% -10%, rgba(0, 18, 253, .10), transparent 60%), radial-gradient(700px 420px at -5% 105%, rgba(255, 228, 0, .16), transparent 60%), var(--bg); background-attachment: fixed; } .content { background: transparent; } /* Tarjetas: degradado que se funde con el fondo (sin borde duro) */ .card { background: linear-gradient(155deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 55%, rgba(241,242,250,.55) 100%); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -28px rgba(4, 0, 188, .35); } .card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 22px 46px -26px rgba(4, 0, 188, .45); } /* Cifras con Bebas Neue y figuras de la marca de fondo */ .stat { position: relative; overflow: hidden; } .stat-val { font-family: var(--font-display); font-size: 34px; font-weight: 400; letter-spacing: .5px; line-height: 1; color: var(--azul); } .stat-lbl { font-family: var(--font-2); } .stat-ic, .stat-ic.gold, .stat-ic.green, .stat-ic.orange, .stat-ic.blue { background: var(--azul); color: var(--amarillo); border-radius: 12px; } .stat:nth-child(2) .stat-ic { background: var(--amarillo); color: var(--azul); border-radius: 50%; } .stat:nth-child(3) .stat-ic { background: var(--azul-brillante); color: #fff; } .stat:nth-child(4) .stat-ic { background: var(--amarillo); color: var(--azul); clip-path: polygon(50% 4%, 100% 96%, 0 96%); border-radius: 0; padding-top: 10px; } .stat::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, rgba(4,0,188,.08), transparent 70%); } /* Tarjeta «Continúa»: azul de marca con figuras geométricas */ .hero { background: linear-gradient(120deg, var(--azul) 0%, var(--azul-brillante) 100%) !important; } .hero::after { content: ""; right: 40px; bottom: auto; top: 24px; width: 90px; height: 90px; border: 0; border-radius: 22px; background: rgba(255, 228, 0, .9); transform: rotate(12deg); } .hero::before { content: ""; position: absolute; right: 150px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.12); } .hero h2 { font-family: var(--font); } .hero .btn-white { color: var(--azul); } /* Barra superior integrada: racha, XP y monedas como una sola cápsula */ .topbar { background: rgba(241, 242, 250, .78); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(4,0,188,.06); } .gami { gap: 0; padding: 3px; border-radius: 999px; background: linear-gradient(120deg, var(--azul), var(--azul-brillante)); box-shadow: 0 8px 20px -12px rgba(4,0,188,.7); } .gami-chip { height: 32px; background: transparent; border: 0; color: #fff; padding: 0 12px; } .gami-chip + .gami-chip { border-left: 1px solid rgba(255,255,255,.2); border-radius: 0; } .gami-chip.racha svg, .gami-chip.xp svg, .gami-chip.coin svg { color: var(--amarillo); } .gami-chip.boost { background: var(--amarillo); color: var(--azul); border-radius: 999px; } .prod-switch { background: rgba(255,255,255,.7); border-color: transparent; } /* Menú lateral: blanco con íconos azules; la opción activa como el logotipo (cuadrado azul, ícono amarillo) */ @media (min-width: 901px) { .sidebar { background: linear-gradient(180deg, #ffffff 0%, #f6f6fd 100%); box-shadow: 1px 0 0 rgba(4,0,188,.06), 12px 0 30px -24px rgba(4,0,188,.35); } .brand { width: 48px; height: 48px; margin: 2px 0 12px; padding: 0; border-radius: 14px; background: var(--azul); display: grid; place-items: center; } .brand-iso { width: 26px; } .nav-group + .nav-group { border-top: 1px solid rgba(4,0,188,.08); } .nav-item, .side-prod, .nav-item .ic { color: #5a5d7a; } .nav-item:hover, .side-prod:hover { background: var(--primary-soft); color: var(--azul); } .nav-item:hover .ic { color: var(--azul); } .nav-item.active { background: var(--azul); color: var(--amarillo); box-shadow: 0 10px 22px -12px rgba(4,0,188,.8); } .nav-item.active .ic { color: var(--amarillo); } .side-prod-ic { background: color-mix(in srgb, var(--pc) 14%, #fff); color: var(--pc); } [data-tip]::after { background: var(--azul); color: #fff; border: 0; } } /* Clase en vivo: negro de marca con brillo azul */ .live-card { background: linear-gradient(120deg, #11111a 0%, #1a1a3a 100%); } .live-card::after { background: radial-gradient(circle, rgba(0,18,253,.7), transparent 70%); } .btn-gold { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); } .btn-primary, .btn-prod { background: var(--azul); border-color: var(--azul); } .page-title { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; color: var(--negro); } .section-title, .sec-title { font-family: var(--font-display); font-weight: 400; letter-spacing: .5px; font-size: 26px; } .streak { background: var(--amarillo); color: var(--negro); } .streak svg { color: var(--azul); } /* ===================== [CERT] Sala de juegos (figuras de la marca) ===================== */ .fg { display: block; position: absolute; } .fg.c { border-radius: 50%; } .fg.s { border-radius: 22%; } .fg.t { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .fg.r { transform: rotate(45deg); border-radius: 18%; } .fg.az { background: var(--azul); } .fg.az2 { background: var(--azul-brillante); } .fg.am { background: var(--amarillo); } .fg.bl { background: rgba(255,255,255,.35); } /* Portada de la sala */ .sala { position: relative; overflow: hidden; border-radius: 26px; padding: 34px clamp(20px, 4vw, 44px); color: #fff; background: linear-gradient(125deg, var(--azul) 0%, var(--azul-brillante) 70%, #3d4bff 100%); display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 230px; } .sala-formas .c.am { width: 120px; height: 120px; right: 28%; top: -40px; } .sala-formas .s { width: 70px; height: 70px; right: 6%; bottom: 18px; transform: rotate(-14deg); opacity: .8; } .sala-formas .t { width: 64px; height: 56px; left: 46%; bottom: -8px; transform: rotate(10deg); } .sala-formas .c.bl { width: 260px; height: 260px; right: -70px; top: -90px; background: rgba(255,255,255,.08); } @media (prefers-reduced-motion: no-preference) { .sala-formas i { animation: flotar 7s ease-in-out infinite; } .sala-formas i:nth-child(2) { animation-duration: 9s; animation-delay: -2s; } .sala-formas i:nth-child(3) { animation-duration: 8s; animation-delay: -4s; } @keyframes flotar { 50% { translate: 0 -10px; } } } .sala-txt { position: relative; z-index: 1; max-width: 520px; } .sala-titulo { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 6vw, 72px); line-height: .9; letter-spacing: 1px; margin: 0 0 8px; color: #fff; } .sala-txt p { margin: 0 0 18px; color: #dfe2ff; font-size: 15px; } .sala-panda { position: relative; z-index: 1; width: 190px; height: 190px; object-fit: cover; object-position: 50% 40%; transform: scale(1.25); flex: none; filter: drop-shadow(0 18px 24px rgba(0,0,0,.25)); } /* Energía como pilas */ .energia { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(17,17,26,.28); } .pila { width: 14px; height: 22px; border-radius: 4px; background: rgba(255,255,255,.22); } .pila.llena { background: var(--amarillo); box-shadow: 0 0 12px rgba(255,228,0,.6); } .energia-txt { margin-left: 8px; font-size: 12px; line-height: 1.2; color: var(--jg-papel, #dfe2ff); text-align: left; } .energia-txt b { display: block; color: #fff; font-size: 13px; } /* Desafío del día */ .juegos-dia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; } .reto-dia { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 22px; text-decoration: none; color: var(--negro); background: linear-gradient(120deg, #fffbd6 0%, #fff6a8 45%, rgba(255,228,0,.55) 100%); box-shadow: 0 18px 40px -28px rgba(160,130,0,.7); } .reto-dia:hover { text-decoration: none; filter: saturate(1.1); } .reto-cuerpo { flex: 1; display: grid; gap: 4px; min-width: 0; } .reto-etq { font-size: 12px; font-weight: 600; color: #5c4d00; } .reto-cuerpo b { font-size: 16px; line-height: 1.35; font-weight: 600; } /* Tarjetas de juego: degradado que se funde, figura arriba */ .juegos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; } .juego { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; text-decoration: none; color: var(--negro); background: linear-gradient(165deg, #ffffff 0%, rgba(255,255,255,.7) 50%, rgba(236,234,255,.65) 100%); box-shadow: 0 1px 0 #fff inset, 0 18px 40px -30px rgba(4,0,188,.5); transition: transform .18s, box-shadow .18s; } .juego:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 1px 0 #fff inset, 0 24px 46px -26px rgba(4,0,188,.55); } .juego.pronto { opacity: .7; } .juego-cuerpo { display: grid; gap: 4px; } .juego-cuerpo b { font-size: 17px; } .juego-cuerpo span { font-size: 13px; color: var(--text-2); line-height: 1.45; } .juego-pie { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; flex-wrap: wrap; } .juego-premio { display: inline-flex; align-items: center; gap: 4px; color: var(--azul); } .juego-costo { color: var(--text-3); } /* Figuras de cada juego (composiciones con las formas de la marca) */ .figura { position: relative; display: block; width: 96px; height: 76px; flex: none; } .figura-trivia .big { width: 64px; height: 64px; left: 6px; top: 6px; } .figura-trivia .q { left: 27px; top: 13px; color: var(--amarillo); font: 400 50px/1 var(--font-display); } .figura-trivia .sm { width: 30px; height: 30px; left: 58px; top: 40px; transform: rotate(14deg); } .figura-completa .barra { left: 4px; top: 14px; width: 84px; height: 14px; border-radius: 7px; background: var(--azul); } .figura-completa .barra.corta { top: 40px; width: 34px; } .figura-completa .hueco { left: 44px; top: 36px; width: 44px; height: 22px; border-radius: 7px; border: 3px dashed var(--azul); background: var(--amarillo); } .figura-memoria .mini { width: 34px; height: 30px; } .figura-memoria .mini:nth-child(1) { left: 6px; top: 4px; } .figura-memoria .mini:nth-child(2) { left: 46px; top: 4px; } .figura-memoria .mini:nth-child(3) { left: 6px; top: 40px; } .figura-memoria .mini:nth-child(4) { left: 46px; top: 40px; } .figura-ruleta .rodillo { position: absolute; top: 10px; width: 26px; height: 56px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 2px var(--azul) inset; } .figura-ruleta .rodillo:nth-child(1) { left: 4px; } .figura-ruleta .rodillo:nth-child(2) { left: 34px; } .figura-ruleta .rodillo:nth-child(3) { left: 64px; } .figura-ruleta .rodillo i { width: 16px; height: 16px; left: 5px; top: 20px; } .figura-reto .big { width: 60px; height: 60px; left: 6px; top: 8px; transform: rotate(18deg); } .figura-reto .sm { width: 32px; height: 32px; left: 56px; top: 38px; } /* Partida */ .partida { max-width: 680px; margin: 0 auto; padding: 28px clamp(18px, 4vw, 40px); border-radius: 26px; text-align: center; display: grid; justify-items: center; gap: 14px; background: linear-gradient(165deg, #fff 0%, rgba(255,255,255,.75) 60%, color-mix(in srgb, var(--jg-papel, #eceaff) 60%, transparent) 100%); box-shadow: 0 24px 60px -40px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } .partida .energia { background: var(--azul); } .partida-titulo { font-family: var(--font-display); font-weight: 400; font-size: 46px; letter-spacing: 1px; margin: 0; color: var(--azul); line-height: 1; } .volver { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; } .aviso-energia { color: var(--warning); font-weight: 600; } .en-juego { text-align: left; justify-items: stretch; } .partida-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pasos { display: flex; gap: 6px; } .pasos i { width: 28px; height: 6px; border-radius: 3px; background: var(--surface-3); } .pasos i.ok { background: var(--azul); } .pasos i.ya { background: var(--amarillo); } .aciertos { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--azul); } .enunciado { font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; line-height: 1.4; margin: 10px 0 4px; } .hueco-txt { display: inline-block; min-width: 80px; border-bottom: 3px solid var(--amarillo); color: transparent; } .opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .opcion { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; text-align: left; border: 2px solid transparent; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -20px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); font-weight: 600; font-size: 15px; color: var(--negro); cursor: pointer; } .opcion:hover:not(:disabled) { border-color: var(--azul); } .opcion .marca { position: relative; width: 22px; height: 22px; flex: none; background: var(--azul); } .opcion:nth-child(2) .marca, .opcion:nth-child(3) .marca { background: var(--amarillo); } .opcion.correcta { border-color: var(--success); background: var(--success-soft); } .opcion.incorrecta { border-color: var(--danger); background: var(--danger-soft); } .partida-pie { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .partida-pie .bien { color: var(--success); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; } .partida-pie .mal { color: var(--danger); font-weight: 600; } .fin-panda { width: 150px; height: 150px; object-fit: cover; object-position: 50% 40%; transform: scale(1.3); } .fin-cifra { margin: 0; font-size: 16px; } .fin-cifra b { font-family: var(--font-display); font-size: 40px; font-weight: 400; color: var(--azul); display: block; line-height: 1; } .fin-premio { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--amarillo); font-weight: 700; margin: 0; } .reto-texto { font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0; max-width: 34ch; } .reto-label { justify-self: stretch; text-align: left; font-size: 13px; font-weight: 600; } .partida.reto textarea { width: 100%; } .partida.reto .row { width: 100%; } .reto-hecho { display: grid; gap: 6px; justify-items: center; color: var(--success); font-weight: 600; } .reto-hecho p { color: var(--text); font-weight: 400; margin: 0; } @media (max-width: 760px) { .sala { flex-direction: column; align-items: flex-start; min-height: 0; padding-bottom: 0; } .sala-panda { align-self: flex-end; width: 140px; height: 140px; margin-top: -30px; } .juegos-dia { grid-template-columns: 1fr; } .reto-dia { flex-wrap: wrap; } .reto-dia .btn { width: 100%; justify-content: center; } .opciones { grid-template-columns: 1fr; } } .sala-formas { position: absolute; inset: 0; pointer-events: none; } /* ===================== [CERT] Inicio v3 (auditoría + investigación, 08-10-2026) ===================== */ @property --giro { syntax: ''; inherits: false; initial-value: 0deg; } /* Fondo «aurora»: se mueve con transform (barato), sin fondo fijo que cueste repintar */ body { background: #f4f5fb; background-attachment: scroll; } body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; opacity: .5; filter: blur(70px); background: radial-gradient(circle at 18% 22%, rgba(255,228,0,.55) 0 12%, transparent 34%), radial-gradient(circle at 82% 12%, rgba(0,18,253,.32) 0 10%, transparent 32%), radial-gradient(circle at 70% 88%, rgba(4,0,188,.22) 0 10%, transparent 30%); } @media (prefers-reduced-motion: no-preference) { body::before { animation: aurora 32s ease-in-out infinite alternate; } @keyframes aurora { to { transform: translate(3%, 2%) rotate(6deg); } } } .topbar { backdrop-filter: none; background: rgba(244,245,251,.86); } /* Foco visible sobre cualquier fondo */ :focus-visible { outline: 3px solid #ffe400 !important; outline-offset: 2px; box-shadow: 0 0 0 6px #0400bc; border-radius: 10px; } .in3 { display: grid; gap: 22px; max-width: 1080px; } .in3-saludo .page-title { margin: 0; font-size: clamp(26px, 3vw, 34px); } .in3-sub { margin: 4px 0 0; color: var(--text-2); font-size: 15px; } /* Aviso integrado (por vencer / vencido) */ .in3-aviso { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 20px; background: linear-gradient(100deg, rgba(255,228,0,.28), rgba(255,228,0,.06) 60%, transparent); } .in3-aviso.malo { background: linear-gradient(100deg, rgba(194,39,45,.14), rgba(194,39,45,.03) 60%, transparent); } .in3-aviso .grow { display: grid; gap: 2px; font-size: 14px; color: var(--text-2); } .in3-aviso b { color: var(--negro); font-size: 15px; } .in3-aviso-fig { width: 34px; height: 34px; flex: none; background: var(--amarillo); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .in3-aviso.malo .in3-aviso-fig { background: #c2272d; } /* 1. Misión: la única acción principal. Se funde con el fondo; la portada se desvanece hacia el texto */ .in3-mision { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; border-radius: 28px; overflow: hidden; isolation: isolate; background: linear-gradient(110deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 45%, rgba(236,234,255,.5) 100%); box-shadow: 0 30px 60px -44px rgba(4,0,188,.55); } .in3-mision::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 2; pointer-events: none; background: conic-gradient(from var(--giro), rgba(255,228,0,.0), #ffe400, #0012fd, #0400bc, rgba(255,228,0,0) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; } @media (prefers-reduced-motion: no-preference) { .in3-mision::before { animation: giro 9s linear infinite; } @keyframes giro { to { --giro: 360deg; } } } .in3-mision-txt { position: relative; z-index: 1; padding: 30px 34px; display: grid; align-content: center; gap: 10px; } .in3-etq { justify-self: start; font-size: 13px; font-weight: 600; color: var(--azul); padding: 5px 12px; border-radius: 999px; background: rgba(4,0,188,.07); } .in3-mision h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.01em; color: var(--negro); } .in3-donde { margin: 0; font-family: var(--font-2); font-size: 14px; color: var(--text-2); } .in3-avance { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); margin-top: 4px; } .in3-barra { flex: 1; max-width: 280px; height: 8px; border-radius: 99px; background: rgba(4,0,188,.1); overflow: hidden; } .in3-barra span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #0400bc, #0012fd 70%, #ffe400); } .in3-acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .in3-principal { min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; font-size: 16px; font-weight: 600; color: #fff !important; background: linear-gradient(110deg, #0400bc, #0012fd); box-shadow: 0 14px 28px -14px rgba(0,18,253,.9); } .in3-principal:hover { filter: brightness(1.08); text-decoration: none; } .in3-sec { font-size: 14px; font-weight: 600; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; } .in3-mision-img { position: relative; min-height: 230px; } .in3-mision-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); } .in3-mision.vacia { grid-template-columns: 1fr; } /* 2. Racha + nivel y ranking vecindario */ .in3-fila { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; } .in3-racha, .in3-rank { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 24px; text-decoration: none; color: inherit; background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); box-shadow: 0 24px 50px -40px rgba(4,0,188,.5); } .in3-llama { position: relative; width: 58px; height: 70px; flex: none; } .in3-llama::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #ffe400, #ffb800); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 6px; } .in3-llama i { position: absolute; left: 30%; right: 30%; bottom: 6px; height: 32px; background: #0012fd; clip-path: polygon(50% 0, 100% 100%, 0 100%); } @media (prefers-reduced-motion: no-preference) { .in3-llama::before { animation: latir 2.4s ease-in-out infinite; transform-origin: 50% 100%; } @keyframes latir { 50% { transform: scaleY(1.06); } } } .in3-racha-n { margin: 0; font-size: 15px; color: var(--text-2); } .in3-racha-n b { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: .9; color: var(--azul); margin-right: 4px; vertical-align: -6px; } .in3-racha-msg { margin: 2px 0 10px; font-size: 13px; color: var(--text-3); } .in3-semana { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; } .in3-semana li { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-3); background: rgba(4,0,188,.06); } .in3-semana li.si { background: var(--amarillo); color: var(--negro); } .in3-semana li.hoy { box-shadow: 0 0 0 2px var(--azul); } .in3-nivel { --p: 0; width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(#0012fd calc(var(--p) * 1%), rgba(4,0,188,.1) 0); } .in3-nivel b { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: .9; color: var(--azul); } .in3-nivel span { font-size: 10.5px; font-weight: 600; color: var(--text-2); } .in3-rank img { width: 104px; height: 104px; flex: none; object-fit: contain; } .in3-rank:hover { text-decoration: none; box-shadow: 0 26px 50px -36px rgba(4,0,188,.6); } .in3-rank-frase { margin: 0 0 10px; font-weight: 600; font-size: 15px; line-height: 1.35; } .in3-vecinos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .in3-vecinos li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; padding: 6px 10px; border-radius: 10px; font-size: 13px; color: var(--text-2); } .in3-vecinos li.yo { background: linear-gradient(90deg, rgba(255,228,0,.55), rgba(255,228,0,.15)); color: var(--negro); font-weight: 700; } .in3-vecinos .pos { font-family: var(--font-display); font-size: 18px; color: var(--azul); } .in3-vecinos .xp { font-variant-numeric: tabular-nums; } /* 3. Pregunta del día: carta que se gira */ .in3-quiz { perspective: 1200px; } .in3-carta { position: relative; display: grid; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); } .in3-carta .cara { grid-area: 1 / 1; backface-visibility: hidden; border-radius: 24px; padding: 20px 22px; } .in3-carta .frente { display: flex; align-items: center; gap: 18px; background: linear-gradient(110deg, rgba(255,228,0,.42), rgba(255,246,170,.35) 45%, rgba(255,255,255,.5)); } .in3-carta .frente h2 { margin: 0 0 2px; font-size: 17px; } .in3-carta .frente p { margin: 0; font-size: 14px; color: var(--text-2); } .in3-carta .dorso { transform: rotateY(180deg); background: linear-gradient(150deg, #fff, rgba(236,234,255,.7)); box-shadow: 0 24px 50px -40px rgba(4,0,188,.5); } .in3-carta.girada { transform: rotateY(180deg); } .in3-quiz-fig { position: relative; width: 64px; height: 56px; flex: none; } .in3-quiz-fig .t { width: 48px; height: 44px; left: 0; top: 4px; } .in3-quiz-fig .c { width: 26px; height: 26px; left: 36px; top: 26px; } .in3-q { margin: 0 0 12px; font-weight: 600; font-size: 16px; line-height: 1.4; } .in3-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .in3-op { min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 2px solid transparent; background: #fff; box-shadow: 0 8px 20px -16px rgba(4,0,188,.6); text-align: left; font-weight: 600; font-size: 14px; color: var(--negro); cursor: pointer; } .in3-op:hover:not(:disabled) { border-color: var(--azul); } .in3-op.ok { border-color: var(--success); background: var(--success-soft); } .in3-op.mal { border-color: var(--danger); background: var(--danger-soft); } .in3-q-res { margin: 10px 0 0; font-weight: 600; color: var(--azul); min-height: 1.4em; } .in3-quiz.hecho .frente { background: linear-gradient(110deg, rgba(18,128,92,.12), rgba(255,255,255,.4)); } /* 4. Próximos eventos: franja horizontal; la clase en vivo como ticket con borde vivo */ .in3-ev-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .in3-ev-cab .section-title { margin: 0; } .in3-ev-cab a { font-size: 14px; font-weight: 600; color: var(--azul); } .in3-ev-vacio { color: var(--text-2); margin: 0; } .in3-ev-lista { list-style: none; margin: 0; padding: 4px 2px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .in3-ev { scroll-snap-align: start; position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 14px; align-items: start; padding: 16px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); box-shadow: 0 20px 44px -38px rgba(4,0,188,.55); } .in3-ev > .btn, .in3-ev > .in3-rec, .in3-ev > .in3-ok { grid-column: 1 / -1; justify-self: start; } .in3-ev-fecha { text-align: center; line-height: 1; padding: 8px 0; border-radius: 14px; background: rgba(4,0,188,.06); } .in3-ev-fecha b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--azul); } .in3-ev-fecha span { font-size: 12px; font-weight: 600; color: var(--text-2); } .in3-ev-txt h3 { margin: 4px 0 2px; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .in3-ev-txt p { margin: 0; font-size: 13px; color: var(--text-2); } .in3-ev-tipo { font-size: 12px; font-weight: 600; color: var(--text-3); } .in3-ev-tipo.t-live { color: #c2185b; } .in3-ev-tipo.t-mentoring { color: var(--azul); } .in3-ev-tipo.t-deadline { color: #8a6d00; } .in3-ev.ticket { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--giro), #ffe400, #0012fd, #0400bc, #ffe400) border-box; border: 2px solid transparent; } @media (prefers-reduced-motion: no-preference) { .in3-ev.ticket { animation: giro 6s linear infinite; } } .in3-ev.ticket .in3-ev-fecha { background: var(--azul); } .in3-ev.ticket .in3-ev-fecha b, .in3-ev.ticket .in3-ev-fecha span { color: #fff; } .in3-rec { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(4,0,188,.07); color: var(--azul); font-weight: 600; font-size: 13px; cursor: pointer; } .in3-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--success); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; } /* Entrada orquestada (una sola, al cargar) */ @media (prefers-reduced-motion: no-preference) { .in3.entra > * { animation: subir .6s cubic-bezier(.2,.8,.2,1) both; } .in3.entra > *:nth-child(2) { animation-delay: .06s; } .in3.entra > *:nth-child(3) { animation-delay: .12s; } .in3.entra > *:nth-child(4) { animation-delay: .18s; } .in3.entra > *:nth-child(5) { animation-delay: .24s; } @keyframes subir { from { opacity: 0; transform: translateY(14px); } } } /* Confeti con las figuras de la marca */ .confeti { position: fixed; inset: 0; pointer-events: none; z-index: 200; } .confeti i { width: 12px; height: 12px; position: fixed; animation: volar 1.3s cubic-bezier(.15,.7,.3,1) forwards; } @keyframes volar { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 260px)) rotate(var(--rot)); opacity: 0; } } /* Celular */ @media (max-width: 900px) { .in3-fila { grid-template-columns: 1fr; } } @media (max-width: 640px) { .in3 { gap: 16px; } .in3-mision { grid-template-columns: 1fr; } .in3-mision-img { order: -1; min-height: 120px; } .in3-mision-img img { -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); } .in3-mision-txt { padding: 4px 20px 22px; } .in3-principal { width: 100%; justify-content: center; } .in3-racha { flex-wrap: wrap; } .in3-nivel { width: 70px; height: 70px; } .in3-ops { grid-template-columns: 1fr; } .in3-carta .frente { flex-wrap: wrap; } .in3-carta .frente .btn { width: 100%; justify-content: center; } .in3-ev-lista { grid-auto-columns: 82%; } .in3-aviso { flex-wrap: wrap; } .in3-aviso .btn { width: 100%; justify-content: center; } /* La píldora de demostración no debe tapar los botones */ .demo-pill { bottom: auto; top: 66px; right: 8px; transform: scale(.85); transform-origin: top right; opacity: .92; } } .in3 { grid-template-columns: minmax(0, 1fr); } .in3 > * { min-width: 0; } /* Carta: el dorso no estira la cara visible; al girar se intercambian */ .in3-carta .dorso { position: absolute; inset: 0; overflow: auto; } .in3-carta.girada .dorso { position: relative; } .in3-carta.girada .frente { position: absolute; inset: 0; } @media (max-width: 640px) { .demo-pill { top: auto; bottom: 74px; right: auto; left: 8px; transform: scale(.78); transform-origin: bottom left; } .in3-nivel span { font-size: 9px; } } .gami[hidden] { display: none !important; } /* ===================== [CERT] Inicio v3.1: blanco y azul, sin vacíos (pedido del dueño) ===================== */ /* Fondo: solo brillos azules (sin lavado amarillo) */ body::before { background: radial-gradient(circle at 15% 20%, rgba(0,18,253,.16) 0 12%, transparent 36%), radial-gradient(circle at 85% 10%, rgba(0,18,253,.28) 0 10%, transparent 34%), radial-gradient(circle at 70% 90%, rgba(4,0,188,.20) 0 10%, transparent 32%); } /* Tarjeta principal: un solo degradado continuo blanco → azul; la portada se funde en el azul */ .in3-mision { grid-template-columns: minmax(0, 1fr); min-height: 260px; background: linear-gradient(100deg, #ffffff 0%, #ffffff 34%, #e3e7ff 52%, #6d7bff 74%, #0012fd 100%); } .in3-mision-txt { max-width: 58%; } .in3-mision-img { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; min-height: 0; z-index: 0; } .in3-mision-img img { opacity: .92; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 70%); } .in3-mision-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,18,253,0) 0%, rgba(0,18,253,.25) 100%); } @media (max-width: 640px) { .in3-mision { background: linear-gradient(180deg, #0012fd 0%, #6d7bff 22%, #e3e7ff 42%, #ffffff 60%); } .in3-mision-txt { max-width: none; padding-top: 130px; } .in3-mision-img { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 150px; } .in3-mision-img img { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); } } /* Pregunta del día: blanco con un toque azul (sin amarillo) */ .in3-carta .frente { background: linear-gradient(110deg, rgba(255,255,255,.96) 0%, rgba(232,235,255,.85) 55%, rgba(0,18,253,.14) 100%); box-shadow: 0 24px 50px -40px rgba(4,0,188,.5); } .in3-quiz-fig .t { background: var(--azul-brillante); } .in3-quiz-fig .c { background: var(--azul); } .in3-carta .frente .btn-gold { background: linear-gradient(110deg, #0400bc, #0012fd); border-color: transparent; color: #fff; } /* Racha y ranking: acentos azules; el amarillo queda solo como detalle pequeño */ .in3-semana li.si { background: linear-gradient(135deg, #0400bc, #0012fd); color: #fff; } .in3-semana li.hoy { box-shadow: 0 0 0 2px #ffe400; } .in3-vecinos li.yo { background: linear-gradient(90deg, rgba(0,18,253,.16), rgba(0,18,253,.04)); color: var(--azul); } .in3-aviso { background: linear-gradient(100deg, rgba(0,18,253,.12), rgba(0,18,253,.03) 60%, transparent); } .in3-aviso-fig { background: var(--azul-brillante); } /* ===================== [CERT] Inicio v3.2: mejoras pedidas (08-10-2026) ===================== */ /* Barra de arriba: sin cápsula; ícono a color + número, como Duolingo */ .gami { background: none !important; box-shadow: none !important; padding: 0 !important; gap: 18px !important; } .g-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--negro); white-space: nowrap; cursor: default; } .g-item svg { width: 24px; height: 24px; flex: none; } .g-item.racha b { color: #e8590c; } .g-item.xp b { color: var(--azul); } .g-item.coin b { color: #a07800; } .g-item.boost { padding: 4px 10px; border-radius: 999px; background: linear-gradient(110deg, #0400bc, #0012fd); color: #fff; font-size: 12px; } @media (prefers-reduced-motion: no-preference) { .g-item:hover svg { animation: brinco .5s cubic-bezier(.3, 1.6, .5, 1); } @keyframes brinco { 40% { transform: translateY(-4px) scale(1.12); } } } @media (max-width: 1100px) { .g-item.xp { display: none; } } /* Llama de racha (SVG con degradado de fuego) */ .llama { overflow: visible; } .llama .llama-ext, .llama .llama-int { transform-origin: 50% 100%; transform-box: fill-box; } .llama.apagada .llama-ext { fill: #c9ccdc; } .llama.apagada .llama-int { fill: #eceef6; } @media (prefers-reduced-motion: no-preference) { .llama:not(.apagada) .llama-ext { animation: flama 1.8s ease-in-out infinite; } .llama:not(.apagada) .llama-int { animation: flama-in 1.3s ease-in-out infinite; } @keyframes flama { 0%, 100% { transform: scale(1, 1) skewX(0); } 35% { transform: scale(.97, 1.05) skewX(-2deg); } 70% { transform: scale(1.02, .97) skewX(1.5deg); } } @keyframes flama-in { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9, 1.1); } } } .in3-llama { width: 64px; height: 80px; flex: none; position: relative; } .in3-llama::before, .in3-llama i { display: none; } .in3-llama .llama { width: 100%; height: 100%; filter: drop-shadow(0 10px 16px rgba(255, 110, 20, .35)); } .in3-llama:has(.apagada) .llama { filter: none; } /* Nivel y XP: número, barra y cuánto falta */ .in3-nivel { width: 200px; height: auto; flex: none; display: grid; gap: 6px; place-content: initial; text-align: left; background: none; border-radius: 0; padding-left: 18px; border-left: 1px solid rgba(4,0,188,.1); } .in3-nivel-cab { display: flex; align-items: center; gap: 8px; } .in3-nivel-cab svg { width: 26px; height: 26px; } .in3-nivel-cab b { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: .5px; line-height: 1; color: var(--azul); } .in3-nivel-xp { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-2); } .in3-barra-xp { max-width: none; height: 10px; } .in3-nivel-falta { margin: 0; font-size: 12px; color: var(--text-3); } @media (max-width: 640px) { .in3-nivel { width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(4,0,188,.1); } } /* Pregunta del día: pregunta y respuestas a la vista, sin girar */ .in3-quiz { padding: 20px 22px; border-radius: 24px; perspective: none; background: linear-gradient(110deg, rgba(255,255,255,.97) 0%, rgba(240,242,255,.9) 55%, rgba(0,18,253,.10) 100%); box-shadow: 0 24px 50px -40px rgba(4,0,188,.5); } .in3-quiz-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .in3-quiz-cab h2 { margin: 0; font-size: 17px; } .in3-quiz-cab p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); } .in3-quiz-fig { position: static; width: 42px; height: 42px; display: block; } .in3-quiz-fig svg { width: 42px; height: 42px; filter: drop-shadow(0 6px 10px rgba(160,120,0,.3)); } .in3-q { font-size: 17px; } .in3-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in3-op { display: flex; align-items: center; gap: 12px; transition: border-color .15s, transform .15s; } .in3-op:hover:not(:disabled) { transform: translateY(-1px); } .in3-op-l { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--azul); background: rgba(4,0,188,.08); } .in3-op.ok .in3-op-l { background: var(--success); color: #fff; } .in3-op.mal .in3-op-l { background: var(--danger); color: #fff; } @media (prefers-reduced-motion: no-preference) { .in3-op.ok { animation: acierto .45s cubic-bezier(.3, 1.6, .5, 1); } @keyframes acierto { 40% { transform: scale(1.03); } } } .in3-quiz.hecho .in3-quiz-cab { margin-bottom: 4px; } @media (max-width: 640px) { .in3-ops { grid-template-columns: 1fr; } } /* Tarjeta principal: la imagen cubre toda la tarjeta y un solo degradado continuo la integra */ .in3-mision { background: #ffffff; } .in3-mision-txt { max-width: 60%; position: relative; z-index: 2; } .in3-mision-img { position: absolute; inset: 0; width: auto; height: auto; z-index: 0; } .in3-mision-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 1; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; } .in3-mision-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.97) 28%, rgba(240,242,255,.82) 46%, rgba(120,132,255,.45) 72%, rgba(0,18,253,.25) 100%); } @media (max-width: 640px) { .in3-mision { background: #fff; } .in3-mision-txt { max-width: none; padding-top: 22px; } .in3-mision-img { inset: 0; height: auto; } .in3-mision-img img { object-position: center top; } .in3-mision-img::after { background: linear-gradient(180deg, rgba(0,18,253,.25) 0%, rgba(240,242,255,.86) 32%, #ffffff 58%); } } .in3-nivel { width: 230px; } @media (max-width: 640px) { .in3-mision-txt { padding-top: 128px; } .in3-mision-img::after { background: linear-gradient(180deg, rgba(0,18,253,.18) 0%, rgba(0,18,253,.12) 30%, rgba(255,255,255,.96) 48%, #ffffff 58%); } .in3-nivel { width: 100%; } } @media (max-width: 640px) { .in3-mision-img { inset: 0 0 auto 0; height: 170px; } .in3-mision-img img { object-position: 85% center; } .in3-mision-img::after { background: linear-gradient(180deg, rgba(0,18,253,.12) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 80%, #ffffff 100%); } .in3-mision-txt { padding-top: 150px; } } /* ===================== [CERT] Fondo: un solo degradado continuo de izquierda a derecha (pedido del dueño) ===================== */ body { background: linear-gradient(90deg, #ffffff 0%, #f4f5ff 30%, #e9ecff 60%, #d9deff 100%); background-attachment: scroll; } body::before { inset: 0; filter: none; opacity: 1; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,18,253,.05) 50%, rgba(0,18,253,.12) 100%); background-size: 200% 100%; } @media (prefers-reduced-motion: no-preference) { body::before { animation: corrimiento 24s ease-in-out infinite alternate; } @keyframes corrimiento { from { background-position: 0% 0; } to { background-position: 100% 0; } } } .topbar { background: rgba(255,255,255,.72); } /* [CERT] Fondo elegido por el dueño: azul claro arriba que se vuelve blanco al bajar */ body { background: linear-gradient(180deg, #d9deff 0px, #e8ebff 260px, #f5f6ff 560px, #ffffff 900px) no-repeat, #ffffff; } body::before { display: none; animation: none; } .topbar { background: rgba(217,222,255,.82); } /* ===================== [CERT] Llama de racha por etapas + pregunta repetible (08-10-2026) ===================== */ .in3-q-res { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .in3-q-res:empty { display: none; } /* La llama es un botón: crece al pasar el ratón y se aviva al tocarla */ .in3-llama { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 16px; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); } .in3-llama:hover { transform: scale(1.08) rotate(-3deg); } .in3-llama .llama { transition: filter .3s; } /* Tamaño y color según la etapa */ .in3-llama.e-chispa { width: 46px; height: 58px; } .in3-llama.e-viva { width: 60px; height: 76px; } .in3-llama.e-fuerte { width: 70px; height: 88px; } .in3-llama.e-intensa { width: 78px; height: 96px; } .in3-llama.e-legendaria { width: 84px; height: 104px; } .llama.e-fuerte, .in3-llama.e-fuerte .llama { filter: drop-shadow(0 0 14px rgba(255,120,20,.55)); } .llama.e-intensa, .in3-llama.e-intensa .llama { filter: drop-shadow(0 0 18px rgba(255,90,20,.7)) saturate(1.2); } /* Legendaria: núcleo azul de marca */ .llama.e-legendaria .llama-int { fill: #3d4bff; } .in3-llama.e-legendaria .llama { filter: drop-shadow(0 0 22px rgba(0,18,253,.55)); } .llama.e-chispa .llama-int { fill: #fff6c2; } /* Chispas que suben (desde «En llamas») */ .chispas { position: absolute; inset: 0; pointer-events: none; } .chispas i { position: absolute; bottom: 40%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #ffd400; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .in3-llama.e-fuerte .chispas i, .in3-llama.e-intensa .chispas i, .in3-llama.e-legendaria .chispas i { animation: chispa 1.8s ease-out infinite; } .chispas i:nth-child(2) { animation-delay: .45s !important; margin-left: -12px; } .chispas i:nth-child(3) { animation-delay: .9s !important; margin-left: 10px; } .chispas i:nth-child(4) { animation-delay: 1.35s !important; margin-left: -4px; } @keyframes chispa { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -46px) scale(.3); } } /* Más días = la llama baila más rápido */ .llama.e-chispa .llama-ext { animation-duration: 2.6s !important; } .llama.e-fuerte .llama-ext { animation-duration: 1.4s !important; } .llama.e-intensa .llama-ext, .llama.e-legendaria .llama-ext { animation-duration: 1.1s !important; } /* Al tocarla: se aviva */ .llama.aviva { animation: avivar .7s cubic-bezier(.3, 1.6, .5, 1); } @keyframes avivar { 0% { transform: scale(1); } 35% { transform: scale(1.25, 1.35) translateY(-6%); } 70% { transform: scale(.96); } 100% { transform: scale(1); } } } .in3-llama.e-legendaria .chispas i { background: #8ea0ff; } /* ===================== [CERT] Llamas claramente distintas por etapa + Panel de pruebas ===================== */ .llama .llama-lado { display: none; fill: url(#g-llama); transform-origin: 50% 100%; transform-box: fill-box; } /* Chispa: pequeña y amarilla pálida */ .llama.e-chispa .llama-ext { fill: url(#g-llama-am); } .llama.e-chispa .llama-int { fill: #fffbe0; } /* Viva: naranja (la base) */ /* En llamas: roja, con dos lenguas laterales */ .llama.e-fuerte .llama-ext, .llama.e-intensa .llama-ext { fill: url(#g-llama-roja); } .llama.e-fuerte .llama-lado, .llama.e-intensa .llama-lado { display: block; fill: url(#g-llama-roja); } /* Intensa: roja más grande y con halo */ .in3-llama.e-intensa .llama { filter: drop-shadow(0 0 20px rgba(230,40,20,.65)); } /* Legendaria: azul REMOTOS con lenguas y núcleo blanco */ .llama.e-legendaria .llama-ext, .llama.e-legendaria .llama-lado { fill: url(#g-llama-azul); } .llama.e-legendaria .llama-lado { display: block; } .llama.e-legendaria .llama-int { fill: #ffffff; } .in3-llama.e-legendaria .llama { filter: drop-shadow(0 0 24px rgba(0,18,253,.6)); } @media (prefers-reduced-motion: no-preference) { .llama.e-fuerte .llama-lado, .llama.e-intensa .llama-lado, .llama.e-legendaria .llama-lado { animation: lengua 1.2s ease-in-out infinite; } .llama .llama-lado.der { animation-delay: -.6s !important; } @keyframes lengua { 50% { transform: scale(.85, 1.15) rotate(4deg); } } } /* Nombre de la etapa bajo la llama */ .in3-llama::after { content: attr(aria-label); display: none; } /* Panel de pruebas */ .pruebas { position: fixed; right: 16px; bottom: 76px; z-index: 150; font-size: 13px; } .pruebas-abrir { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: #ffe400; color: #11111a; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); } .pruebas-caja { width: 300px; max-height: calc(100vh - 140px); overflow: auto; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -20px rgba(4,0,188,.45); border: 2px solid #ffe400; display: grid; gap: 10px; } .pruebas-cab { display: flex; align-items: center; justify-content: space-between; } .pruebas-cab b { font-size: 15px; color: var(--azul); } .pruebas-nota { margin: 0; color: var(--text-2); } .pruebas-atajos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pruebas-atajos span { font-weight: 600; margin-right: 2px; } .pruebas-atajos button { border: 0; border-radius: 999px; padding: 6px 10px; background: rgba(4,0,188,.08); color: var(--azul); font-weight: 600; font-size: 12px; cursor: pointer; } .pruebas-atajos button:hover { background: var(--azul); color: #fff; } .pruebas-campo { display: grid; gap: 4px; font-weight: 600; color: var(--negro); } .pruebas-campo span { display: flex; justify-content: space-between; gap: 8px; } .pruebas-campo output { color: var(--azul); font-weight: 700; } .pruebas-campo input { width: 100%; accent-color: #0012fd; } @media (max-width: 640px) { .pruebas { right: 8px; bottom: 120px; } .pruebas-caja { width: calc(100vw - 16px); } } .pruebas-abrir[hidden], .pruebas-caja[hidden] { display: none !important; } /* ===================== [CERT] Selector de programa y días de la semana mejorados ===================== */ /* Selector de programa */ .prod-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 7px 10px 7px 7px; border-radius: 16px; cursor: pointer; background: linear-gradient(150deg, #ffffff, rgba(255,255,255,.75)); border: 1px solid rgba(4,0,188,.12); box-shadow: 0 10px 24px -18px rgba(4,0,188,.6); transition: box-shadow .2s, transform .2s; } .prod-switch:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -16px rgba(4,0,188,.7); } .ps-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #ffe400; background: linear-gradient(140deg, var(--pc, #0400bc), color-mix(in srgb, var(--pc, #0400bc) 70%, #0012fd)); } .ps-txt { display: grid; gap: 4px; text-align: left; min-width: 0; } .ps-nom { font-weight: 700; font-size: 14px; line-height: 1.1; color: var(--negro); } .ps-acceso { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; } .ps-barra { width: 54px; height: 6px; border-radius: 99px; background: rgba(4,0,188,.1); overflow: hidden; flex: none; } .ps-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0400bc, #0012fd); } .ps-acceso.pronto .ps-barra i { background: linear-gradient(90deg, #ff9a00, #ffcf00); } .ps-acceso.pronto { color: #9a5b00; } .ps-acceso.vencido .ps-barra i { background: #c2272d; } .ps-acceso.vencido { color: #c2272d; } .ps-flecha { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--azul); background: rgba(4,0,188,.06); flex: none; transition: transform .2s; } .prod-switch[aria-expanded="true"] .ps-flecha, .prod-switch:hover .ps-flecha { transform: translateY(1px); } @media (max-width: 900px) { .ps-txt, .ps-flecha { display: none; } .prod-switch { min-height: 44px; padding: 3px; gap: 0; } } /* Días de la semana: círculos perfectos, sin aplastarse */ .in3-semana { gap: 8px; flex-wrap: nowrap; } .in3-semana li.dia { width: auto; height: auto; background: none !important; box-shadow: none !important; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; } .dia-l { font-family: var(--font-2); font-size: 11px; font-weight: 700; font-style: normal; color: var(--text-3); line-height: 1; } .dia-c { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(4,0,188,.07); } .dia.si .dia-c { background: linear-gradient(150deg, #fff3e0, #ffe0b8); box-shadow: inset 0 0 0 1.5px rgba(255,120,20,.35); } .dia.si .dia-c .llama { width: 16px; height: 20px; } .dia.si .dia-l { color: #e8590c; } .dia.hoy .dia-c { background: #fff; box-shadow: inset 0 0 0 2px var(--azul); } .dia.hoy.si .dia-c { box-shadow: inset 0 0 0 2px var(--azul); background: linear-gradient(150deg, #fff3e0, #ffe0b8); } .dia.hoy .dia-c b { width: 8px; height: 8px; border-radius: 50%; background: var(--azul); } .dia.hoy .dia-l { color: var(--azul); } .dia.futuro .dia-c { background: rgba(4,0,188,.04); } @media (max-width: 400px) { .in3-semana { gap: 5px; } .dia-c { width: 28px; height: 28px; } } /* Racha: el nivel pasa a una fila propia para que los días respiren */ .in3-racha { flex-wrap: wrap; align-items: center; } .in3-racha > .grow { flex: 1 1 260px; min-width: 0; } .in3-nivel { flex: 1 1 100%; width: auto !important; padding: 14px 0 0 !important; border-left: 0 !important; border-top: 1px solid rgba(4,0,188,.1); } /* ===================== [CERT] Marca de agua: la «R» de REMOTOS (como en el Panel de ventas) ===================== */ body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; right: -6vw; bottom: -10vh; width: min(58vw, 760px); aspect-ratio: 1080 / 1204; background: url("assets/marca-agua-r.png") center / contain no-repeat; opacity: .055; transform: rotate(-8deg); } @media (max-width: 640px) { body::after { width: 88vw; right: -22vw; bottom: 6vh; opacity: .045; } } /* ===================== [CERT] Llamas de Google Noto + ranking nuevo (08-10-2026) ===================== */ /* Llamas: misma llama de fuego real; cada etapa cambia tamaño, brillo y color */ .llama-img { display: block; object-fit: contain; transition: filter .3s, transform .3s; } .in3-llama { display: grid; justify-items: center; align-content: center; gap: 2px; width: 96px !important; height: auto !important; } .in3-llama .llama-img { width: 78px; height: 78px; } .in3-llama .llama, .in3-llama .chispas { display: none; } .llama-nom { font-size: 11px; font-weight: 700; color: #e8590c; white-space: nowrap; } .in3-llama.e-apagada .llama-nom { color: var(--text-3); } .in3-llama.e-legendaria .llama-nom { color: var(--azul); } .llama-img.e-apagada { filter: grayscale(1) opacity(.45); } .in3-llama.e-chispa .llama-img { width: 54px; height: 54px; filter: saturate(.85) brightness(1.1); } .in3-llama.e-viva .llama-img { width: 72px; height: 72px; } .in3-llama.e-fuerte .llama-img { width: 82px; height: 82px; filter: drop-shadow(0 0 12px rgba(255,110,20,.55)); } .in3-llama.e-intensa .llama-img { width: 90px; height: 90px; filter: drop-shadow(0 0 18px rgba(255,70,20,.75)) saturate(1.25); } .llama-img.e-legendaria { filter: hue-rotate(200deg) saturate(1.6) brightness(1.05); } .in3-llama.e-legendaria .llama-img { width: 96px; height: 96px; filter: hue-rotate(200deg) saturate(1.6) brightness(1.05) drop-shadow(0 0 20px rgba(0,18,253,.6)); } @media (prefers-reduced-motion: no-preference) { .llama-img.aviva { animation: avivar .7s cubic-bezier(.3, 1.6, .5, 1); } } .g-item.racha .llama-img { width: 22px; height: 22px; } .dia.si .dia-c .llama-img { width: 18px; height: 18px; } /* Ranking nuevo */ .in3-rank2 { display: grid; gap: 14px; padding: 18px 20px; border-radius: 24px; text-decoration: none; color: inherit; position: relative; overflow: hidden; background: linear-gradient(150deg, #ffffff 0%, rgba(240,242,255,.92) 55%, rgba(0,18,253,.10) 100%); box-shadow: 0 24px 50px -40px rgba(4,0,188,.55); } .in3-rank2:hover { text-decoration: none; box-shadow: 0 28px 54px -36px rgba(4,0,188,.65); } .in3-rank2::before { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,228,0,.25), transparent 70%); pointer-events: none; } .rk-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; } .rk-etq { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 1.55; letter-spacing: normal; font-weight: 700; color: var(--azul); } /* es un h2: mismo aspecto que antes */ .rk-ver { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--text-2); } .rk-cuerpo { display: flex; align-items: flex-end; gap: 14px; } .rk-panda { position: relative; flex: none; display: grid; justify-items: center; } .rk-panda img { width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(4,0,188,.18)); } @media (prefers-reduced-motion: no-preference) { .in3-rank2:hover .rk-panda img { animation: brinco .6s cubic-bezier(.3, 1.6, .5, 1); } } .rk-globo { position: relative; margin: 0 0 6px; padding: 7px 12px; border-radius: 12px; background: var(--azul); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .rk-globo::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--azul); } .rk-centro { flex: 1; min-width: 0; display: grid; gap: 8px; } .rk-puesto { margin: 0; display: flex; align-items: baseline; gap: 6px; } .rk-puesto b { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: .85; color: var(--azul); } .rk-puesto span { font-size: 13px; font-weight: 600; color: var(--text-2); } .rk-podio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; height: 132px; } .rk-col { display: grid; justify-items: center; gap: 3px; height: 100%; align-content: end; } .rk-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--azul); background: #fff; box-shadow: 0 0 0 2px rgba(4,0,188,.15); } .rk-nom { font-size: 12px; font-weight: 600; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rk-barra { width: 100%; height: calc(var(--alto) * .62px); min-height: 40px; border-radius: 12px 12px 6px 6px; display: grid; align-content: start; justify-items: center; padding-top: 6px; background: linear-gradient(180deg, rgba(4,0,188,.14), rgba(4,0,188,.05)); } .rk-barra b { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1; color: var(--azul); } .rk-barra small { font-size: 10.5px; font-weight: 600; color: var(--text-2); } .rk-col.yo .rk-av { background: var(--amarillo); color: var(--negro); box-shadow: 0 0 0 3px var(--azul); } .rk-col.yo .rk-nom { color: var(--azul); font-weight: 700; } .rk-col.yo .rk-barra { background: linear-gradient(180deg, #0012fd, #0400bc); box-shadow: 0 12px 20px -12px rgba(0,18,253,.9); } .rk-col.yo .rk-barra b, .rk-col.yo .rk-barra small { color: #fff; } @media (prefers-reduced-motion: no-preference) { .rk-barra { animation: crecer .8s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; } .rk-col.yo .rk-barra { animation-delay: .1s; } @keyframes crecer { from { transform: scaleY(.2); opacity: 0; } } } .rk-nuevo { margin: 0; font-weight: 600; } .rk-meta { display: grid; gap: 6px; } .rk-meta-txt { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); } .rk-meta-txt b { color: var(--azul); } .rk-meta-barra { height: 8px; border-radius: 99px; background: rgba(4,0,188,.1); overflow: hidden; } .rk-meta-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0400bc, #0012fd 70%, #ffe400); } @media (max-width: 640px) { .rk-panda img { width: 92px; height: 92px; } .rk-podio { height: 120px; } .rk-globo { font-size: 11.5px; } } .rk-podio { height: 160px; } .rk-barra { height: calc(var(--alto) * .9px); min-height: 44px; } /* ===================== [CERT] Ajustes: selector transparente, días solo letra, escalera del ranking ===================== */ /* Selector de programa transparente, integrado como la barra de arriba */ .prod-switch { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .prod-switch:hover { background: rgba(255,255,255,.45) !important; transform: none; } .ps-flecha { background: transparent; } /* Días de la semana: solo la letra; hoy marcado, los días estudiados en azul */ .in3-semana { gap: 6px; } .in3-semana li.dia { width: 34px; height: 34px; border-radius: 50%; justify-content: center; } .dia-l { font-size: 13px; color: var(--text-3); } .dia.si .dia-l { color: var(--azul); } .dia.hoy { background: linear-gradient(140deg, #0400bc, #0012fd) !important; box-shadow: 0 8px 16px -8px rgba(0,18,253,.8) !important; } .dia.hoy .dia-l { color: #fff; } /* Llama: apagada sin movimiento; crece por etapa */ .in3-llama.e-apagada .llama-img { width: 48px; height: 48px; } .in3-llama.e-apagada:hover { transform: none; } /* Escalera del ranking: #1 a la izquierda y bajando */ .rk-podio { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .rk-podio:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rk-col { position: relative; } .rk-corona { color: #e0a526; line-height: 0; margin-bottom: -2px; } .rk-col.top1 .rk-av { background: linear-gradient(140deg, #fff27a, #ffe400); color: var(--negro); box-shadow: 0 0 0 2px #e0a526; } .rk-col.top1 .rk-barra { background: linear-gradient(180deg, rgba(255,228,0,.55), rgba(255,228,0,.15)); } .rk-col.top1 .rk-barra b { color: #7a5c00; } .rk-barra { height: calc(var(--alto) * 1px); } .rk-podio { height: 176px; } .in3-semana li.dia.hoy { background: linear-gradient(140deg, #0400bc, #0012fd) !important; box-shadow: 0 8px 16px -8px rgba(0,18,253,.8) !important; } .in3-semana li.dia.hoy .dia-l { color: #fff; } /* ===================== [CERT] Mis programas: «Próximamente» (3 especializaciones + Remotos Work) ===================== */ .prox { margin-top: 34px; display: grid; gap: 14px; } .prox-cab .section-title { margin: 0; } .prox-cab p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; } .prox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .prox-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, #ffffff 0%, rgba(255,255,255,.78) 55%, color-mix(in srgb, var(--pc) 10%, transparent) 100%); box-shadow: 0 1px 0 #fff inset, 0 20px 44px -34px rgba(4,0,188,.55); } .prox-card::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 18%, transparent), transparent 70%); pointer-events: none; } .prox-top { display: flex; align-items: center; justify-content: space-between; } .prox-ic { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #ffe400; background: linear-gradient(140deg, var(--pc, #0400bc), #0400bc); } .prox-badge { font-size: 11.5px; font-weight: 700; color: var(--azul); padding: 5px 10px; border-radius: 999px; background: rgba(4,0,188,.08); } .prox-tipo { font-size: 12px; font-weight: 600; color: var(--text-3); } .prox-card h3 { margin: 0; font-size: 17px; line-height: 1.25; } .prox-card p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.5; } .prox-formato { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .prox-formato li { font-size: 12px; font-weight: 600; color: var(--azul); padding: 4px 10px; border-radius: 999px; background: rgba(0,18,253,.07); } .prox-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; } .prox-roles span { font-weight: 600; color: var(--text-3); margin-right: 2px; } .prox-roles em { font-style: normal; color: var(--text-2); padding: 3px 9px; border-radius: 8px; background: rgba(17,17,26,.05); } .prox-btn { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; } .prox-ok { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--success); } .prox-work { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(100deg, rgba(0,18,253,.10), rgba(255,255,255,.7) 60%, rgba(255,255,255,.4)); } .prox-work div { flex: 1; display: grid; gap: 2px; } .prox-work b { font-size: 15px; } .prox-work div span { font-size: 13px; color: var(--text-2); } @media (max-width: 640px) { .prox-work { flex-wrap: wrap; } } /* [CERT] «Próximamente» con el estilo de la oferta (fondo oscuro con degradado) */ .prox-oferta { display: flex; flex-direction: column; gap: 10px; } .prox-oferta .badge-ribbon { align-self: flex-start; } .prox-oferta .prox-formato li { background: rgba(255,255,255,.12); color: #fde68a; } .prox-oferta .prox-roles span { color: rgba(255,255,255,.6); } .prox-oferta .prox-roles em { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); } .prox-oferta .btn { margin-top: auto; } .prox-oferta .prox-ok { margin-top: auto; color: #86efac; } /* [CERT] 12-oct · «Próximamente» y «Siguiente paso en tu carrera», propuesta A (la eligió el dueño): tarjetas de vidrio claro en tres columnas que llenan el ancho (sin el hueco de antes), Remotos Work como banda de vidrio que cierra el grupo y la oferta en una tarjeta ancha. Sin el morado ni el amarillo. Mismo contenido y misma lógica de antes (app.js: proxA, ofertasA). */ :root { --pv-tit: #121452; --pv-etq: rgba(4,0,188,.74); } .pv { margin-top: 34px; display: grid; gap: 16px; } .pv-cab .section-title { margin: 0; } .pv-cab p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; } .pv-vidrio { position: relative; isolation: isolate; border-radius: 24px; border: 1px solid rgba(255,255,255,.65); background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } .pv-vidrio::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .pv-vidrio::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .pv-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #0012fd 0%, #0400bc 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 22px -12px rgba(4,0,188,.85); } .pv-ic-work { background: linear-gradient(140deg, #6c78ff 0%, #0400bc 100%); } .pv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 600; color: #0400bc; background: linear-gradient(135deg, rgba(179,186,255,.45), rgba(238,240,255,.8)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(108,120,255,.2); } .pv-etq { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pv-etq); } .pv-nombre { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; line-height: .98; font-size: 30px; color: var(--pv-tit); text-wrap: balance; } .pv-formato { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; } .pv-formato li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pv-tit); } .pv-formato .ic { color: #6c78ff; } .pv-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; } .pv-roles > span { font-size: 12px; font-weight: 600; color: var(--text-3); margin-right: 2px; } .pv-roles em { font-style: normal; font-size: 12.5px; color: var(--pv-tit); padding: 4px 11px; border-radius: 999px; background: rgba(238,240,255,.95); box-shadow: inset 0 0 0 1px rgba(108,120,255,.18); } .pv-btn { height: 44px; padding: 0 18px; border-radius: 12px; border: 0; color: #fff; font-size: 14px; font-weight: 600; background: linear-gradient(120deg, #0400bc 0%, #0012fd 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 24px -14px rgba(4,0,188,.9); } .pv-btn:hover { color: #fff; filter: brightness(1.1); } .pv-ok { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #0400bc; background: linear-gradient(135deg, rgba(238,240,255,.95), rgba(179,186,255,.38)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(108,120,255,.28); } .pv-ok i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #0012fd, #0400bc); } .pv-ok.btn-block { width: 100%; } .pv-precio { font-size: 14px; font-weight: 700; line-height: 1.4; color: #0400bc; } .pvA-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .pvA-card { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 22px; } .pvA-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pvA-txt { display: grid; gap: 8px; align-content: start; } .pvA-txt p, .pvA-of-txt p, .pvA-work p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); } .pvA-pie { margin-top: auto; padding-top: 2px; } @supports (grid-template-rows: subgrid) { /* formato, roles y botón a la misma altura en las tres tarjetas */ .pvA-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; } .pvA-pie { align-self: end; } .pvA-card .pv-roles { align-content: flex-start; } } .pvA-work { display: flex; align-items: center; gap: 18px; padding: 20px 26px; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 52%), linear-gradient(100deg, rgba(179,186,255,.42) 0%, rgba(238,240,255,.3) 42%, rgba(255,255,255,.14) 100%); } .pvA-work-txt { flex: 1; display: grid; gap: 4px; min-width: 0; } .pvA-work .pv-nombre { font-size: 26px; } .pvA-ofertas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); } .pvA-oferta { display: grid; gap: 18px; padding: 24px; align-content: start; } .pvA-of-txt { display: grid; gap: 12px; } .pvA-of-txt p { max-width: 70ch; } .pvA-of-accion { display: grid; gap: 10px; align-self: end; } .pvA-ofertas.sola .pvA-oferta { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; column-gap: 40px; padding: 26px 32px; } .pvA-ofertas.sola .pvA-of-accion { align-self: center; text-align: center; } .pvA-ofertas.sola .pvA-top { justify-content: flex-start; } @media (max-width: 900px) { .pvA-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pvA-ofertas.sola .pvA-oferta { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .pv { gap: 14px; } .pv-nombre { font-size: 28px; } .pvA-card { padding: 20px 18px; gap: 14px; } .pvA-work { flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; padding: 18px; } .pvA-work-txt { flex-basis: calc(100% - 64px); } .pvA-work .pv-chip { margin-left: 60px; } .pvA-oferta, .pvA-ofertas.sola .pvA-oferta { padding: 20px 18px; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root:not([data-theme="dark"]) .pv-vidrio { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* ===================== [CERT] Inicio v4: llama por etapa, liquid glass, racha compacta, ranking consecutivo ===================== */ /* Pedido del dueño (08-10-2026, noche): 1) cada etapa de la llama con su propia animación, de menos a más; 2) la tarjeta de racha sin espacio vacío y equilibrada con el ranking; 3) efecto «liquid glass» en las tarjetas del Inicio; 4) la escalera del ranking con puestos consecutivos (sin saltar al #1). Orden interno: A) llama B) racha compacta y ranking C) liquid glass (va al final porque pisa fondos y sombras). */ /* ---------- A) Llama: una animación propia por etapa, de menos a más ---------- */ /* La misma llama de Google Noto en todas las etapas; lo que cambia es cuánto se mueve: Apagada: gris y quieta. Chispa: imagen fija que apenas titila, con un brillo cálido diminuto. Llama viva: animada, con un vaivén leve. En llamas: vaivén moderado y un resplandor que late. Fuego intenso: vaivén rápido, resplandor fuerte y brasas que suben. Legendaria: azul, aura que respira y un anillo que gira, brasas azules; la más viva. Rendimiento: solo se animan transform, scale, translate, rotate y opacity (corren en el compositor, sin repintar) y el toque nunca anima la misma propiedad que la animación continua del mismo elemento (si no, Chrome la saca del compositor). */ /* Tamaño (--t), resplandor (--g tamaño, --o opacidad, --brillo color), brasas (--sube) y llamarada al tocar (--fl) por etapa */ .in3-llama { --t: 72px; isolation: isolate; } .in3-llama.e-apagada { --t: 48px; --o: 0; --brillo: rgba(255,170,60,.5); } .in3-llama.e-chispa { --t: 54px; --g: .95; --o: .42; --brillo: rgba(255,190,70,.6); --sube: 24px; --fl: 1.12; } .in3-llama.e-viva { --t: 72px; --g: 1.1; --o: .5; --brillo: rgba(255,150,40,.55); --sube: 32px; --fl: 1.2; } .in3-llama.e-fuerte { --t: 82px; --g: 1.2; --o: .7; --brillo: rgba(255,120,30,.6); --sube: 40px; --fl: 1.24; } .in3-llama.e-intensa { --t: 90px; --g: 1.26; --o: .85; --brillo: rgba(255,96,20,.6); --sube: 44px; --fl: 1.26; } .in3-llama.e-legendaria { --t: 96px; --g: 1.22; --o: .9; --brillo: rgba(0,18,253,.42); --sube: 56px; --fl: 1.3; } .in3-llama.e-apagada .llama-img, .in3-llama.e-chispa .llama-img, .in3-llama.e-viva .llama-img, .in3-llama.e-fuerte .llama-img, .in3-llama.e-intensa .llama-img, .in3-llama.e-legendaria .llama-img { width: var(--t); height: var(--t); transform-origin: 50% 95%; } /* Color de cada etapa (el halo pasa a una capa aparte, más liviana que drop-shadow sobre la imagen animada) */ .in3-llama.e-fuerte .llama-img { filter: saturate(1.1); } .in3-llama.e-intensa .llama-img { filter: saturate(1.25) contrast(1.04); } .in3-llama.e-legendaria .llama-img { filter: hue-rotate(200deg) saturate(1.6) brightness(1.05); } .in3-llama picture { display: block; } /* En pantallas táctiles el :hover se queda pegado tras tocar: que la llama no quede inclinada */ @media (hover: none) { .in3-llama:hover { transform: none; } } /* Resplandor detrás de la llama: crece y se intensifica por etapa (degradado que se funde, sin bordes) */ .in3-llama::before { content: ""; display: block; position: absolute; inset: auto; z-index: -1; pointer-events: none; --d: calc(var(--t) * var(--g, 1.1)); left: 50%; top: calc(var(--t) * .6); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; clip-path: none; transform: none; transform-origin: 50% 50%; animation: none; background: radial-gradient(closest-side, var(--brillo, rgba(255,140,30,.55)), rgba(255,140,30,0)); opacity: var(--o, 0); } /* Legendaria: anillo de luz azul alrededor de la llama */ .in3-llama.e-legendaria::after { content: ""; display: block; position: absolute; inset: auto; z-index: -1; pointer-events: none; --d: calc(var(--t) * 1.08); left: 50%; top: calc(var(--t) * .56); width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; opacity: .85; background: conic-gradient(from 0deg, rgba(0,18,253,0), rgba(0,18,253,.5) 10%, rgba(0,18,253,0) 24%, rgba(127,140,255,.55) 42%, rgba(127,140,255,0) 56%, rgba(4,0,188,.45) 74%, rgba(4,0,188,0) 88%); -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 74%, #000 82%, transparent 100%); mask: radial-gradient(closest-side, transparent 64%, #000 74%, #000 82%, transparent 100%); } /* Brasas (10 puntos): las primeras suben sin parar (Fuego intenso 1-4, Legendaria 1-6); las 7-10 solo saltan al tocar */ .in3-llama .brasas { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .in3-llama .brasas i { display: block; position: absolute; left: 50%; top: calc(var(--t) * .32); right: auto; bottom: auto; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; clip-path: none; opacity: 0; background: radial-gradient(circle, #fff3b0 0 35%, #ff9a1f 75%); box-shadow: 0 0 6px 2px rgba(255,90,10,.55); } .in3-llama .brasas i:nth-child(1) { --x0: -9px; --dx: -7px; --dl: 0s; } .in3-llama .brasas i:nth-child(2) { --x0: 7px; --dx: 8px; --dl: -.55s; width: 4px; height: 4px; } .in3-llama .brasas i:nth-child(3) { --x0: -2px; --dx: 4px; --dl: -1.05s; } .in3-llama .brasas i:nth-child(4) { --x0: 12px; --dx: -5px; --dl: -.3s; width: 4px; height: 4px; } .in3-llama .brasas i:nth-child(5) { --x0: -14px; --dx: -10px; --dl: -.8s; width: 4px; height: 4px; } .in3-llama .brasas i:nth-child(6) { --x0: 3px; --dx: 11px; --dl: -1.3s; width: 4px; height: 4px; } .in3-llama .brasas i:nth-child(7) { --x0: -12px; --dx: -12px; --db: 0ms; } .in3-llama .brasas i:nth-child(8) { --x0: 10px; --dx: 12px; --db: 60ms; width: 4px; height: 4px; } .in3-llama .brasas i:nth-child(9) { --x0: -3px; --dx: -5px; --db: 120ms; } .in3-llama .brasas i:nth-child(10) { --x0: 14px; --dx: 7px; --db: 30ms; width: 4px; height: 4px; } .in3-llama.e-legendaria .brasas i { background: radial-gradient(circle, #ffffff 0 35%, #8ea0ff 75%); box-shadow: 0 0 7px 2px rgba(0,18,253,.6); } /* Barra de arriba: la llama pequeña sigue la misma lógica, en versión mínima */ .g-item.racha .llama-img { transform-origin: 50% 95%; } .g-item.racha .llama-img.e-fuerte { filter: drop-shadow(0 0 2px rgba(255,110,20,.5)); } .g-item.racha .llama-img.e-intensa { filter: saturate(1.25) drop-shadow(0 0 3px rgba(255,70,20,.6)); } .g-item.racha .llama-img.e-legendaria { filter: hue-rotate(200deg) saturate(1.6) brightness(1.05) drop-shadow(0 0 3px rgba(0,18,253,.55)); } .g-item.racha:has(.e-legendaria) b { color: var(--azul); } .g-item.racha:has(.e-apagada) b { color: var(--text-3); } @media (prefers-reduced-motion: no-preference) { /* Movimiento continuo de cada etapa (la apagada no se mueve) */ .in3-llama.e-chispa .llama-img { animation: llama-titila 3.6s ease-in-out infinite; } .in3-llama.e-viva .llama-img { animation: llama-vaiven-1 3.4s ease-in-out infinite; } .in3-llama.e-fuerte .llama-img { animation: llama-vaiven-2 2.2s ease-in-out infinite; } .in3-llama.e-intensa .llama-img { animation: llama-vaiven-3 1.3s ease-in-out infinite; } .in3-llama.e-legendaria .llama-img { animation: llama-vaiven-4 1.05s ease-in-out infinite; } .in3-llama.e-chispa::before { animation: llama-brillo-titila 3.6s ease-in-out infinite; } .in3-llama.e-fuerte::before { animation: llama-brillo-late 1.6s ease-in-out infinite; } .in3-llama.e-intensa::before { animation: llama-brillo-fuerte 1.1s ease-in-out infinite; } .in3-llama.e-legendaria::before { animation: llama-aura 2.4s ease-in-out infinite; } .in3-llama.e-legendaria::after { animation: llama-aura-gira 5s linear infinite; } .in3-llama.e-intensa .brasas i:nth-child(-n+4) { animation: llama-brasa 1.6s ease-out var(--dl) infinite; } .in3-llama.e-legendaria .brasas i:nth-child(-n+6) { animation: llama-brasa 1.25s ease-out var(--dl) infinite; } .g-item.racha .llama-img.e-chispa { animation: llama-titila 4s ease-in-out infinite; } .g-item.racha .llama-img.e-viva { animation: llama-vaiven-1 3.6s ease-in-out infinite; } .g-item.racha .llama-img.e-fuerte { animation: llama-vaiven-2 2.6s ease-in-out infinite; } .g-item.racha .llama-img.e-intensa { animation: llama-vaiven-3 1.8s ease-in-out infinite; } .g-item.racha .llama-img.e-legendaria { animation: llama-vaiven-4 1.5s ease-in-out infinite; } /* Al tocarla (clase .aviva en el botón; el estallido dura menos de 1 s): la chispa se aviva poco; la legendaria estalla. La llama salta con scale/translate (su vaivén usa transform); el resplandor crece con scale (su latido usa transform y opacity). */ .in3-llama.e-apagada.aviva .llama-img { animation: llama-aviva-0 .45s ease-out; } .in3-llama.e-apagada.aviva::before { animation: llama-intento .6s ease-out; } .in3-llama.e-chispa.aviva .llama-img { animation: llama-titila 3.6s ease-in-out infinite, llama-aviva-1 .6s cubic-bezier(.3, 1.6, .5, 1); } .in3-llama.e-viva.aviva .llama-img { animation: llama-vaiven-1 3.4s ease-in-out infinite, llama-aviva-2 .7s cubic-bezier(.3, 1.6, .5, 1); } .in3-llama.e-fuerte.aviva .llama-img { animation: llama-vaiven-2 2.2s ease-in-out infinite, llama-aviva-3 .75s cubic-bezier(.3, 1.6, .5, 1); } .in3-llama.e-intensa.aviva .llama-img { animation: llama-vaiven-3 1.3s ease-in-out infinite, llama-aviva-4 .8s cubic-bezier(.3, 1.5, .5, 1); } .in3-llama.e-legendaria.aviva .llama-img { animation: llama-vaiven-4 1.05s ease-in-out infinite, llama-aviva-5 .9s cubic-bezier(.3, 1.5, .5, 1); } .in3-llama.e-chispa.aviva::before { animation: llama-brillo-titila 3.6s ease-in-out infinite, llama-llamarada .6s ease-out; } .in3-llama.e-viva.aviva::before { animation: llama-destello .7s ease-out; } .in3-llama.e-fuerte.aviva::before { animation: llama-brillo-late 1.6s ease-in-out infinite, llama-llamarada .75s ease-out; } .in3-llama.e-intensa.aviva::before { animation: llama-brillo-fuerte 1.1s ease-in-out infinite, llama-llamarada .8s ease-out; } .in3-llama.e-legendaria.aviva::before { animation: llama-aura 2.4s ease-in-out infinite, llama-llamarada .9s ease-out; } .in3-llama.e-legendaria.aviva::after { animation: llama-aura-gira 5s linear infinite, llama-destello .9s ease-out; } .in3-llama.e-chispa.aviva .brasas i:nth-child(n+9), .in3-llama.e-viva.aviva .brasas i:nth-child(n+8), .in3-llama.e-fuerte.aviva .brasas i:nth-child(n+7) { animation: llama-brasa .8s ease-out var(--db) 1; } .in3-llama.e-intensa.aviva .brasas i:nth-child(n+7), .in3-llama.e-legendaria.aviva .brasas i:nth-child(n+7) { animation: llama-estallido .85s ease-out var(--db) 1; } @keyframes llama-titila { 0%, 100% { transform: none; opacity: 1; } 30% { transform: scale(.99, 1.03); } 55% { transform: scale(1.01, .985); opacity: .9; } 80% { transform: scale(.995, 1.02); } } @keyframes llama-vaiven-1 { 0%, 100% { transform: none; } 25% { transform: skewX(-1.5deg) scaleY(1.015); } 75% { transform: skewX(1.5deg) scaleY(1.015); } } @keyframes llama-vaiven-2 { 0%, 100% { transform: none; } 25% { transform: skewX(-3deg) scale(.985, 1.04); } 50% { transform: skewX(.5deg) scale(1.01, .99); } 75% { transform: skewX(3deg) scale(.985, 1.05); } } @keyframes llama-vaiven-3 { 0%, 100% { transform: none; } 20% { transform: skewX(-4deg) scale(.97, 1.07); } 40% { transform: skewX(2deg) scale(1.02, .97); } 60% { transform: skewX(-2.5deg) scale(.98, 1.05); } 80% { transform: skewX(4deg) scale(.97, 1.08); } } @keyframes llama-vaiven-4 { 0%, 100% { transform: none; } 18% { transform: skewX(-5deg) scale(.96, 1.1); } 40% { transform: skewX(2.5deg) scale(1.03, .96); } 62% { transform: skewX(-3deg) scale(.97, 1.07); } 82% { transform: skewX(5deg) scale(.96, 1.11); } } @keyframes llama-brillo-titila { 0%, 100% { opacity: .42; } 30% { opacity: .58; } 55% { opacity: .32; } } @keyframes llama-brillo-late { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.06); } } @keyframes llama-brillo-fuerte { 0%, 100% { opacity: .7; transform: scale(.95); } 35% { opacity: 1; transform: scale(1.1); } 65% { opacity: .8; transform: scale(1); } } @keyframes llama-aura { 0%, 100% { opacity: .7; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.1); } } @keyframes llama-aura-gira { to { rotate: 1turn; } } @keyframes llama-llamarada { 0%, 100% { scale: 1; } 30% { scale: var(--fl, 1.2); } } @keyframes llama-destello { 30% { opacity: 1; transform: scale(var(--fl, 1.2)); } } @keyframes llama-intento { 35% { opacity: .3; transform: scale(1.05); } } @keyframes llama-brasa { 0% { opacity: 0; transform: translate(var(--x0), 0) scale(1); } 15% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 0; transform: translate(calc(var(--x0) + var(--dx)), calc(var(--sube, 40px) * -1)) scale(.3); } } @keyframes llama-estallido { 0% { opacity: 1; transform: translate(0, 0) scale(1.3); } 100% { opacity: 0; transform: translate(calc(var(--x0) * 3), calc(var(--sube, 40px) * -.9)) scale(.2); } } @keyframes llama-aviva-0 { 0%, 100% { scale: 1; } 40% { scale: .95 1.03; } } @keyframes llama-aviva-1 { 0%, 100% { scale: 1; } 35% { scale: 1.06 1.1; } 70% { scale: .98; } } @keyframes llama-aviva-2 { 0%, 100% { scale: 1; translate: 0 0; } 32% { scale: 1.12 1.18; translate: 0 -3%; } 68% { scale: .97; translate: 0 0; } } @keyframes llama-aviva-3 { 0%, 100% { scale: 1; translate: 0 0; } 30% { scale: 1.18 1.27; translate: 0 -4%; } 66% { scale: .96; translate: 0 0; } } @keyframes llama-aviva-4 { 0%, 100% { scale: 1; translate: 0 0; } 28% { scale: 1.24 1.34; translate: 0 -5%; } 58% { scale: .94; translate: 0 0; } 80% { scale: 1.04; } } @keyframes llama-aviva-5 { 0%, 100% { scale: 1; translate: 0 0; } 24% { scale: 1.3 1.42; translate: 0 -6%; } 50% { scale: .92; translate: 0 0; } 72% { scale: 1.07; } 88% { scale: .98; } } } /* Sin movimiento (prefers-reduced-motion): la llama queda fija (el HTML sirve la imagen quieta) y cada etapa se distingue solo por tamaño, color y resplandor. */ @media (prefers-reduced-motion: reduce) { .in3-llama.e-legendaria::after { opacity: .5; } } /* ---------- B) Fila racha + ranking compacta y equilibrada; escalera de puestos consecutivos ---------- */ /* Fila: dos tarjetas del mismo ancho y con alturas parecidas por contenido */ .in3-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } @media (max-width: 900px) { .in3-fila { grid-template-columns: minmax(0, 1fr); } } .in3-fila > .in3-racha:only-child { grid-column: 1 / -1; } /* programa sin ranking: la racha ocupa toda la fila */ /* Racha: arriba llama + días + semana; abajo el nivel en una franja compacta. Si sobra alto, el bloque de arriba se centra (sin hueco muerto). */ .in3-racha { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "llama info" "nivel nivel"; grid-template-rows: 1fr auto; align-items: center; gap: 14px 16px; padding: 18px 20px; } .in3-racha > .in3-llama { grid-area: llama; } .in3-racha > .grow { grid-area: info; min-width: 0; } .in3-racha-n { line-height: 1.1; } .in3-racha-n b { font-size: 48px; vertical-align: -7px; } .in3-racha-msg { margin: 4px 0 10px; line-height: 1.35; } /* Semana: ocupa el ancho disponible; los círculos se encogen un poco si falta sitio (nunca se salen) */ .in3-semana { justify-content: space-between; gap: 4px; max-width: 360px; } .in3-semana li.dia { flex: 0 1 34px; width: auto; height: 34px; min-width: 0; } @supports (aspect-ratio: 1) { .in3-semana li.dia { height: auto; aspect-ratio: 1; } } /* Nivel compacto: «Nivel N» y lo que falta en una línea; cifras y barra debajo (la barra queda al pie, alineada con la del ranking) */ .in3-racha > .in3-nivel { grid-area: nivel; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cab falta" "xp xp" "barra barra"; align-items: center; gap: 4px 12px; padding: 12px 0 0 !important; border-top: 0; background: linear-gradient(90deg, transparent, rgba(4,0,188,.14) 14%, rgba(4,0,188,.14) 86%, transparent) top / 100% 1px no-repeat; } .in3-nivel-cab { grid-area: cab; gap: 6px; } .in3-nivel-cab svg { width: 22px; height: 22px; } .in3-nivel-cab b { font-size: 26px; } .in3-nivel-falta { grid-area: falta; justify-self: end; text-align: right; line-height: 1.3; } .in3-nivel-xp { grid-area: xp; } .in3-nivel .in3-nivel-xp span { font-size: 11.5px; } .in3-nivel .in3-barra-xp { grid-area: barra; margin-top: 2px; } /* Ranking: más bajo; el puesto grande se apoya en el hueco que deja la escalera (arriba a la derecha) */ .in3-rank2 { gap: 12px; padding: 18px 20px; align-content: space-between; } .rk-ver { white-space: nowrap; flex: none; } .rk-cuerpo { gap: 10px; justify-content: center; } .rk-panda img { width: 96px; height: 96px; } .rk-globo { max-width: 124px; padding: 6px 10px; font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; text-wrap: balance; } .rk-centro { flex: 1; max-width: 440px; display: grid; grid-template-areas: "c"; gap: 0; } .rk-centro > * { grid-area: c; } .rk-puesto { justify-self: end; align-self: start; position: relative; z-index: 1; gap: 5px; } .rk-puesto b { font-size: 42px; } .rk-puesto span { font-size: 12.5px; } .rk-podio { height: 150px; gap: 6px; column-gap: clamp(6px, 2.5%, 12px); } .rk-podio:has(> li:only-child), .rk-podio:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rk-col { gap: 2px; } .rk-col.yo .rk-av { margin-bottom: 3px; } .rk-av { width: 30px; height: 30px; font-size: 11px; } .rk-nom { font-size: 11.5px; line-height: 1.2; } .rk-barra { height: calc(var(--alto) * 1px); min-height: 40px; padding-top: 5px; } .rk-barra b { font-size: 19px; } .rk-barra small { font-size: 10px; white-space: nowrap; } /* Si tú eres el #1: barra azul de «tú» con texto blanco legible (antes quedaba texto blanco sobre amarillo) y anillo azul */ .rk-col.yo.top1 .rk-av { box-shadow: 0 0 0 3px var(--azul); } .rk-col.yo.top1 .rk-barra { background: linear-gradient(180deg, #0012fd, #0400bc); } .rk-col.yo.top1 .rk-barra b, .rk-col.yo.top1 .rk-barra small { color: #fff; } /* Racha en una sola franja (nivel a la derecha): en tableta (columna única ancha) y cuando va sola en la fila */ @media (min-width: 700px) and (max-width: 900px) { .in3-racha { grid-template-columns: auto minmax(0, 1fr) minmax(220px, 260px); grid-template-areas: "llama info nivel"; grid-template-rows: auto; column-gap: 20px; } .in3-racha > .in3-nivel { grid-template-areas: "cab cab" "xp xp" "barra barra" "falta falta"; align-self: center; padding: 0 0 0 20px !important; background: linear-gradient(180deg, transparent, rgba(4,0,188,.14) 18%, rgba(4,0,188,.14) 82%, transparent) left / 1px 100% no-repeat; } .in3-nivel-falta { justify-self: start; text-align: left; } } @media (min-width: 901px) { .in3-racha:only-child { grid-template-columns: auto minmax(0, 1fr) minmax(220px, 280px); grid-template-areas: "llama info nivel"; grid-template-rows: auto; column-gap: 24px; } .in3-racha:only-child > .in3-nivel { grid-template-areas: "cab cab" "xp xp" "barra barra" "falta falta"; align-self: center; padding: 0 0 0 24px !important; background: linear-gradient(180deg, transparent, rgba(4,0,188,.14) 18%, rgba(4,0,188,.14) 82%, transparent) left / 1px 100% no-repeat; } .in3-racha:only-child .in3-nivel-falta { justify-self: start; text-align: left; } } /* Celular: la racha pone la semana a todo el ancho; el ranking sube el panda a una fila y la escalera usa todo el ancho */ @media (max-width: 480px) { .in3-racha { grid-template-areas: "llama dias" "llama msg" "semana semana" "nivel nivel"; grid-template-rows: none; row-gap: 0; column-gap: 14px; padding: 16px 18px; } .in3-racha > .grow { display: contents; } .in3-racha-n { grid-area: dias; align-self: end; } .in3-racha-msg { grid-area: msg; align-self: start; margin: 4px 0 0; } .in3-semana { grid-area: semana; max-width: none; margin-top: 12px; } .in3-racha > .in3-nivel { margin-top: 14px; } .in3-rank2 { padding: 16px 18px; } .rk-cuerpo { flex-direction: column; align-items: stretch; gap: 8px; } .rk-panda { display: flex; align-items: center; gap: 12px; } .rk-panda img { order: -1; width: 64px; height: 64px; } .rk-globo { max-width: none; margin: 0; text-align: left; } .rk-globo::after { left: -5px; top: 50%; bottom: auto; margin: -6px 0 0; border: 6px solid transparent; border-left: 0; border-right-color: var(--azul); } .rk-centro { max-width: none; } } /* ---------- C) Liquid Glass en las tarjetas del Inicio ---------- El vidrio «regular» de Apple (iOS 26) recreado en CSS, versión clara: tinte blanco translúcido + desenfoque y saturación de lo que hay detrás (backdrop-filter) + filo de luz interior + brillo especular en dos esquinas + sombra azul suave. Detrás de la fila racha + ranking van luces de la marca (el brillo de la llama, que cambia con la etapa, y un círculo azul) para que el vidrio se note sin saturar. Respaldo: sin backdrop-filter, en pantallas táctiles, con «reducir transparencia» o «más contraste» queda un vidrio pintado (mismo aspecto, sin costo de GPU). Nada animado detrás del vidrio. */ @property --vidrio-luz { syntax: ''; inherits: false; initial-value: 135deg; } /* 1. Material. Estos valores casi opacos son también el respaldo para navegadores sin backdrop-filter */ .in3-racha, .in3-rank2, .in3-quiz, .in3-ev { position: relative; } .in3-racha, .in3-rank2, .in3-ev:not(.ticket) { background: radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%), linear-gradient(155deg, rgba(255,255,255,.97) 0%, rgba(249,250,255,.94) 50%, rgba(238,241,255,.92) 100%); } .in3-quiz { background: radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%), linear-gradient(110deg, rgba(255,255,255,.97) 0%, rgba(244,246,255,.94) 55%, rgba(226,231,255,.92) 100%); } /* Filo de luz interior (arriba e izquierda), borde que concentra la luz, grosor abajo y sombra azul suave */ .in3-racha, .in3-rank2, .in3-quiz, .in3-ev { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.4), inset 0 0 18px rgba(255,255,255,.4), inset 0 -16px 26px -22px rgba(4,0,188,.18), 0 1px 2px rgba(4,0,188,.06), 0 22px 44px -32px rgba(4,0,188,.42); } .in3-rank2:hover { box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.45), inset 0 0 18px rgba(255,255,255,.5), inset 0 -16px 26px -22px rgba(4,0,188,.2), 0 1px 2px rgba(4,0,188,.06), 0 28px 54px -34px rgba(4,0,188,.55); } /* Brillo especular: el filo se enciende en la esquina superior izquierda y en la inferior derecha */ .in3-racha::after, .in3-rank2::after, .in3-quiz::after, .in3-ev:not(.ticket)::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(var(--vidrio-luz, 135deg), #fff 0%, rgba(255,255,255,.55) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.4) 86%, rgba(255,255,255,.95) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* Misión: su degradado y su borde vivo no cambian; solo se suma el filo de vidrio por dentro */ .in3-mision::after { content: ""; position: absolute; inset: 2px; z-index: 3; border-radius: 26px; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 18%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.35) 82%, rgba(255,255,255,.9) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* 2. Vidrio translúcido donde hay backdrop-filter; desenfoque real solo en la fila (es donde hay luces detrás) */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .in3-racha, .in3-rank2, .in3-ev:not(.ticket) { background: radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), linear-gradient(155deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.44) 50%, rgba(255,255,255,.32) 100%); } .in3-quiz { background: radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), linear-gradient(110deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 55%, rgba(214,221,255,.5) 100%); } .in3-racha, .in3-rank2 { -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.03); backdrop-filter: blur(14px) saturate(180%) brightness(1.03); } } /* 3. Lo que se ve a través del vidrio: brillo de la llama (según la etapa), círculo azul y luz índigo */ .in3-fila { position: relative; isolation: isolate; --luz-llama: rgba(255,150,0,.36); } .in3-fila:has(.in3-llama.e-apagada) { --luz-llama: rgba(255,150,0,0); } .in3-fila:has(.in3-llama.e-chispa) { --luz-llama: rgba(255,190,0,.22); } .in3-fila:has(.in3-llama.e-intensa) { --luz-llama: rgba(255,80,20,.38); } .in3-fila:has(.in3-llama.e-legendaria) { --luz-llama: rgba(0,18,253,.34); } .in3-fila::before { content: ""; position: absolute; inset: -16px -10px; z-index: -1; pointer-events: none; background: radial-gradient(150px 150px at 80px 104px, var(--luz-llama), rgba(255,255,255,0) 70%), radial-gradient(circle 180px at 50% 50%, rgba(0,18,253,.46) 0%, rgba(0,18,253,.36) 45%, rgba(0,18,253,.11) 78%, rgba(0,18,253,0) 100%), radial-gradient(260px 180px at 100% 100%, rgba(4,0,188,.28), rgba(4,0,188,0) 70%); /* El círculo azul se funde (sin borde nítido entre las tarjetas) y las luces solo se ven a través del vidrio: se apagan en el margen exterior de la fila, así no queda ningún corte recto ni halo fuera de las tarjetas */ -webkit-mask: linear-gradient(90deg, transparent 10px, #000 34px, #000 calc(100% - 34px), transparent calc(100% - 10px)), linear-gradient(transparent 16px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 16px)); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 10px, #000 34px, #000 calc(100% - 34px), transparent calc(100% - 10px)), linear-gradient(transparent 16px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 16px)); mask-composite: intersect; } /* Una columna, o pantalla táctil (sin desenfoque): luces suaves ancladas a las esquinas, sin bordes nítidos */ @media (max-width: 900px), (hover: none), (pointer: coarse) { .in3-fila::before { background: radial-gradient(150px 150px at 80px 90px, var(--luz-llama), rgba(255,255,255,0) 70%), radial-gradient(240px 170px at 100% 0%, rgba(0,18,253,.26), rgba(0,18,253,0) 70%), radial-gradient(260px 180px at 100% 100%, rgba(4,0,188,.28), rgba(4,0,188,0) 70%); } } /* Programa sin ranking (la racha va sola en la fila): las mismas luces suaves de las esquinas, sin el círculo del centro */ .in3-fila:not(:has(.in3-rank2))::before { background: radial-gradient(150px 150px at 80px 90px, var(--luz-llama), rgba(255,255,255,0) 70%), radial-gradient(300px 170px at 100% 0%, rgba(0,18,253,.24), rgba(0,18,253,0) 70%), radial-gradient(300px 180px at 100% 100%, rgba(4,0,188,.24), rgba(4,0,188,0) 70%); } /* 4. Entrada: la fila ya no se desvanece entera (una opacidad animada en el contenedor deja sin vidrio a sus tarjetas en Chrome, incluso al terminar); se animan las tarjetas y las luces, con el mismo efecto. «backwards»: al terminar no queda ninguna animación aplicada sobre las tarjetas. */ @media (prefers-reduced-motion: no-preference) { .in3.entra > .in3-fila { animation: none; } .in3.entra > .in3-fila > * { animation: subir .6s cubic-bezier(.2,.8,.2,1) .12s backwards; } .in3.entra > .in3-fila::before { animation: luces .8s ease .5s backwards; } /* las luces llegan cuando el vidrio ya está formado */ @keyframes luces { from { opacity: 0; } } .in3.entra > .in3-fila > :nth-child(2) { animation-delay: .17s; } /* Vidrio «líquido»: el ranking cede un poco al tocarlo y su filo de luz gira al pasar el ratón */ .in3-rank2 { transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; } .in3-rank2::after { transition: --vidrio-luz .7s ease; } .in3-rank2:active { transform: scale(.99); } } .in3-rank2:hover::after { --vidrio-luz: 165deg; } /* 5. Celulares y tabletas táctiles: vidrio pintado (las luces de detrás ya son suaves, se ve igual y no gasta GPU) */ @media (hover: none), (pointer: coarse) { .in3-racha, .in3-rank2 { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* 6. Accesibilidad: sin transparencia cuando la persona la reduce o pide más contraste */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket) { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); -webkit-backdrop-filter: none; backdrop-filter: none; } .in3-fila::before { display: none; } } .sala-link { color: #ffe400; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .lg-nivel-cab { margin-bottom: 18px; } /* ===================== [CERT] Inicio v5 (08-10-2026): sin punto azul, vidrio en todas las tarjetas, barra de arriba limpia, personajes de racha ===================== */ /* 1. Fuera el «punto azul» y las luces de detrás de la fila */ .in3-fila::before, .in3-fila::after { display: none !important; content: none !important; } /* 2. Liquid glass en TODAS las tarjetas del Inicio (racha, ranking, pregunta del día, eventos, avisos) */ .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { background: linear-gradient(150deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.48) 55%, rgba(255,255,255,.36) 100%) !important; border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 22px rgba(255,255,255,.35), 0 1px 2px rgba(4,0,188,.05), 0 24px 48px -34px rgba(4,0,188,.45) !important; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); } } /* el ticket de la clase en vivo conserva su borde animado, con fondo de vidrio */ .in3-ev.ticket { background: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.62)) padding-box, conic-gradient(from var(--giro), #ffe400, #0012fd, #0400bc, #ffe400) border-box !important; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .in3-ev.ticket { -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); } } /* las opciones de la pregunta del día también de vidrio */ .in3-op { background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -18px rgba(4,0,188,.5); } .in3-op:hover:not(:disabled) { background: rgba(255,255,255,.9); } /* 3. Barra de arriba: vidrio blanco limpio (antes azul turbio) */ .topbar { background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6)) !important; border-bottom: 1px solid rgba(255,255,255,.9) !important; box-shadow: 0 1px 0 rgba(4,0,188,.06), 0 10px 30px -24px rgba(4,0,188,.4); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .topbar { -webkit-backdrop-filter: blur(20px) saturate(180%) !important; backdrop-filter: blur(20px) saturate(180%) !important; } } .topbar .search { background: rgba(255,255,255,.7); } /* 4. Personajes de la racha: cada uno con su tamaño, su brillo y su gesto (sin filtros que los aplanen) */ .llama-img.e-legendaria, .in3-llama.e-legendaria .llama-img { filter: none; } .in3-llama .llama-img { filter: drop-shadow(0 8px 14px rgba(0,0,0,.12)); } .in3-llama.e-apagada .llama-img { width: 56px !important; height: 56px !important; filter: grayscale(.35) drop-shadow(0 6px 10px rgba(0,0,0,.12)) !important; opacity: .9; } .in3-llama.e-chispa .llama-img { width: 60px !important; height: 60px !important; filter: drop-shadow(0 0 10px rgba(255,214,0,.55)) !important; } .in3-llama.e-viva .llama-img { width: 74px !important; height: 74px !important; filter: drop-shadow(0 0 12px rgba(255,140,20,.45)) !important; } .in3-llama.e-fuerte .llama-img { width: 82px !important; height: 82px !important; filter: drop-shadow(0 0 14px rgba(255,60,80,.45)) !important; } .in3-llama.e-intensa .llama-img { width: 90px !important; height: 90px !important; filter: drop-shadow(0 0 16px rgba(255,90,20,.55)) !important; } .in3-llama.e-legendaria .llama-img { width: 98px !important; height: 98px !important; filter: drop-shadow(0 0 18px rgba(0,18,253,.45)) !important; } .in3-llama.e-apagada .llama-nom { color: #6b5a4a; } .in3-llama.e-chispa .llama-nom { color: #b08a00; } .in3-llama.e-fuerte .llama-nom { color: #d6304c; } .in3-llama.e-intensa .llama-nom { color: #c2410c; } .in3-llama.e-legendaria .llama-nom { color: var(--azul); } /* los adornos anteriores (aura, brasas, brillo) se apagan: el personaje ya tiene su propia animación */ .in3-llama::before, .in3-llama::after, .in3-llama .brasas, .in3-llama .chispas { display: none !important; } .g-item.racha .llama-img { width: 22px; height: 22px; filter: none !important; } .in3-ev.ticket { background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.9)) padding-box, conic-gradient(from var(--giro), #ffe400, #0012fd, #0400bc, #ffe400) border-box !important; } .in3-llama.e-legendaria .llama-img { filter: hue-rotate(105deg) saturate(1.35) drop-shadow(0 0 18px rgba(0,18,253,.5)) !important; } .g-item.racha .llama-img.e-legendaria { filter: hue-rotate(105deg) saturate(1.35) !important; } .in3-llama.e-legendaria .llama-img { filter: drop-shadow(0 0 16px rgba(0,180,90,.35)) !important; width: 92px !important; height: 92px !important; } .g-item.racha .llama-img.e-legendaria { filter: none !important; } .in3-llama { overflow: visible; } .in3-llama.e-legendaria .llama-img { filter: none !important; } .in3-llama.e-legendaria::before { display: block !important; content: "" !important; opacity: .35; } /* ===================== [CERT] Inicio v6 (08-10-2026): misma llama por intensidad, vidrio que se nota, barra sólida, calendario como estaba ===================== */ /* 1. Llama: el mismo fuego; la intensidad sube con tamaño, velocidad (animaciones llama-vaiven-1..4 ya existentes) y cantidad. Sin halos detrás. */ .in3-llama::before, .in3-llama::after { display: none !important; content: none !important; } .in3-llama .llama-img { filter: none !important; opacity: 1 !important; } .in3-llama.e-apagada .llama-img { width: 44px !important; height: 44px !important; filter: grayscale(1) !important; opacity: .45 !important; } .in3-llama.e-chispa .llama-img { width: 46px !important; height: 46px !important; } .in3-llama.e-viva .llama-img { width: 62px !important; height: 62px !important; } .in3-llama.e-fuerte .llama-img { width: 74px !important; height: 74px !important; } .in3-llama.e-intensa .llama-img { width: 80px !important; height: 80px !important; } .in3-llama.e-legendaria .llama-img { width: 86px !important; height: 86px !important; filter: hue-rotate(200deg) saturate(1.5) !important; } /* llamas acompañantes (intensa: 1; legendaria: 2), más chicas y a los lados, cada una con su propio ritmo */ .llamas-grupo { position: relative; display: block; } .llamas-grupo .llama-extra-p, .llamas-grupo > .llama-extra { position: absolute; bottom: 2px; z-index: -1; } .llamas-grupo .x1 { left: -16px; } .llamas-grupo .x2 { right: -16px; } .in3-llama.e-intensa .llama-extra, .in3-llama.e-legendaria .llama-extra { width: 46px !important; height: 46px !important; } @media (prefers-reduced-motion: no-preference) { .in3-llama .llama-extra.x1 { animation: llama-vaiven-3 1.6s ease-in-out -.4s infinite !important; } .in3-llama .llama-extra.x2 { animation: llama-vaiven-3 1.4s ease-in-out -.9s infinite !important; } } /* brasas solo en las etapas altas (partículas pequeñas, no un fondo) */ .in3-llama .brasas { display: block !important; } .in3-llama.e-apagada .brasas, .in3-llama.e-chispa .brasas, .in3-llama.e-viva .brasas, .in3-llama.e-fuerte .brasas { display: none !important; } /* barra de arriba: misma lógica, sin brillos */ .g-item.racha .llama-img { filter: none !important; } .g-item.racha .llama-img.e-apagada { filter: grayscale(1) !important; opacity: .5; } .g-item.racha .llama-img.e-legendaria { filter: hue-rotate(200deg) saturate(1.5) !important; } /* 2. Barra de arriba sólida (sin transparencia) */ .topbar { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid rgba(4,0,188,.08) !important; box-shadow: 0 6px 18px -16px rgba(4,0,188,.45) !important; } .topbar .search { background: #f4f5fb; } /* 3. Calendario: el ticket de la clase en vivo vuelve a su fondo blanco con el borde animado (sin efecto «radar») */ .in3-ev.ticket { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--giro), #ffe400, #0012fd, #0400bc, #ffe400) border-box !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 4. Fondo con formas grandes y suaves de la marca, para que el vidrio tenga algo que desenfocar (sin puntos) */ body::before { display: block !important; content: "" !important; position: fixed; inset: -10%; z-index: -2; pointer-events: none; opacity: 1; filter: blur(40px); background: radial-gradient(42% 38% at 88% 22%, rgba(0,18,253,.30), rgba(0,18,253,0) 72%), radial-gradient(38% 42% at 6% 58%, rgba(4,0,188,.20), rgba(4,0,188,0) 72%), radial-gradient(34% 30% at 62% 96%, rgba(255,228,0,.22), rgba(255,228,0,0) 72%), radial-gradient(30% 26% at 40% 30%, rgba(61,75,255,.14), rgba(61,75,255,0) 72%); } @media (prefers-reduced-motion: no-preference) { body::before { animation: fondo-respira 28s ease-in-out infinite alternate !important; } @keyframes fondo-respira { to { transform: translate(2%, -2%) scale(1.04); } } } /* 5. Liquid glass que se nota: más translúcido, desenfoque y saturación fuertes, filo de luz brillante */ .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { background: linear-gradient(145deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.30) 60%, rgba(255,255,255,.22) 100%) !important; border: 1px solid rgba(255,255,255,.65) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 30px rgba(255,255,255,.28), 0 2px 6px rgba(4,0,188,.05), 0 26px 50px -30px rgba(4,0,188,.5) !important; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.04) !important; backdrop-filter: blur(24px) saturate(200%) brightness(1.04) !important; } } .in3-aviso { position: relative; } .in3-aviso::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.4) 18%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 64%, rgba(255,255,255,.45) 86%, #fff 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .in3-op { background: rgba(255,255,255,.6) !important; } /* ===================== [CERT] Inicio v7 (08-10-2026): vidrio arriba mejorado, sin amarillo, fondo para que se note la transparencia, menú sin aplastarse ===================== */ /* 1. Sin amarillo: fuera la luz amarilla de la esquina del ranking (y del fondo, abajo) */ .in3-rank2::before { display: none !important; content: none !important; } /* 2. Fondo: azul claro arriba → blanco abajo, con formas grandes y suaves solo en azules de marca, fijas detrás de las tarjetas, y una franja de luz diagonal. El vidrio las desenfoca y así se nota la transparencia (sin puntos ni manchas marcadas). */ body { background: linear-gradient(180deg, #e2e6ff 0px, #ecefff 320px, #f5f6ff 720px, #ffffff 1100px) no-repeat, #ffffff !important; } body::before { display: block !important; content: "" !important; position: fixed !important; inset: -8% !important; z-index: -2 !important; pointer-events: none; opacity: 1 !important; filter: blur(26px) !important; transform: none; background: radial-gradient(36% 32% at 88% 12%, rgba(0,18,253,.52), rgba(0,18,253,.20) 52%, rgba(0,18,253,0) 76%), radial-gradient(30% 36% at 2% 60%, rgba(4,0,188,.46), rgba(4,0,188,.14) 54%, rgba(4,0,188,0) 76%), radial-gradient(32% 30% at 98% 72%, rgba(61,75,255,.44), rgba(61,75,255,.12) 54%, rgba(61,75,255,0) 76%), radial-gradient(42% 26% at 46% 102%, rgba(0,18,253,.32), rgba(0,18,253,0) 74%), linear-gradient(118deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.7) 47%, rgba(255,255,255,0) 60%) !important; } /* 3. Vidrio de las tarjetas: más translúcido para que el fondo se vea a través */ .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { background: linear-gradient(145deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.28) 60%, rgba(255,255,255,.18) 100%) !important; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { -webkit-backdrop-filter: blur(22px) saturate(210%) brightness(1.05) !important; backdrop-filter: blur(22px) saturate(210%) brightness(1.05) !important; } } /* 4. Barra de arriba con liquid glass mejorado, y el menú izquierdo con el mismo vidrio para que no choquen en la esquina */ .topbar { background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.44) 100%) !important; border-bottom: 1px solid rgba(255,255,255,.75) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,0,188,.07), 0 10px 28px -20px rgba(4,0,188,.45) !important; } .topbar .search { background: rgba(255,255,255,.62) !important; border-color: rgba(255,255,255,.85) !important; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .topbar { -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.04) !important; backdrop-filter: blur(24px) saturate(200%) brightness(1.04) !important; } } @media (min-width: 901px) { .sidebar { background: linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.50) 100%) !important; border-right: 1px solid rgba(255,255,255,.75) !important; box-shadow: inset -1px 0 0 rgba(4,0,188,.07), 12px 0 30px -26px rgba(4,0,188,.4) !important; /* 5. Menú: nada se aplasta; si no cabe en pantallas bajas, se desliza (sin barra visible) */ overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } .sidebar > *, .sidebar .nav-group > *, .sidebar .side-products > * { flex-shrink: 0; } .brand { min-height: 48px; } /* el nombre ahora sale en un globo flotante (app.js), por encima de la barra de arriba */ [data-tip]::after { display: none !important; } /* el texto del menú queda oculto a la vista pero lo siguen leyendo los lectores de pantalla */ .sidebar .nav-txt { display: inline !important; position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { @media (min-width: 901px) { .sidebar { -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.04); backdrop-filter: blur(24px) saturate(200%) brightness(1.04); } } } .tip-flotante { position: fixed; z-index: 300; left: 0; top: 0; transform: translate(-4px, -50%); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; background: var(--azul); color: #fff; font: 600 13px var(--font); white-space: nowrap; padding: 7px 12px; border-radius: 9px; box-shadow: 0 10px 24px -10px rgba(4,0,188,.6); } .tip-flotante.ver { opacity: 1; transform: translate(0, -50%); } body::before { background: radial-gradient(36% 32% at 88% 12%, rgba(0,18,253,.52), rgba(0,18,253,.20) 52%, rgba(0,18,253,0) 76%), radial-gradient(26% 30% at 20% 74%, rgba(4,0,188,.40), rgba(4,0,188,.12) 54%, rgba(4,0,188,0) 76%), radial-gradient(28% 30% at 92% 72%, rgba(61,75,255,.46), rgba(61,75,255,.12) 54%, rgba(61,75,255,0) 76%), radial-gradient(42% 26% at 46% 104%, rgba(0,18,253,.34), rgba(0,18,253,0) 74%), linear-gradient(118deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.7) 47%, rgba(255,255,255,0) 60%) !important; } .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { background: linear-gradient(145deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.20) 60%, rgba(255,255,255,.12) 100%) !important; } /* ===================== [CERT] Fondos para comparar (Panel de pruebas → Fondo) ===================== */ .pruebas-atajos button.on { background: var(--azul); color: #fff; } /* Azul limpio: azul puro (sin tono lila) y más claro */ body[data-fondo="limpio"] { background: linear-gradient(180deg, #e6eeff 0px, #eff4ff 340px, #f7faff 740px, #ffffff 1100px) no-repeat, #ffffff !important; } body[data-fondo="limpio"]::before { background: radial-gradient(36% 32% at 88% 12%, rgba(37,99,255,.42), rgba(37,99,255,.15) 52%, rgba(37,99,255,0) 76%), radial-gradient(26% 30% at 20% 74%, rgba(29,85,240,.30), rgba(29,85,240,.09) 54%, rgba(29,85,240,0) 76%), radial-gradient(28% 30% at 92% 72%, rgba(56,124,255,.34), rgba(56,124,255,.09) 54%, rgba(56,124,255,0) 76%), radial-gradient(42% 26% at 46% 104%, rgba(37,99,255,.24), rgba(37,99,255,0) 74%), linear-gradient(118deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.7) 47%, rgba(255,255,255,0) 60%) !important; } /* Casi blanco: blanco con apenas un toque azul en las esquinas */ body[data-fondo="blanco"] { background: #fbfcff !important; } body[data-fondo="blanco"]::before { background: radial-gradient(40% 34% at 94% 4%, rgba(37,99,255,.18), rgba(37,99,255,0) 74%), radial-gradient(34% 34% at 0% 92%, rgba(37,99,255,.13), rgba(37,99,255,0) 74%) !important; } /* Diagonal: degradado suave de blanco (arriba a la izquierda) a celeste (abajo a la derecha), sin formas */ body[data-fondo="diagonal"] { background: #ffffff !important; } body[data-fondo="diagonal"]::before { filter: none !important; background: linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 62%), linear-gradient(135deg, #ffffff 0%, #f2f6ff 38%, #e1eaff 72%, #cfdcff 100%) !important; } /* ===================== [CERT] v8 (08-10-2026): tarjeta principal con letras de portada nítidas (sin velo) y sin reborde ===================== */ .in3-mision::before, .in3-mision::after { display: none !important; content: none !important; animation: none !important; } .in3-mision { border: 0 !important; box-shadow: 0 24px 50px -36px rgba(4,0,188,.45) !important; } /* el blanco solo detrás del texto de la izquierda; la portada de la derecha se ve tal cual, sin tinte */ .in3-mision-img::after { background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.97) 30%, rgba(255,255,255,.82) 44%, rgba(255,255,255,.35) 54%, rgba(255,255,255,0) 64%) !important; } @media (max-width: 640px) { .in3-mision-img::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,.85) 80%, #ffffff 100%) !important; } } /* ===================== [CERT] v9 (08-10-2026): racha de 12 meses — la misma llama crece en 11 escalones, sin nombre, sin halos ===================== */ .llama-nom { display: none !important; } /* Llama principal: crece con cada escalón */ .in3-llama.e-viva .llama-img:not(.llama-extra) { width: 58px !important; height: 58px !important; } .in3-llama.e-semana .llama-img:not(.llama-extra) { width: 66px !important; height: 66px !important; } .in3-llama.e-quincena .llama-img:not(.llama-extra) { width: 72px !important; height: 72px !important; } .in3-llama.e-mes .llama-img:not(.llama-extra) { width: 76px !important; height: 76px !important; } .in3-llama.e-bimestre .llama-img:not(.llama-extra) { width: 80px !important; height: 80px !important; } .in3-llama.e-trimestre .llama-img:not(.llama-extra) { width: 82px !important; height: 82px !important; } .in3-llama.e-semestre .llama-img:not(.llama-extra) { width: 84px !important; height: 84px !important; } .in3-llama.e-nueve .llama-img:not(.llama-extra) { width: 86px !important; height: 86px !important; } .in3-llama.e-anio .llama-img:not(.llama-extra) { width: 88px !important; height: 88px !important; } /* Llamas acompañantes: 1 (2 semanas), 2 (desde 1 mes) y la corona de 4 al cumplir el año */ .llamas-grupo .llama-extra-p, .llamas-grupo > .llama-extra { position: absolute; bottom: 2px; z-index: -1; } .llamas-grupo .x1 { left: -18px; } .llamas-grupo .x2 { right: -18px; left: auto; } .llamas-grupo .x3 { left: -38px; bottom: -2px; } .llamas-grupo .x4 { right: -38px; left: auto; bottom: -2px; } .in3-llama .llama-extra { width: 44px !important; height: 44px !important; } .in3-llama.e-semestre .llama-extra, .in3-llama.e-nueve .llama-extra, .in3-llama.e-anio .llama-extra { width: 48px !important; height: 48px !important; } .in3-llama.e-anio .llama-extra.x3, .in3-llama.e-anio .llama-extra.x4 { width: 34px !important; height: 34px !important; } .in3-llama.e-anio { width: 132px !important; } /* Color: naranja → rojo (2 meses) → azul (3 meses) → añil (6 meses) → azul blanco incandescente (9 meses y 1 año) */ .in3-llama.e-bimestre .llama-img { filter: saturate(1.45) hue-rotate(-14deg) !important; } .in3-llama.e-trimestre .llama-img { filter: hue-rotate(200deg) saturate(1.4) !important; } .in3-llama.e-semestre .llama-img { filter: hue-rotate(225deg) saturate(1.7) brightness(.95) !important; } .in3-llama.e-nueve .llama-img, .in3-llama.e-anio .llama-img { filter: hue-rotate(198deg) saturate(1.2) brightness(1.32) !important; } .g-item.racha .llama-img.e-bimestre { filter: saturate(1.45) hue-rotate(-14deg) !important; } .g-item.racha .llama-img.e-trimestre { filter: hue-rotate(200deg) saturate(1.4) !important; } .g-item.racha .llama-img.e-semestre { filter: hue-rotate(225deg) saturate(1.7) brightness(.95) !important; } .g-item.racha .llama-img.e-nueve, .g-item.racha .llama-img.e-anio { filter: hue-rotate(198deg) saturate(1.2) brightness(1.32) !important; } /* Brasas pequeñas solo en los 3 escalones más altos, en azul */ .in3-llama .brasas { display: none !important; } .in3-llama.e-semestre .brasas, .in3-llama.e-nueve .brasas, .in3-llama.e-anio .brasas { display: block !important; } .in3-llama.e-semestre .brasas i, .in3-llama.e-nueve .brasas i, .in3-llama.e-anio .brasas i { background: radial-gradient(circle, #ffffff 0 35%, #8ea0ff 75%) !important; box-shadow: 0 0 6px 1px rgba(0,18,253,.5) !important; } /* Velocidad: más días, más rápido baila (y cada acompañante con su propio ritmo) */ @media (prefers-reduced-motion: no-preference) { .in3-llama.e-chispa .llama-img { animation: llama-titila 3.6s ease-in-out infinite !important; } .in3-llama.e-viva .llama-img:not(.llama-extra) { animation: llama-vaiven-1 3.4s ease-in-out infinite !important; } .in3-llama.e-semana .llama-img:not(.llama-extra) { animation: llama-vaiven-2 2.4s ease-in-out infinite !important; } .in3-llama.e-quincena .llama-img:not(.llama-extra) { animation: llama-vaiven-2 2s ease-in-out infinite !important; } .in3-llama.e-mes .llama-img:not(.llama-extra) { animation: llama-vaiven-3 1.6s ease-in-out infinite !important; } .in3-llama.e-bimestre .llama-img:not(.llama-extra) { animation: llama-vaiven-3 1.35s ease-in-out infinite !important; } .in3-llama.e-trimestre .llama-img:not(.llama-extra) { animation: llama-vaiven-3 1.2s ease-in-out infinite !important; } .in3-llama.e-semestre .llama-img:not(.llama-extra) { animation: llama-vaiven-4 1.1s ease-in-out infinite !important; } .in3-llama.e-nueve .llama-img:not(.llama-extra) { animation: llama-vaiven-4 1s ease-in-out infinite !important; } .in3-llama.e-anio .llama-img:not(.llama-extra) { animation: llama-vaiven-4 .9s ease-in-out infinite !important; } .in3-llama .llama-extra.x1 { animation: llama-vaiven-3 1.6s ease-in-out -.4s infinite !important; } .in3-llama .llama-extra.x2 { animation: llama-vaiven-3 1.45s ease-in-out -.9s infinite !important; } .in3-llama .llama-extra.x3 { animation: llama-vaiven-2 1.9s ease-in-out -.2s infinite !important; } .in3-llama .llama-extra.x4 { animation: llama-vaiven-2 1.7s ease-in-out -1.1s infinite !important; } .in3-llama.e-semestre .brasas i:nth-child(-n+4) { animation: llama-brasa 1.6s ease-out var(--dl) infinite !important; } .in3-llama.e-nueve .brasas i:nth-child(-n+6) { animation: llama-brasa 1.4s ease-out var(--dl) infinite !important; } .in3-llama.e-anio .brasas i:nth-child(-n+8) { animation: llama-brasa 1.2s ease-out var(--dl) infinite !important; } .g-item.racha .llama-img.e-semana, .g-item.racha .llama-img.e-quincena { animation: llama-vaiven-2 2.6s ease-in-out infinite; } .g-item.racha .llama-img.e-mes, .g-item.racha .llama-img.e-bimestre { animation: llama-vaiven-3 1.8s ease-in-out infinite; } .g-item.racha .llama-img.e-trimestre, .g-item.racha .llama-img.e-semestre, .g-item.racha .llama-img.e-nueve, .g-item.racha .llama-img.e-anio { animation: llama-vaiven-4 1.5s ease-in-out infinite; } /* al tocarla: se aviva todo el grupo (sin cortar el baile de cada llama) */ .in3-llama.aviva > picture, .in3-llama.aviva > img, .in3-llama.aviva > .llamas-grupo { animation: llama-aviva-3 .75s cubic-bezier(.3, 1.6, .5, 1); } } /* [CERT] v9b: crecimiento diario — el tamaño (--t) y la velocidad (--vel) salen de los días exactos de racha */ .in3-llama[style*="--t"] .llama-img:not(.llama-extra) { width: var(--t) !important; height: var(--t) !important; animation-duration: var(--vel) !important; } /* [CERT] Pregunta del día mejorada (09-oct): premio a la vista, opciones claras, la correcta marcada al responder, moneda que vuela al contador y cuenta atrás. Sin confeti. */ .pd-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .pd-tit { flex: 1; min-width: 0; } .pd-tit h2 { margin: 0; font-size: 17px; } .pd-tit p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); } .pd-premio { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(4,0,188,.07); color: var(--azul); font-weight: 800; font-size: 15px; transition: background-color .25s, color .25s; } .pd-premio svg { width: 24px; height: 24px; } .pd-premio small { font-size: 11px; font-weight: 700; color: var(--azul-brillante, #0012fd); } .pd-premio.ganado { background: #e8f6ef; color: #0d5e44; } .pd-premio.perdido { opacity: .45; } .pd-q { margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--negro, #11111a); text-wrap: pretty; } .pd-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pd-op { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid rgba(4,0,188,.12); background: rgba(255,255,255,.88); text-align: left; font: 600 15px/1.35 var(--font, Poppins, sans-serif); color: var(--negro, #11111a); cursor: pointer; box-shadow: 0 10px 24px -20px rgba(4,0,188,.6); transition: border-color .15s, background-color .2s, transform .15s, box-shadow .15s, opacity .25s; } .pd-op:hover:not(:disabled) { border-color: #0012fd; transform: translateY(-1px); box-shadow: 0 14px 28px -18px rgba(0,18,253,.55); } .pd-op:focus-visible { outline: 3px solid rgba(0,18,253,.35); outline-offset: 2px; } .pd-op:disabled { cursor: default; } .pd-l { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--azul); background: rgba(4,0,188,.08); } .pd-t { flex: 1; min-width: 0; } .pd-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; color: #fff; } .pd-op.ok { border-color: #12805c; background: #e8f6ef; } .pd-op.ok .pd-l, .pd-op.ok .pd-ic { background: #12805c; color: #fff; } .pd-op.mal { border-color: #c2272d; background: #fdecec; } .pd-op.mal .pd-l, .pd-op.mal .pd-ic { background: #c2272d; color: #fff; } .pd-op.ok .pd-ic, .pd-op.mal .pd-ic { display: grid; } .pd-op.apagada { opacity: .45; } .pd-res { margin-top: 14px; display: grid; gap: 12px; } .pd-res:empty { display: none; } .in3-quiz.hecho .pd-res { margin-top: 0; } .pd-msg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; background: rgba(4,0,188,.06); color: var(--negro, #11111a); } .pd-msg.ok { background: #e8f6ef; color: #0d5e44; } .pd-msg.mal { background: #fdecec; color: #8f1d22; } .pd-msg-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; } .pd-msg.ok .pd-msg-ic { background: #12805c; } .pd-msg.mal .pd-msg-ic { background: #c2272d; } .pd-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; } .pd-cuenta { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--text-2); } .pd-cuenta b { font: 400 24px/1 'Bebas Neue', var(--font, sans-serif); letter-spacing: .05em; color: var(--azul); font-variant-numeric: tabular-nums; } .pd-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pd-vuela { position: fixed; z-index: 9999; width: 28px; height: 28px; pointer-events: none; } .pd-vuela svg { width: 28px; height: 28px; display: block; filter: drop-shadow(0 6px 10px rgba(160,120,0,.35)); } @media (prefers-reduced-motion: no-preference) { .pd-op.ok { animation: pd-bien .45s cubic-bezier(.3, 1.6, .5, 1); } .pd-op.mal { animation: pd-mal .4s ease; } .pd-res .pd-msg { animation: pd-aparece .3s ease-out; } #gami .g-item.coin.pd-pop { animation: pd-pop .5s cubic-bezier(.3, 1.6, .5, 1); } } @keyframes pd-bien { 40% { transform: scale(1.03); } } @keyframes pd-mal { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @keyframes pd-aparece { from { opacity: 0; transform: translateY(6px); } } @keyframes pd-pop { 40% { transform: scale(1.3); } } @media (max-width: 640px) { .pd-ops:not(.vf) { grid-template-columns: 1fr; } .pd-q { font-size: 16.5px; } .pd-cab { gap: 10px; } } /* [CERT] Pregunta del día v2 (09-oct): vidrio en opciones y mensajes, título de marca, racha de 7 días con cofre */ .in3-quiz.pd .pd-tit h2 { font: 400 30px/1 'Bebas Neue', var(--font, sans-serif); letter-spacing: .03em; color: var(--azul); } .in3-quiz.pd .pd-tit p { margin-top: 5px; font-size: 13.5px; } .pd-tit p b { color: var(--azul); font-variant-numeric: tabular-nums; } .pd-op { background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.28)); border: 1px solid rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 26px -20px rgba(4,0,188,.55); } .pd-op:hover:not(:disabled) { border-color: rgba(0,18,253,.55); background: linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.42)); } .pd-op.ok { background: linear-gradient(150deg, rgba(18,128,92,.24), rgba(18,128,92,.10)); border-color: rgba(18,128,92,.6); } .pd-op.mal { background: linear-gradient(150deg, rgba(194,39,45,.20), rgba(194,39,45,.07)); border-color: rgba(194,39,45,.55); } .pd-msg { background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.7); } .pd-msg.ok { background: linear-gradient(150deg, rgba(18,128,92,.17), rgba(18,128,92,.06)); border-color: rgba(18,128,92,.3); } .pd-msg.mal { background: linear-gradient(150deg, rgba(194,39,45,.14), rgba(194,39,45,.05)); border-color: rgba(194,39,45,.28); } .pd-premio { padding: 6px 14px 6px 6px; font-size: 18px; background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.34)); border: 1px solid rgba(255,255,255,.88); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -16px rgba(4,0,188,.5); } .pd-premio svg { width: 28px; height: 28px; } .pd-premio.ganado { background: linear-gradient(150deg, rgba(18,128,92,.22), rgba(18,128,92,.08)); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pd-op, .pd-msg, .pd-premio, .pd-dia { -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); } } .pd-dias { position: relative; list-style: none; margin: 0 0 16px; padding: 0; display: flex; justify-content: space-between; max-width: 430px; } .pd-dias::before { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(4,0,188,.14); } .pd-dia { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--azul); background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.88); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -10px rgba(4,0,188,.5); } .pd-dia.si { color: #fff; background: linear-gradient(140deg, #0012fd, #0400bc); border-color: transparent; } .pd-dia.hoy { color: var(--azul); border: 2px solid #0012fd; background: rgba(255,255,255,.9); } .pd-dia.cofre { color: var(--azul); background: rgba(255,228,0,.3); border-color: rgba(255,228,0,.75); } .pd-dia.cofre.si { background: #ffe400; } .pd-aviso { margin: 12px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); } .pd-aviso b, .pd-sig b { color: var(--azul); } .pd-sig { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); } @media (prefers-reduced-motion: no-preference) { .pd-dia.hoy::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(0,18,253,.45); animation: pd-latido 1.8s ease-out infinite; } .pd-dia.cofre.si { animation: pd-cofre .6s cubic-bezier(.3, 1.6, .5, 1); } } @keyframes pd-latido { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes pd-cofre { 40% { transform: scale(1.25) rotate(-8deg); } } @media (max-width: 640px) { .pd-dias { max-width: none; } .pd-dia { width: 32px; height: 32px; } .in3-quiz.pd .pd-tit h2 { font-size: 25px; } } /* [CERT] Pregunta del día v3 (09-oct): vidrio que se nota (figuras de marca detrás y opciones translúcidas con brillo), sin contadores y con el paso a Misiones */ .in3-quiz.pd { overflow: hidden; isolation: isolate; } .in3-quiz.pd > :not(.pd-figuras) { position: relative; z-index: 1; } .pd-figuras { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .pd-figuras i { position: absolute; display: block; } .pd-f1 { width: 300px; height: 300px; right: -70px; top: 40px; border-radius: 50%; background: linear-gradient(140deg, rgba(0,18,253,.42), rgba(4,0,188,.20)); } .pd-f2 { width: 170px; height: 170px; left: 30%; bottom: -70px; border-radius: 34px; transform: rotate(22deg); background: linear-gradient(160deg, rgba(4,0,188,.30), rgba(0,18,253,.10)); } .pd-f3 { width: 0; height: 0; left: -24px; top: 92px; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 138px solid rgba(0,18,253,.16); transform: rotate(-14deg); } .pd-f4 { width: 64px; height: 64px; right: 32%; top: -22px; border-radius: 50%; background: rgba(0,18,253,.18); } .pd-op { background: linear-gradient(150deg, rgba(255,255,255,.46), rgba(255,255,255,.14)); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.22), 0 16px 32px -22px rgba(4,0,188,.7); overflow: hidden; } .pd-op::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 70%; height: 55%; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); } .pd-op { position: relative; } .pd-op > * { position: relative; } .pd-op:hover:not(:disabled) { background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.26)); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 18px 34px -20px rgba(0,18,253,.75); } .pd-op.ok { background: linear-gradient(150deg, rgba(18,128,92,.34), rgba(18,128,92,.12)); border-color: rgba(18,128,92,.65); } .pd-op.mal { background: linear-gradient(150deg, rgba(194,39,45,.30), rgba(194,39,45,.10)); border-color: rgba(194,39,45,.6); } .pd-op.apagada { opacity: .55; } .pd-msg { background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,.2)); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .pd-msg.ok { background: linear-gradient(150deg, rgba(18,128,92,.26), rgba(18,128,92,.08)); border-color: rgba(18,128,92,.35); } .pd-msg.mal { background: linear-gradient(150deg, rgba(194,39,45,.22), rgba(194,39,45,.07)); border-color: rgba(194,39,45,.32); } .pd-dia { background: linear-gradient(150deg, rgba(255,255,255,.6), rgba(255,255,255,.22)); border-color: rgba(255,255,255,.8); } .pd-premio { background: linear-gradient(150deg, rgba(255,255,255,.6), rgba(255,255,255,.2)); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pd-op, .pd-msg, .pd-premio, .pd-dia, .pd-mision { -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%); } } .pd-mision { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,.18)); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .pd-mision-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #0012fd, #0400bc); } .pd-mision p { flex: 1; min-width: 200px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--negro, #11111a); } .pd-mision p b { color: var(--azul); } .pd-mision .pd-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pd-ir { gap: 8px; } /* [CERT] Panda del ranking con imagen por nivel (09-oct): un poco más grande mientras mejor el puesto y un movimiento suave propio de cada grupo de niveles. Sin adornos agregados ni confeti. */ .rk-panda[data-nivel] img { object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; scale: var(--pz, 1); } .rk-panda[data-nivel="1"] { --pz: .80; } .rk-panda[data-nivel="2"] { --pz: .84; } .rk-panda[data-nivel="3"] { --pz: .88; } .rk-panda[data-nivel="4"] { --pz: .91; } .rk-panda[data-nivel="5"] { --pz: .94; } .rk-panda[data-nivel="6"] { --pz: .97; } .rk-panda[data-nivel="7"] { --pz: 1; } .rk-panda[data-nivel="8"] { --pz: 1.08; } .rk-panda[data-nivel] .rk-globo { position: relative; z-index: 2; translate: 0 calc((1 - var(--pz, 1)) * 88px); } /* el globo sigue a la cabeza */ @media (prefers-reduced-motion: no-preference) { .rk-panda[data-nivel="1"] img, .rk-panda[data-nivel="2"] img { animation: pn-respira 3.6s ease-in-out infinite; } .rk-panda[data-nivel="3"] img, .rk-panda[data-nivel="4"] img, .rk-panda[data-nivel="5"] img { animation: pn-salto 2.8s ease-in-out infinite; } .rk-panda[data-nivel="6"] img, .rk-panda[data-nivel="7"] img, .rk-panda[data-nivel="8"] img { animation: pn-celebra 2.4s ease-in-out infinite; } } @keyframes pn-respira { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-2px) scaleY(1.02); } } @keyframes pn-salto { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } } @keyframes pn-celebra { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-6px) rotate(-3deg); } 38% { transform: translateY(0) rotate(0); } } @media (max-width: 480px) { .rk-panda[data-nivel] .rk-globo { translate: none; } } /* [CERT] Botones de la pregunta del día con vidrio MATE (09-oct), graduado como los materiales de Apple (ultra fino → fino → normal → grueso): nivel «normal». Más velo blanco, más difuminado, menos color y menos brillo. Para graduarlo, cambiar solo estas variables: --mate-a / --mate-b (velo), --mate-blur y --mate-sat. */ .pd-op { --mate-a: .66; --mate-b: .46; --mate-blur: 26px; --mate-sat: 150%; background: linear-gradient(150deg, rgba(255,255,255,var(--mate-a)), rgba(255,255,255,var(--mate-b))); border-color: rgba(255,255,255,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 30px -20px rgba(4,0,188,.55); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pd-op { -webkit-backdrop-filter: blur(var(--mate-blur)) saturate(var(--mate-sat)); backdrop-filter: blur(var(--mate-blur)) saturate(var(--mate-sat)); } } .pd-op::before { opacity: .5; } .pd-op:hover:not(:disabled) { --mate-a: .78; --mate-b: .58; background: linear-gradient(150deg, rgba(255,255,255,var(--mate-a)), rgba(255,255,255,var(--mate-b))); } .pd-op.ok { background: linear-gradient(150deg, rgba(228,245,237,.86), rgba(204,235,220,.64)); border-color: rgba(18,128,92,.6); } .pd-op.mal { background: linear-gradient(150deg, rgba(252,233,234,.86), rgba(247,210,212,.64)); border-color: rgba(194,39,45,.55); } /* [CERT] Botones de la pregunta del día: vidrio mate v2 (09-oct), más cerca del vidrio de Apple. Solo los botones: borde de luz (filo que brilla arriba y se apaga al centro), grosor (sombra interior abajo), brillo suave arriba a la izquierda, grano finísimo de vidrio esmerilado y un leve hundimiento al tocar. Se gradúa con --mate-a/--mate-b/--mate-blur/--mate-sat. */ .pd-op { border: 1px solid transparent; background: linear-gradient(150deg, rgba(255,255,255,var(--mate-a)), rgba(255,255,255,var(--mate-b))) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.28) 45%, rgba(255,255,255,.75)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -10px 18px -14px rgba(4,0,188,.20), 0 1px 2px rgba(4,0,188,.06), 0 16px 32px -22px rgba(4,0,188,.55); transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s, opacity .25s; } .pd-op::before { opacity: 1; inset: 0; width: auto; height: auto; background: radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%); } .pd-op::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .pd-op:hover:not(:disabled) { --mate-a: .78; --mate-b: .60; border-color: transparent; background: linear-gradient(150deg, rgba(255,255,255,var(--mate-a)), rgba(255,255,255,var(--mate-b))) padding-box, linear-gradient(135deg, #fff, rgba(0,18,253,.35) 50%, rgba(255,255,255,.9)) border-box; box-shadow: inset 0 1px 0 #fff, inset 0 -10px 18px -14px rgba(4,0,188,.22), 0 1px 2px rgba(4,0,188,.08), 0 20px 36px -20px rgba(0,18,253,.6); } .pd-op:active:not(:disabled) { transform: scale(.985); } .pd-op.ok { border-color: transparent; background: linear-gradient(150deg, rgba(228,245,237,.88), rgba(204,235,220,.66)) padding-box, linear-gradient(135deg, rgba(18,128,92,.85), rgba(18,128,92,.3) 50%, rgba(18,128,92,.7)) border-box; } .pd-op.mal { border-color: transparent; background: linear-gradient(150deg, rgba(252,233,234,.88), rgba(247,210,212,.66)) padding-box, linear-gradient(135deg, rgba(194,39,45,.8), rgba(194,39,45,.28) 50%, rgba(194,39,45,.65)) border-box; } .pd-l { background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(228,231,255,.75)); border: 1px solid rgba(4,0,188,.08); box-shadow: inset 0 1px 0 #fff, 0 3px 8px -4px rgba(4,0,188,.35); } /* [CERT] Cajas de respuesta más claras (09-oct): para alumnos de todas las edades no pueden perderse con el fondo. Vidrio nivel «grueso» de Apple (más blanco), borde azul suave que marca dónde empieza y termina cada caja, sombra más marcada. Solo las cajas de respuesta. */ .pd-op { --mate-a: .86; --mate-b: .74; --mate-blur: 30px; --mate-sat: 130%; border-width: 1.5px; background: linear-gradient(150deg, rgba(255,255,255,var(--mate-a)), rgba(255,255,255,var(--mate-b))) padding-box, linear-gradient(135deg, #fff, rgba(4,0,188,.26) 45%, rgba(4,0,188,.34)) border-box; box-shadow: inset 0 1px 0 #fff, inset 0 -10px 18px -14px rgba(4,0,188,.18), 0 2px 5px rgba(4,0,188,.10), 0 16px 30px -16px rgba(4,0,188,.5); } .pd-op:hover:not(:disabled) { --mate-a: .94; --mate-b: .84; background: linear-gradient(150deg, rgba(255,255,255,var(--mate-a)), rgba(255,255,255,var(--mate-b))) padding-box, linear-gradient(135deg, #fff, rgba(0,18,253,.5) 45%, rgba(0,18,253,.6)) border-box; } /* [CERT] Llama de la racha (09-oct): UNA sola llama animada; cada etapa trae su propia paleta con degradado (assets/llamas/racha-.webp: borde oscuro → cuerpo → brillo → centro amarillo), así que no lleva filtros de color. Orden: dorado → naranja → rojo → rojo rosado → carmesí → magenta → morado → violeta → índigo → azul. */ .in3-llama.e-chispa .llama-img.llama-img, .g-item.racha .llama-img.e-chispa.e-chispa { filter: none !important; } .in3-llama.e-viva .llama-img.llama-img, .g-item.racha .llama-img.e-viva.e-viva { filter: none !important; } .in3-llama.e-semana .llama-img.llama-img, .g-item.racha .llama-img.e-semana.e-semana { filter: none !important; } .in3-llama.e-quincena .llama-img.llama-img, .g-item.racha .llama-img.e-quincena.e-quincena { filter: none !important; } .in3-llama.e-mes .llama-img.llama-img, .g-item.racha .llama-img.e-mes.e-mes { filter: none !important; } .in3-llama.e-bimestre .llama-img.llama-img, .g-item.racha .llama-img.e-bimestre.e-bimestre { filter: none !important; } .in3-llama.e-trimestre .llama-img.llama-img, .g-item.racha .llama-img.e-trimestre.e-trimestre { filter: none !important; } .in3-llama.e-semestre .llama-img.llama-img, .g-item.racha .llama-img.e-semestre.e-semestre { filter: none !important; } .in3-llama.e-nueve .llama-img.llama-img, .g-item.racha .llama-img.e-nueve.e-nueve { filter: none !important; } .in3-llama.e-anio .llama-img.llama-img, .g-item.racha .llama-img.e-anio.e-anio { filter: none !important; } /* [CERT] Menú lateral con menos ruido (09-oct, pedido del Sr. Johnson): blanco y azul. El logo queda como único bloque fuerte; la opción activa es azul muy suave con ícono azul y una rayita azul al costado; el globo con el nombre es blanco con letras azules. Sin amarillo en el menú. */ @media (min-width: 901px) { .nav-item.active { position: relative; background: rgba(4,0,188,.08) !important; color: var(--azul) !important; box-shadow: none !important; } .nav-item.active .ic { color: var(--azul) !important; } .nav-item.active::before { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 22px; margin-top: -11px; border-radius: 0 4px 4px 0; background: var(--azul); } [data-tip]::after { background: #fff !important; color: var(--azul) !important; box-shadow: 0 10px 24px -12px rgba(4,0,188,.45), 0 0 0 1px rgba(4,0,188,.08) !important; } } .tip-flotante { background: #fff; color: var(--azul); box-shadow: 0 10px 24px -12px rgba(4,0,188,.45), 0 0 0 1px rgba(4,0,188,.08); } /* [CERT] Menos ruido visual arriba (09-oct): logo azul sobre blanco (versión de la guía de marca) e ícono del programa en el selector con fondo suave y dibujo del color del programa, como la opción activa del menú. */ @media (min-width: 901px) { .brand { background: transparent !important; box-shadow: none !important; } /* Logo azul sobre blanco: la R sola, sin fondo */ .brand-iso { width: 30px !important; } } .ps-ic { color: var(--pc, #0400bc); background: color-mix(in srgb, var(--pc, #0400bc) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, #0400bc) 14%, transparent); } /* [CERT] Desplegable de la campanita: botón al centro de notificaciones (09-oct) */ .pop-pie { padding: 10px 12px 12px; border-top: 1px solid var(--border, rgba(4,0,188,.08)); } .pop-pie .btn { gap: 8px; } /* [CERT] Desplegables de arriba (campanita, programa, cuenta) con liquid glass (09-oct), la misma receta del campus: velo blanco esmerilado, difuminado fuerte, borde de luz, grosor con sombra interior, brillo arriba a la izquierda, grano finísimo y sombra suave. El botón principal de adentro sigue sólido. */ .pop { border: 1px solid transparent; overflow: hidden; isolation: isolate; background: linear-gradient(150deg, #ffffff, #f6f7ff) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.4) 45%, rgba(4,0,188,.16)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -12px 22px -18px rgba(4,0,188,.18), 0 2px 6px rgba(4,0,188,.08), 0 28px 56px -28px rgba(4,0,188,.5); } /* Van dentro de la barra de arriba, que ya es de vidrio, y el navegador no difumina un vidrio dentro de otro: con fondo translúcido se veía nítido lo de atrás. Por eso el fondo es opaco (material «grueso» de Apple) y el vidrio se nota en el borde de luz, el brillo, el grosor, el grano y la sombra. */ .pop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); } .pop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .pop-item:hover, .pop-item.kbd-active { background: rgba(4,0,188,.06); } .pop-sep { background: rgba(4,0,188,.08); } .pop-pie { border-top-color: rgba(4,0,188,.08); } /* [CERT] Desplegable de la cuenta: nombre arriba y correo abajo (09-oct) */ .pop-head.pop-cuenta { display: grid; gap: 2px; justify-content: start; } .pop-head.pop-cuenta small { font-weight: 500; font-size: 12.5px; overflow-wrap: anywhere; } /* [CERT] Desplegables en capa propia (09-oct): fuera de la barra de vidrio, el vidrio difumina de verdad lo que hay detrás. Velo nivel «grueso» para que siempre se lea, borde de luz, brillo, grosor, grano y sombra (receta del campus). */ .capa-pop { position: fixed; top: 0; left: 0; z-index: 400; } .pop.pop-capa { position: fixed; background: linear-gradient(150deg, rgba(255,255,255,.80), rgba(255,255,255,.66)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.4) 45%, rgba(4,0,188,.18)) border-box; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pop.pop-capa { -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); } } /* [CERT] certificado anulado: sello gris, no dorado */ .diploma.revoked .diploma-seal { background: var(--surface-3); color: var(--text-3); box-shadow: none; } /* [CERT] Perfil · ventanitas (09-oct): editar perfil, cambiar correo, cambiar contraseña y cerrar sesión en todos. Liquid glass nivel «grueso» (receta del campus): velo blanco en degradado, borde de luz, brillo arriba a la izquierda, grosor, grano al 7 % y sombra azulada. El vidrio difumina la página de atrás. Los campos van como los del login. */ .pf-dialogo { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto; color: var(--negro, #11111a); border: 1.5px solid transparent; border-radius: 28px; background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%) padding-box, linear-gradient(150deg, rgba(255,255,255,.84), rgba(255,255,255,.68)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.4) 45%, rgba(4,0,188,.2)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -10px 18px -14px rgba(4,0,188,.18), 0 2px 6px rgba(4,0,188,.08), 0 40px 90px -30px rgba(4,0,188,.5); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pf-dialogo { -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); } } .pf-dialogo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .pf-dialogo::backdrop { background: rgba(17,17,26,.22); } .pf-caja { position: relative; display: grid; gap: 14px; padding: 26px 24px 22px; } .pf-caja[hidden] { display: none; } .pf-t { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--negro, #11111a); } .pf-t:focus, .pf-t:focus-visible { outline: none !important; box-shadow: none; } /* al abrir, el foco va al título: el anillo aparece recién al usar el teclado */ .pf-d { margin: -6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); } .pf-d b { color: var(--negro, #11111a); font-weight: 600; overflow-wrap: anywhere; } .pf-campo { display: grid; gap: 6px; } .pf-etq { font-size: 13px; font-weight: 600; color: var(--text-2); } .pf-in { width: 100%; min-height: 48px; padding: 0 16px; border: 1.5px solid rgba(4,0,188,.2); border-radius: 14px; font: inherit; font-size: 16px; color: var(--negro, #11111a); background: rgba(255,255,255,.82); } .pf-in:hover { border-color: rgba(4,0,188,.38); } .pf-in:focus { outline: none; border-color: #0012fd; box-shadow: 0 0 0 4px rgba(0,18,253,.14); } .pf-area { min-height: 92px; padding: 12px 16px; line-height: 1.5; resize: vertical; } .pf-sel-caja { position: relative; } .pf-sel-caja .ic { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--azul); pointer-events: none; } .pf-sel { padding-right: 46px; -webkit-appearance: none; appearance: none; cursor: pointer; } .pf-equipo { justify-self: start; } .pf-ayuda { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-3); } .pf-ayuda b { color: var(--text-2); overflow-wrap: anywhere; } .pf-correo { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; min-height: 48px; padding: 4px 6px 4px 16px; border-radius: 14px; background: rgba(4,0,188,.045); } .pf-correo-txt { min-width: 0; font-size: 15px; overflow-wrap: anywhere; } .pf-correo .btn { margin-left: auto; } /* si el correo no cabe, el botón baja y el correo no se parte */ .pf-verif { min-height: 65px; } .pf-error { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--danger, #c2272d); } .pf-error[hidden] { display: none; } .pf-error.pf-info { color: var(--azul); font-weight: 500; } /* «muy pronto»: no es un fallo */ .pf-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } @media (prefers-reduced-motion: no-preference) { .pf-dialogo[open] { animation: pf-entra .24s cubic-bezier(.2,.9,.3,1.1); } @keyframes pf-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } } } /* [CERT] Perfil parte 3: acciones de peligro (eliminar la cuenta) en rojo de marca de error, sin bloques sólidos en la tarjeta */ .btn.pf-texto-peligro { color: var(--danger); } .btn.pf-texto-peligro:hover { background: var(--danger-soft); color: var(--danger); } .btn.pf-peligro { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.pf-peligro:hover { background: #a51f25; border-color: #a51f25; } .btn.pf-peligro:disabled { opacity: .6; } /* [CERT] Encabezado del perfil en el celular (09-oct): antes se apretaba (nombre en 2 líneas y «Editar» pegado a las etiquetas). Ahora: foto más chica con el nombre y el correo al lado, «Editar» arriba a la derecha y las etiquetas en su propia fila. */ @media (max-width: 640px) { .profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; } .profile-head > .grow { display: contents; } .profile-head > .avatar { grid-column: 1; grid-row: 1 / span 2; width: 60px; height: 60px; font-size: 21px; } .profile-head .page-title { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; } .profile-head .page-title ~ .muted { grid-column: 2 / -1; grid-row: 2; align-self: start; margin: 0; font-size: 14px; overflow-wrap: anywhere; } .profile-head .row-wrap { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; } .profile-head > [data-act="edit-profile"] { grid-column: 3; grid-row: 1; align-self: end; padding-inline: 10px; } } /* [CERT] 09-oct. El dueño: «el liquid glass no se ve en el perfil, pero nada nada» y «lo quitaste del desplegable del programa y de las notificaciones». Misma receta de las tarjetas del Inicio que él aprobó: velo blanco .52 → .18, desenfoque 22 px, saturación 210 %, filo de luz arriba a la izquierda y abajo a la derecha, grosor abajo, grano al 7 % y sombra azulada. */ /* 1. Perfil con liquid glass: todas sus tarjetas (encabezado, datos, suscripciones, mis datos, preferencias y seguridad) */ .perfil .card { position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,.65); background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.28) 60%, rgba(255,255,255,.18) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 30px rgba(255,255,255,.28), inset 0 -10px 18px -14px rgba(4,0,188,.18), 0 2px 6px rgba(4,0,188,.05), 0 26px 50px -30px rgba(4,0,188,.5); } .perfil .card:hover { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.32), inset 0 -10px 18px -14px rgba(4,0,188,.2), 0 2px 6px rgba(4,0,188,.06), 0 30px 56px -30px rgba(4,0,188,.56); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .perfil .card { -webkit-backdrop-filter: blur(22px) saturate(210%) brightness(1.05); backdrop-filter: blur(22px) saturate(210%) brightness(1.05); } } .perfil .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .perfil .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.55) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.4) 86%, rgba(255,255,255,.95) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* 2. Desplegables (programa, notificaciones y cuenta): velo más fino para que se vea lo de atrás desenfocado; el brillo del desenfoque aclara lo oscuro de detrás y el texto secundario va un tono más fuerte para que siempre se lea */ .pop.pop-capa { background: linear-gradient(150deg, rgba(255,255,255,.64), rgba(255,255,255,.46)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.4) 45%, rgba(4,0,188,.2)) border-box; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pop.pop-capa { -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.1); backdrop-filter: blur(26px) saturate(200%) brightness(1.1); } } .pop.pop-capa .muted { color: var(--text-2); } /* 3. Ventanitas del perfil: el mismo vidrio un poco más fino (siguen legibles: los campos tienen su propio fondo) */ .pf-dialogo { background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%) padding-box, linear-gradient(150deg, rgba(255,255,255,.74), rgba(255,255,255,.56)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.4) 45%, rgba(4,0,188,.2)) border-box; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pf-dialogo { -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.06); backdrop-filter: blur(28px) saturate(190%) brightness(1.06); } } /* 4. Accesibilidad: sin transparencia si la persona la reduce o pide más contraste */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .perfil .card, .pop.pop-capa, .pf-dialogo { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* [CERT] 09-oct (2.ª vuelta): el dueño probó figuras de marca detrás del perfil y NO las quiere («se ve horrible»). Quitadas. */ /* Desplegables: sin el brillo extra (blanqueaba lo de atrás) y con el velo un poco más fino */ .pop.pop-capa { background: linear-gradient(150deg, rgba(255,255,255,.58), rgba(255,255,255,.40)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.4) 45%, rgba(4,0,188,.22)) border-box; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pop.pop-capa { -webkit-backdrop-filter: blur(22px) saturate(200%); backdrop-filter: blur(22px) saturate(200%); } } /* [CERT] 09-oct (3.ª vuelta). El dueño mandó cómo lo quiere: vidrio translúcido donde se ven las formas del fondo (la «R» de marca de agua, las franjas) con el grano y el filo de luz. El desenfoque fuerte las borraba y la tarjeta quedaba blanca («se ve un momento y después se ve así»: el desenfoque tarda un instante en aplicarse). Tarjetas del perfil sin desenfoque; desplegables con uno muy suave para que se vea el fondo sin que moleste el texto de atrás. */ .perfil .card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pop.pop-capa { -webkit-backdrop-filter: blur(4px) saturate(160%); backdrop-filter: blur(4px) saturate(160%); } } /* [CERT] 09-oct (4.ª vuelta). El dueño: «ahora en el inicio, pero no tan tan traslúcido». Tarjetas del Inicio con el vidrio del perfil (se ven las formas del fondo, sin el desenfoque fuerte que las borraba) y un velo más blanco que el del perfil. La tarjeta principal, el ticket de la clase en vivo y la misión no cambian. */ .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { background: linear-gradient(145deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.50) 60%, rgba(255,255,255,.42) 100%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .in3-racha, .in3-rank2, .in3-quiz, .in3-ev:not(.ticket), .in3-aviso { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%) !important; } } /* [CERT] 09-oct: el selector de opciones (Tema del Perfil, filtros de Notificaciones, Ranking, Logros, Programas…) «se pierde un poco» sobre el vidrio (gris claro sobre blanco translúcido). Ahora: cápsula blanca mate con borde azul suave y la opción elegida en azul de marca con letras blancas, como los interruptores de al lado. */ .seg { padding: 4px; gap: 4px; border-radius: 12px; background: rgba(255,255,255,.78); border: 1.5px solid rgba(4,0,188,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px -12px rgba(4,0,188,.4); } .seg button { padding: 7px 14px; border-radius: 9px; color: var(--text-2); font-weight: 600; transition: background var(--dur), color var(--dur); } .seg button:hover { background: rgba(4,0,188,.07); color: var(--azul); } .seg button[aria-pressed="true"] { background: var(--azul); color: #fff; box-shadow: 0 6px 14px -8px rgba(4,0,188,.75); } .seg button[aria-pressed="true"]:hover { background: var(--azul); color: #fff; } /* [CERT] 09-oct: vidrio en las demás pantallas (pedido del dueño): la misma receta del Perfil, solo en claro. Translúcido, SIN desenfoque (se ven las formas del fondo y la «R»), con filo de luz, grano al 7 % y sombra azulada. Programas (tarjetas de programa), Programa, Calendario, Certificados (diplomas), Ranking, Notificaciones y Ayuda. La oferta, «Próximamente», el arte de los diplomas y la barra azul de «Tu posición» conservan su estilo. */ :root:not([data-theme="dark"]) :is([data-ruta="programa"], [data-ruta="calendario"], [data-ruta="ranking"], [data-ruta="notificaciones"], [data-ruta="ayuda"], [data-ruta="comunidad"]) .card, :root:not([data-theme="dark"]) [data-ruta="programas"] .prog-card, :root:not([data-theme="dark"]) [data-ruta="certificados"] .diploma { position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,.65); background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.28) 60%, rgba(255,255,255,.18) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 30px rgba(255,255,255,.28), inset 0 -10px 18px -14px rgba(4,0,188,.18), 0 2px 6px rgba(4,0,188,.05), 0 26px 50px -30px rgba(4,0,188,.5); -webkit-backdrop-filter: none; backdrop-filter: none; } :root:not([data-theme="dark"]) :is([data-ruta="programa"], [data-ruta="calendario"], [data-ruta="ranking"], [data-ruta="notificaciones"], [data-ruta="ayuda"], [data-ruta="comunidad"]) .card::before, :root:not([data-theme="dark"]) [data-ruta="programas"] .prog-card::before, :root:not([data-theme="dark"]) [data-ruta="certificados"] .diploma::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :root:not([data-theme="dark"]) :is([data-ruta="programa"], [data-ruta="calendario"], [data-ruta="ranking"], [data-ruta="notificaciones"], [data-ruta="ayuda"], [data-ruta="comunidad"]) .card::after, :root:not([data-theme="dark"]) [data-ruta="programas"] .prog-card::after, :root:not([data-theme="dark"]) [data-ruta="certificados"] .diploma::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.55) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.4) 86%, rgba(255,255,255,.95) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root:not([data-theme="dark"]) :is([data-ruta="programa"], [data-ruta="calendario"], [data-ruta="ranking"], [data-ruta="notificaciones"], [data-ruta="ayuda"], [data-ruta="comunidad"]) .card, :root:not([data-theme="dark"]) [data-ruta="programas"] .prog-card, :root:not([data-theme="dark"]) [data-ruta="certificados"] .diploma { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* [CERT] 09-oct: el dueño «lo veo exactamente igual». En esas pantallas lo que se ve como tarjeta son piezas propias con fondo blanco sólido (filas de áreas del programa, eventos del calendario, celdas del ranking). Ahora llevan el mismo vidrio, solo en claro. */ :root:not([data-theme="dark"]) [data-ruta="programa"] .acc-item, :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-event { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.28) 60%, rgba(255,255,255,.18) 100%); border-top-color: rgba(255,255,255,.7); border-right-color: rgba(255,255,255,.7); border-bottom-color: rgba(255,255,255,.7); box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 24px rgba(255,255,255,.25), 0 2px 6px rgba(4,0,188,.05), 0 18px 36px -26px rgba(4,0,188,.45); } :root:not([data-theme="dark"]) [data-ruta="programa"] .acc-item { border-left-color: rgba(255,255,255,.7); } :root:not([data-theme="dark"]) [data-ruta="programa"] .acc-item.gold { background: linear-gradient(180deg, rgba(253,245,220,.8), rgba(253,245,220,0) 140px), linear-gradient(145deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.28) 60%, rgba(255,255,255,.18) 100%); border-color: color-mix(in srgb, var(--gold-2) 45%, rgba(255,255,255,.7)); } :root:not([data-theme="dark"]) [data-ruta="programa"] .module { background: rgba(255,255,255,.36); border-color: rgba(255,255,255,.7); } :root:not([data-theme="dark"]) [data-ruta="programa"] .module-head { background: rgba(255,255,255,.42); } :root:not([data-theme="dark"]) [data-ruta="programa"] .exam-card:not(.passed) { background: rgba(255,255,255,.38); } :root:not([data-theme="dark"]) [data-ruta="ranking"] .rank-table th { background: rgba(255,255,255,.38); } :root:not([data-theme="dark"]) [data-ruta="ranking"] .rank-table tr:not(.me) td { background: transparent; } /* [CERT] 09-oct: «sigue un poco suave, se puede mejorar un poco». Vidrio más marcado en las demás pantallas, sin figuras ni desenfoque: velo un poco más fino, filo de luz más vivo con reflejo azul abajo a la derecha (como el borde de un vidrio), más grosor por dentro y sombra azulada más clara. El Perfil y el Inicio no cambian. */ :root:not([data-theme="dark"]) [data-ruta="programa"] .card, :root:not([data-theme="dark"]) [data-ruta="calendario"] .card, :root:not([data-theme="dark"]) [data-ruta="ranking"] .card, :root:not([data-theme="dark"]) [data-ruta="notificaciones"] .card, :root:not([data-theme="dark"]) [data-ruta="ayuda"] .card, :root:not([data-theme="dark"]) [data-ruta="comunidad"] .card, :root:not([data-theme="dark"]) [data-ruta="programas"] .prog-card, :root:not([data-theme="dark"]) [data-ruta="certificados"] .diploma, :root:not([data-theme="dark"]) [data-ruta="programa"] .acc-item, :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-event { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } :root:not([data-theme="dark"]) [data-ruta="programa"] .card::after, :root:not([data-theme="dark"]) [data-ruta="calendario"] .card::after, :root:not([data-theme="dark"]) [data-ruta="ranking"] .card::after, :root:not([data-theme="dark"]) [data-ruta="notificaciones"] .card::after, :root:not([data-theme="dark"]) [data-ruta="ayuda"] .card::after, :root:not([data-theme="dark"]) [data-ruta="comunidad"] .card::after, :root:not([data-theme="dark"]) [data-ruta="programas"] .prog-card::after, :root:not([data-theme="dark"]) [data-ruta="certificados"] .diploma::after { padding: 2px; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); } :root:not([data-theme="dark"]) [data-ruta="programa"] .acc-item, :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-event { border-right-color: rgba(0,18,253,.16); border-bottom-color: rgba(0,18,253,.22); } :root:not([data-theme="dark"]) [data-ruta="programa"] .acc-item.gold { background: linear-gradient(180deg, rgba(253,245,220,.8), rgba(253,245,220,0) 140px), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root:not([data-theme="dark"]) [data-ruta="programa"] .card, :root:not([data-theme="dark"]) [data-ruta="calendario"] .card, :root:not([data-theme="dark"]) [data-ruta="ranking"] .card, :root:not([data-theme="dark"]) [data-ruta="notificaciones"] .card, :root:not([data-theme="dark"]) [data-ruta="ayuda"] .card, :root:not([data-theme="dark"]) [data-ruta="comunidad"] .card, :root:not([data-theme="dark"]) [data-ruta="programas"] .prog-card, :root:not([data-theme="dark"]) [data-ruta="certificados"] .diploma, :root:not([data-theme="dark"]) [data-ruta="programa"] .acc-item, :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-event { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* [CERT] 09-oct · Mis programas, parte 1: lo que se veía roto */ /* 1. Tarjetas de programa: el pie («Ranking · Certificado» y el botón) ya no queda pegado al borde */ .prog-foot { padding: 0 18px 18px; } /* 2. Portada del programa: «Ranking» y «Comunidad» se leen (blancos sobre el azul) y las etiquetas se separan del texto */ .course-head .btn-ghost { color: #fff; } .course-head .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; } .course-head-inner .grow > p { margin: 6px 0 14px; } /* 3. «Próximas clases» en la columna angosta: la fecha a la izquierda, el texto a lo ancho y el botón debajo */ .lesson-layout aside .event { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; padding: 12px 16px; } .lesson-layout aside .event .ev-ic { display: none; } .lesson-layout aside .event > .grow { grid-column: 2; } .lesson-layout aside .event > .btn, .lesson-layout aside .event > .icon-btn { grid-column: 2; justify-self: start; } /* 4. «Tu avance»: la barra ya no queda pegada al título */ .card-title + .progress { margin-top: 10px; } /* 5. Celular: los filtros de arriba (Todos / Activos / Vencidos y similares) bajan a su propia línea y el título no se aprieta */ @media (max-width: 640px) { .page-head > .grow { flex-basis: 100%; } } /* 6. Celular: portada más corta (la descripción en 4 líneas y el círculo de avance chico arriba a la derecha) */ @media (max-width: 640px) { .course-head-inner .grow > p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .course-head .ring { position: absolute; top: 0; right: 0; transform: scale(.62); transform-origin: top right; } .course-head-inner .grow { padding-right: 58px; } } /* [CERT] 09-oct · Mis programas, parte 2 (pedido del dueño): dentro de un programa, franja de vidrio arriba y mosaico de portadas, una por área, como en la plataforma actual; cada portada es un recuadro interactivo que abre la página del área. */ .pg-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin: 6px 0 18px; } .pg-cab .page-title { margin: 0; } .pg-desc { margin: 6px 0 0; max-width: 72ch; color: var(--text-2); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pg-atajos { gap: 6px; } .pg-franja.card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr); padding: 0; margin-bottom: 28px; } .pg-fr-sec { display: flex; align-items: center; gap: 14px; padding: 18px 20px; min-width: 0; } .pg-fr-sec + .pg-fr-sec { border-left: 1px solid rgba(4,0,188,.08); } .pg-fr-sec .grow { min-width: 0; display: grid; gap: 2px; } .pg-fr-etq { font-size: 12px; font-weight: 600; color: var(--text-3); } .pg-fr-sec b { font-size: 15px; line-height: 1.35; color: var(--negro); } .pg-fr-sec .ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-fr-sec .btn { flex: none; } .pg-areas-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .pg-areas-cab .section-title { margin: 0; } .areas-mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; } .area-card { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; isolation: isolate; text-decoration: none; color: #fff; background: #0b0c2a; box-shadow: 0 2px 6px rgba(4,0,188,.08), 0 22px 44px -26px rgba(4,0,188,.55); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; } .area-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.8,.2,1); } .area-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,8,40,0) 50%, rgba(6,8,40,.74) 100%); } .area-card.is-bloqueada .area-velo, .area-card.is-gold .area-velo { background: linear-gradient(180deg, rgba(6,8,40,.42) 0%, rgba(6,8,40,.58) 55%, rgba(6,8,40,.82) 100%); } .area-estado { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38); color: #fff; transition: bottom .25s; } .area-card.is-progreso .area-estado { background: #ffe400; border-color: #ffe400; color: #11111a; } .area-card.is-completada .area-estado { background: rgba(255,255,255,.94); border-color: #fff; color: #12805c; } .area-card.is-gold .area-estado { background: linear-gradient(135deg, #f6d365, #e0a526); border-color: #f6d365; color: #3b2a00; } .area-card.is-bloqueada .area-estado { background: rgba(11,13,40,.66); border-color: rgba(255,255,255,.28); } .area-meta { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.92); white-space: nowrap; opacity: 0; transition: opacity .2s; } .area-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.22); } .area-barra i { display: block; height: 100%; background: #ffe400; border-radius: 0 3px 3px 0; } .area-card.is-completada .area-barra i { background: #45d39a; } .area-sinimg { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; padding: 24px 28px; background: radial-gradient(90% 120% at 88% 8%, rgba(0,18,253,.85), rgba(4,0,188,0) 60%), linear-gradient(135deg, #0400bc 0%, #0b0c3a 72%); } .area-sinimg-etq { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); font-weight: 600; } .area-sinimg b { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; letter-spacing: .5px; color: #fff; max-width: 16ch; } @media (hover: hover) { .area-card:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(4,0,188,.1), 0 30px 60px -28px rgba(4,0,188,.72); } .area-card:hover .area-img { transform: scale(1.035); } .area-card:hover .area-estado, .area-card:focus-visible .area-estado { bottom: 34px; } .area-card:hover .area-meta, .area-card:focus-visible .area-meta { opacity: 1; } } .area-card:focus-visible { outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .area-card, .area-img, .area-estado { transition: none; } .area-card:hover { transform: none; } .area-card:hover .area-img { transform: none; } } /* Página del área */ .area-cab { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: stretch; margin: 6px 0 26px; } .area-cab-img { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #0b0c2a; box-shadow: 0 22px 44px -26px rgba(4,0,188,.55); } .area-cab-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .area-cab-info.card { display: flex; flex-direction: column; justify-content: center; gap: 8px; } .area-cab-info .page-title { margin: 4px 0 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; } .area-cab-info p { margin: 0; } .area-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(4,0,188,.08); color: var(--azul); } .area-chip.is-progreso { background: #ffe400; color: #11111a; } .area-chip.is-completada { background: var(--success-soft); color: var(--success); } .area-chip.is-gold { background: linear-gradient(135deg, #f6d365, #e0a526); color: #3b2a00; } .area-chip.is-bloqueada { background: var(--surface-3); color: var(--text-3); } .area-cab-info .area-sig { margin: 4px 0 0; color: var(--text-2); } .area-modulos { display: grid; gap: 12px; } .area-modulos .module { margin-top: 0; } .area-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 26px; } .area-nav > :first-child { justify-self: start; } .area-nav > :last-child { justify-self: end; } .area-nav .btn { max-width: 100%; } .area-nav .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; } @media (max-width: 900px) { .area-cab { grid-template-columns: minmax(0, 1fr); } .pg-franja.card { grid-template-columns: minmax(0, 1fr); } .pg-fr-sec + .pg-fr-sec { border-left: 0; border-top: 1px solid rgba(4,0,188,.08); } } @media (max-width: 640px) { .areas-mosaico { gap: 16px; } .area-nav { grid-template-columns: minmax(0, 1fr); } .area-nav > * { justify-self: stretch !important; } .area-nav > span:empty { display: none; } } /* Vidrio de la página del área (misma receta que las demás pantallas, solo en claro) */ :root:not([data-theme="dark"]) [data-ruta="area"] .card { position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,.65); background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } :root:not([data-theme="dark"]) [data-ruta="area"] .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :root:not([data-theme="dark"]) [data-ruta="area"] .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } :root:not([data-theme="dark"]) [data-ruta="area"] .module { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46), rgba(255,255,255,.18)); border-color: rgba(255,255,255,.7); border-right-color: rgba(0,18,253,.16); border-bottom-color: rgba(0,18,253,.22); box-shadow: inset 0 1px 1px #fff, inset 0 0 24px rgba(255,255,255,.25), 0 2px 8px rgba(4,0,188,.06), 0 24px 48px -30px rgba(4,0,188,.5); } :root:not([data-theme="dark"]) [data-ruta="area"] .module-head { background: rgba(255,255,255,.45); } :root:not([data-theme="dark"]) [data-ruta="area"] .exam-card:not(.passed) { background: rgba(255,255,255,.38); } /* [CERT] 09-oct · Ajustes del mosaico: el estado va más abajo para no tapar el texto de las portadas (sin moverse al pasar el mouse), y en los recuadros sin portada el título largo ya no se mete debajo del estado. La portada de IA usa una copia sin el «EN PROGRESO» que traía escrito (portada-ia-sin-estado.jpg). */ .area-estado { bottom: 14px; } .area-card:hover .area-estado, .area-card:focus-visible .area-estado { bottom: 14px; } .area-meta { display: none; } .area-sinimg { padding: 22px 26px 56px; } .area-sinimg b { font-size: clamp(24px, 2.1vw, 34px); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* [CERT] 09-oct · Mis programas, 2.ª versión: recuadros grandes estilo portada, con abanico de portadas de las áreas */ .prog-mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .prog-tile { position: relative; display: flex; align-items: stretch; overflow: hidden; isolation: isolate; min-height: 270px; border-radius: 24px; color: #fff; text-decoration: none; background: radial-gradient(75% 95% at 88% 10%, color-mix(in srgb, var(--pc, #0012fd) 70%, #3d4bff) 0%, rgba(4,0,188,0) 62%), linear-gradient(135deg, #070a3d 0%, color-mix(in srgb, var(--pc, #0400bc) 85%, #070a3d) 62%, color-mix(in srgb, var(--pc, #0400bc) 70%, #0012fd) 115%); box-shadow: 0 2px 8px rgba(4,0,188,.12), 0 28px 56px -30px rgba(4,0,188,.7); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; } .prog-tile.destacada { grid-column: 1 / -1; min-height: 320px; } .pt-luz { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.07) 45%, rgba(255,255,255,0) 60%); } .pt-texto { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 30px; max-width: 56%; } .prog-tile.destacada .pt-texto { max-width: 54%; padding: 34px 40px; } .pt-etq { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); } .pt-titulo { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 2.5vw, 42px); line-height: .98; letter-spacing: .5px; text-wrap: balance; } .prog-tile.destacada .pt-titulo { font-size: clamp(36px, 3.3vw, 58px); } .pt-meta { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.88); } .pt-meta b { color: #ffe400; font-weight: 700; } .pt-barra { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; max-width: 420px; } .pt-barra i { display: block; height: 100%; border-radius: inherit; background: #ffe400; } .pt-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; } .pt-acciones .btn-gold { background: #ffe400; border-color: #ffe400; color: #11111a; font-weight: 700; } .pt-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85); } .pt-vencido { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(255,122,126,.2); color: #ffd6d7; font-weight: 600; } .pt-abanico { position: absolute; z-index: 1; right: 3%; top: 50%; width: 46%; height: 80%; transform: translateY(-50%); pointer-events: none; } .pt-carta { position: absolute; top: 50%; right: 0; width: 74%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b0c2a; box-shadow: 0 18px 36px -16px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.16); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; } .pt-carta img { width: 100%; height: 100%; object-fit: cover; display: block; } .pt-carta .area-sinimg { padding: 12px 16px; } .pt-carta .area-sinimg b { font-size: clamp(15px, 1.3vw, 22px); } .pt-carta .area-sinimg-etq { font-size: 9px; } .pt-c1 { z-index: 3; transform: translate(-4%, -50%) rotate(-2deg); } .pt-c2 { z-index: 2; opacity: .9; transform: translate(-22%, -64%) rotate(-8deg) scale(.88); } .pt-c3 { z-index: 1; opacity: .75; transform: translate(-38%, -38%) rotate(-14deg) scale(.78); } @media (hover: hover) { .prog-tile:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(4,0,188,.16), 0 34px 64px -30px rgba(4,0,188,.82); } .prog-tile:hover .pt-c1 { transform: translate(0, -52%) rotate(0deg) scale(1.03); } .prog-tile:hover .pt-c2 { transform: translate(-28%, -68%) rotate(-10deg) scale(.88); opacity: 1; } .prog-tile:hover .pt-c3 { transform: translate(-46%, -34%) rotate(-17deg) scale(.78); opacity: .9; } } .prog-tile:focus-visible { outline-offset: 4px; } .prog-tile.vencido .pt-abanico { opacity: .45; } .prog-tile.vencido .pt-barra i { background: rgba(255,255,255,.55); } @media (prefers-reduced-motion: reduce) { .prog-tile, .pt-carta { transition: none; } .prog-tile:hover { transform: none; } } @media (max-width: 760px) { .prog-mosaico { grid-template-columns: minmax(0, 1fr); gap: 16px; } .prog-tile, .prog-tile.destacada { min-height: 0; flex-direction: column; } .pt-abanico { position: relative; right: auto; top: auto; transform: none; width: auto; height: auto; margin: 16px 16px 0; } .pt-carta { position: relative; top: auto; right: auto; width: 100%; opacity: 1; transform: none !important; } .pt-c2, .pt-c3 { display: none; } .pt-texto, .prog-tile.destacada .pt-texto { max-width: none; padding: 16px 20px 22px; } .prog-tile.destacada .pt-titulo, .pt-titulo { font-size: clamp(30px, 8vw, 40px); } } /* [CERT] 09-oct · Ajustes de los recuadros de programa: sin subrayado al pasar el mouse, el último solo ocupa todo el ancho y en el celular la miniatura no se aplasta (los en flujo necesitan display block para tomar ancho y proporción). */ .prog-tile, .prog-tile:hover, .prog-tile *, .area-card, .area-card:hover, .area-card * { text-decoration: none; } .prog-mosaico > .prog-tile:last-child:nth-child(2n) { grid-column: 1 / -1; } .pt-abanico, .pt-carta { display: block; } @media (max-width: 760px) { .pt-abanico .pt-c2, .pt-abanico .pt-c3 { display: none; } .pt-carta .area-sinimg { padding: 18px 22px; } .pt-carta .area-sinimg b { font-size: 28px; } .pt-carta .area-sinimg-etq { font-size: 11px; } } /* [CERT] 09-oct · Mis programas, recuadros en LIQUID GLASS (REGLA DE ORO del dueño: liquid glass en todo, siempre; «ese fondo azul no me gusta nada»). Misma receta que las demás pantallas: velo translúcido sin desenfoque (se ven las formas del fondo), brillo arriba a la izquierda, filo de luz con reflejo azul abajo a la derecha, grosor, grano y sombra azulada; un tinte muy suave del color del programa para distinguirlos. Textos oscuros; el abanico de portadas se queda. */ .prog-tile { color: var(--negro, #11111a); border: 1px solid rgba(255,255,255,.65); background: radial-gradient(70% 90% at 92% 8%, color-mix(in srgb, var(--pc, #0400bc) 14%, transparent), transparent 62%), radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } .prog-tile::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .prog-tile::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .pt-luz { display: none; } .pt-etq { color: var(--text-3); } .pt-titulo { color: var(--negro, #11111a); } .pt-meta { color: var(--text-2); } .pt-meta b { color: var(--azul); } .pt-barra { background: rgba(4,0,188,.1); } .pt-barra i { background: linear-gradient(90deg, #0400bc, #0012fd); } .pt-link { color: var(--text-2); } .pt-vencido { background: rgba(194,39,45,.1); color: #c2272d; } .prog-tile.vencido .pt-barra i { background: rgba(4,0,188,.35); } @media (hover: hover) { .prog-tile:hover { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.45), inset 0 0 30px rgba(255,255,255,.34), inset 0 -14px 24px -16px rgba(4,0,188,.26), 0 4px 12px rgba(4,0,188,.1), 0 36px 66px -30px rgba(4,0,188,.68); } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .prog-tile { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* [CERT] 12-oct · Información de la tarjeta de cada programa, propuesta C «Camino de áreas» (la eligió el dueño): un mini camino con un punto por área (hechas en azul con ✓, la actual en amarillo como en el mapa, las que faltan en vidrio) y el porcentaje grande al lado; debajo, dónde vas, los datos, «Continuar» y Ranking y Certificado como pastillas de vidrio (app.js: textoTarjeta). */ .prog-tile .pt-texto { gap: 12px; } .pt-fila { display: flex; align-items: center; gap: 16px; max-width: 560px; margin-top: 2px; } .pt-fila > .pt-riel { flex: 1 1 auto; } .pt-riel { display: block; height: 8px; max-width: 440px; border-radius: 999px; overflow: hidden; background: rgba(4,0,188,.09); box-shadow: inset 0 1px 2px rgba(4,0,188,.14), 0 1px 0 rgba(255,255,255,.9); } .pt-riel i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0400bc, #0012fd); } .pt-camino { position: relative; display: flex; justify-content: space-between; align-items: center; flex: 0 1 auto; min-width: 0; width: min(100%, calc((var(--n) - 1) * 58px + 26px)); height: 30px; } .pt-camino::before { content: ""; position: absolute; left: 13px; right: 13px; top: 50%; border-top: 3px dotted rgba(4,0,188,.3); transform: translateY(-50%); } .pt-camino::after { content: ""; position: absolute; left: 13px; top: 50%; height: 4px; border-radius: 99px; transform: translateY(-50%); width: calc((100% - 26px) * var(--k) / (var(--n) - 1)); background: linear-gradient(90deg, #0400bc, #0012fd); } .pt-camino i { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--azul); border: 1px solid rgba(255,255,255,.95); background: radial-gradient(120% 120% at 30% 20%, #fff, rgba(255,255,255,.7)); box-shadow: inset 0 1px 0 #fff, 0 5px 12px -6px rgba(4,0,188,.6); transform: scale(.72); } .pt-camino i.is-hecha { color: #fff; border-color: rgba(255,255,255,.55); background: linear-gradient(160deg, #4a57ff, #0012fd 55%, #0400bc); } .pt-camino i.is-actual { color: #121452; border: 2px solid #fff; background: radial-gradient(120% 120% at 30% 20%, #fff7a8, #ffe400 62%, #f2c500); box-shadow: 0 6px 14px -6px rgba(18,20,82,.55); transform: none; } .pt-camino i.is-abierta, .pt-camino i.is-bloqueada, .pt-camino i.is-gold { border-color: rgba(4,0,188,.16); } .pt-camino i.is-bloqueada, .pt-camino i.is-gold { background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.95), rgba(238,240,255,.75)); box-shadow: inset 0 1px 0 #fff, 0 4px 10px -7px rgba(4,0,188,.5); } .pt-camino i .ic { stroke-width: 3; } .pt-num { flex: none; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: .8; letter-spacing: .5px; color: var(--azul); } .prog-tile.destacada .pt-num { font-size: 52px; } .pt-num small { font-size: .5em; margin-left: 1px; } .pt-donde { display: block; font-size: 14.5px; line-height: 1.35; color: var(--text-2); } .pt-donde b { color: #121452; font-weight: 600; } .pt-vence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--text-2); } .pt-datos { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-3); } .pt-datos > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .pt-datos .ic { color: var(--azul); } .prog-tile.vencido .pt-num { color: #6c78ff; } .prog-tile.vencido .pt-riel i { background: linear-gradient(90deg, #b3baff, #6c78ff); } .pt-acc { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 4px; } .pt-acc .btn { height: 44px; padding: 0 22px; border-radius: 14px; font-size: 14.5px; } .pt-acc .btn-prod { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -12px rgba(4,0,188,.75); } .prog-tile .pt-acc .btn-soft { color: var(--azul); border: 1px solid rgba(255,255,255,.85); background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.9), rgba(179,186,255,.42)); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(4,0,188,.5); } .pt-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; } .prog-tile .pt-pill { padding: 0 15px; height: 38px; font-size: 13px; cursor: pointer; } .prog-tile .pt-pill .ic { color: var(--azul); } @media (max-width: 760px) { .pt-num, .prog-tile.destacada .pt-num { font-size: 42px; } } @media (prefers-reduced-motion: reduce) { .prog-tile .pt-pill { transition: none; } .prog-tile .pt-pill:hover { transform: none; } } /* [CERT] 12-oct · Portadas de cada programa en Mis programas, propuesta A «Pila con profundidad» (la eligió el dueño): en vez del abanico, un mazo ordenado en 3D. Adelante el área donde vas y detrás asoman las 2 que siguen, cada vez más lejos (velo lavanda); al pasar el ratón la pila se endereza y se abre. En el celular, la portada arriba con las de atrás asomando. Sin portada: una de marca con el ícono del área y su título (app.js: pilaPortadas). */ .prog-tile .pp-gen { position: absolute; inset: 0; display: block; background: linear-gradient(115deg, #0400bc 0%, #0012fd 36%, #6c78ff 74%, #b3baff 100%); } .prog-tile .pp-obj { position: absolute; right: 9%; top: 50%; width: 30%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 26%; color: #fff; transform: translateY(-50%) perspective(420px) rotateY(-20deg) rotateX(9deg); background: linear-gradient(150deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.2) 48%, rgba(255,255,255,.34) 100%); border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 1px #fff, inset 0 -12px 20px -12px rgba(4,0,188,.5), 0 18px 30px -14px rgba(18,20,82,.55); } .prog-tile .pp-obj .ic { width: 44%; height: 44%; stroke-width: 1.7; filter: drop-shadow(0 2px 3px rgba(4,0,188,.45)); } .prog-tile .pp-tit { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; gap: .35em; max-width: 54%; color: #fff; text-align: left; } .prog-tile .pp-tit small { font-size: clamp(7px, 3.2cqi, 12px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; color: rgba(255,255,255,.85); } .prog-tile .pp-tit b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(13px, 8.6cqi, 44px); line-height: .98; letter-spacing: .4px; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 10px rgba(4,0,188,.35); } .pa-pila, .pa-mazo, .pa-carta { display: block; } .pa-pila { position: absolute; z-index: 1; top: 0; bottom: 0; right: 1.5%; width: 45%; perspective: 1500px; pointer-events: none; } .pa-mazo { position: absolute; left: 8%; width: 74%; top: 50%; aspect-ratio: 16 / 9; transform-style: preserve-3d; transform: translateY(-42%) rotateY(-13deg) rotateX(2deg); transition: transform .55s cubic-bezier(.2,.8,.2,1); } .prog-tile.destacada .pa-mazo { left: 14%; width: 64%; } .pa-carta { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #121452; container-type: inline-size; transform-origin: 100% 0; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 24px 44px -20px rgba(4,0,188,.62), 0 4px 10px -4px rgba(18,20,82,.22); transition: transform .55s cubic-bezier(.2,.8,.2,1); } .pa-carta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pa-carta::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; border: 1px solid rgba(255,255,255,.5); background: linear-gradient(155deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 26%); } .pa-c1 { z-index: 3; transform: translate3d(0, 0, 0); } .pa-c2 { z-index: 2; transform: translate3d(9%, -13%, -40px) scale(.92); } .pa-c3 { z-index: 1; transform: translate3d(18%, -26%, -80px) scale(.84); } .pa-c2 img, .pa-c3 img { filter: saturate(.7); } .pa-c2::after { background: linear-gradient(180deg, rgba(179,186,255,.5), rgba(238,240,255,.42)); } .pa-c3::after { background: linear-gradient(180deg, rgba(179,186,255,.66), rgba(238,240,255,.62)); } @media (hover: hover) { .prog-tile:hover .pa-mazo { transform: translateY(-42%) rotateY(-4deg) rotateX(0deg); } .prog-tile:hover .pa-c1 { transform: translate3d(-3%, 3%, 24px); } .prog-tile:hover .pa-c2 { transform: translate3d(13%, -15%, -40px) scale(.92); } .prog-tile:hover .pa-c3 { transform: translate3d(25%, -29%, -80px) scale(.84); } } @media (min-width: 761px) { .prog-tile:not(.destacada) .pa-mazo { left: 2%; width: 82%; } .prog-mosaico > .prog-tile:last-child:nth-child(2n):not(.destacada) .pa-mazo { left: 18%; width: 52%; } } @media (max-width: 760px) { .pa-pila { position: relative; top: auto; bottom: auto; right: auto; width: auto; margin: 36px 18px 0; perspective: none; } .pa-mazo, .prog-tile.destacada .pa-mazo { position: relative; left: auto; top: auto; width: 100%; transform: none; transform-style: flat; } .pa-carta { transform-origin: 50% 0; border-radius: 14px; } .pa-c2 { transform: translateY(-12px) scale(.94); } .pa-c3 { transform: translateY(-24px) scale(.88); } } @media (prefers-reduced-motion: reduce) { .pa-mazo, .pa-carta { transition: none; } } /* [CERT] 09-oct · Flecha para volver (en vez de las migas con nombres): botón redondo de vidrio, arriba a la izquierda */ .volver { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 0 14px; border-radius: 999px; color: var(--azul); text-decoration: none; border: 1px solid rgba(255,255,255,.75); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.82), rgba(255,255,255,.4)); box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -8px rgba(4,0,188,.25), 0 8px 18px -10px rgba(4,0,188,.5); transition: transform .2s, box-shadow .2s; } .volver:hover { transform: translateX(-2px); box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -8px rgba(4,0,188,.3), 0 10px 22px -10px rgba(4,0,188,.62); } @media (prefers-reduced-motion: reduce) { .volver { transition: none; } .volver:hover { transform: none; } } /* [CERT] 12-oct · Solo Mis programas, el programa, sus áreas y el mapa (pedido del dueño; probado en todo el campus y lo quiso solo aquí): menos espacio vacío a los lados y arriba, y la flecha de volver en el margen izquierdo, a la altura de la primera tarjeta, en vez de ocupar una fila propia. Donde no cabe en el margen (ventanas de menos de 1510 px de ancho), sigue arriba con menos espacio. */ .content:is([data-ruta="programas"], [data-ruta="programa"], [data-ruta="area"], [data-ruta="mapa"]) { max-width: 1320px; padding-top: 20px; } .content:is([data-ruta="programa"], [data-ruta="area"], [data-ruta="mapa"]) > .view > .volver { margin-bottom: 10px; } @media (min-width: 1510px) { .content:is([data-ruta="programa"], [data-ruta="area"], [data-ruta="mapa"]) > .view { position: relative; } .content:is([data-ruta="programa"], [data-ruta="area"], [data-ruta="mapa"]) > .view > .volver { position: absolute; left: -62px; top: 0; margin: 0; } } /* [CERT] 12-oct · La clase (donde están los videos) y el examen con la flecha igual que el programa: en el margen izquierdo, pegada arriba, a la altura del video (el dueño: «¿por qué donde están los videos sigue encima?»). Su contenido es más angosto (1180 px), así que la flecha cabe en el margen desde ventanas de 1360 px; en las más angostas sigue arriba, con menos espacio. Solo la flecha: la página no cambia. */ .content:is([data-ruta="leccion"], [data-ruta="examen"]) > .view > .volver { margin-bottom: 10px; } @media (min-width: 1360px) { .content:is([data-ruta="leccion"], [data-ruta="examen"]) > .view { position: relative; } .content:is([data-ruta="leccion"], [data-ruta="examen"]) > .view > .volver { position: absolute; left: -62px; top: 0; margin: 0; } } /* [CERT] 09-oct · Menú izquierdo desplegable en liquid glass: con el botón de la flecha se abre encima del contenido y muestra los nombres; se pliega tocando afuera, con Escape o al elegir una opción. En el celular sigue siendo el menú de la hamburguesa. */ .nav-desplegar { display: none; } @media (min-width: 901px) { .nav-desplegar { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; margin: 0 auto 6px; padding: 0; border-radius: 999px; cursor: pointer; color: var(--azul); border: 1px solid rgba(255,255,255,.75); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.85), rgba(255,255,255,.42)); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(4,0,188,.45); } .nav-desplegar:hover { color: var(--azul-brillante); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px rgba(4,0,188,.55); } .nav-desplegar .ic { transition: transform .25s; } .sidebar { transition: width .25s cubic-bezier(.2,.8,.2,1); } .app.menu-desplegado .sidebar { width: 252px; z-index: 70; align-items: stretch; } .app.menu-desplegado .nav-desplegar { margin: 0 14px 6px auto; } .app.menu-desplegado .nav-desplegar .ic { transform: rotate(180deg); } .app.menu-desplegado .brand { justify-content: flex-start; padding-left: 16px; } .app.menu-desplegado .nav-group { align-items: stretch; padding: 0 10px; } .app.menu-desplegado .nav-label { display: block; padding: 8px 12px 4px; font-size: 11px; color: var(--text-3); } .app.menu-desplegado .nav-item { width: 100%; justify-content: flex-start; padding: 0 14px; gap: 12px; } .app.menu-desplegado .sidebar .nav-txt { display: inline !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: nowrap; font-size: 14.5px; font-weight: 550; color: inherit; animation: fadeIn .2s; } :root:not([data-theme="dark"]) .app.menu-desplegado .sidebar { background: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.74) 100%) !important; border-right: 1px solid rgba(255,255,255,.85) !important; box-shadow: inset -1px 0 0 rgba(0,18,253,.12), 26px 0 60px -28px rgba(4,0,188,.5) !important; } } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { @media (min-width: 901px) { .app.menu-desplegado .sidebar { -webkit-backdrop-filter: blur(12px) saturate(160%) !important; backdrop-filter: blur(12px) saturate(160%) !important; } } } /* [CERT] 09-oct: «Completada» de las portadas con un verde más oscuro (antes 4,4:1 sobre el blanco) */ .area-card.is-completada .area-estado { color: #0b6b4b; } /* [CERT] 09-oct · Cabecera del programa, 3.ª versión: tarjeta de vidrio con nombre, descripción completa, datos, accesos y avance grande; debajo dos tarjetas de vidrio con espacio para leer todo (sin «…»). */ .pg-hero.card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 34px; align-items: center; padding: 28px 34px; margin-bottom: 18px; } .pg-etq { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .pg-hero .page-title { margin: 6px 0 8px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; } .pg-hero .pg-desc { display: block; -webkit-line-clamp: unset; overflow: visible; max-width: 72ch; margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); } .pg-datos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 14.5px; color: var(--text-2); } .pg-datos span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .pg-datos .ic { color: var(--azul); } .pg-hero .pg-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .pg-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--azul); text-decoration: none; border: 1px solid rgba(255,255,255,.78); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.88), rgba(255,255,255,.46)); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -9px rgba(4,0,188,.45); transition: transform .2s, box-shadow .2s; } .pg-pill:hover { color: var(--azul-brillante); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 9px 18px -9px rgba(4,0,188,.55); text-decoration: none; } /* [CERT] 12-oct · Cabecera del programa más llamativa (el dueño: «necesito que sea mejor», sin propuestas): la etiqueta va en una pastilla de vidrio, el título lleva un degradado de la marca (oscuro → azul, línea por línea) y los datos pasan de una línea gris a cifras grandes en Bebas Neue dentro de pastillas de vidrio. */ .pg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); border: 1px solid rgba(255,255,255,.8); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.9), rgba(255,255,255,.5)); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -9px rgba(4,0,188,.45); } .pg-hero .page-title { margin: 14px 0 8px; } .pg-titulo-grad { background: linear-gradient(95deg, #11111a 8%, #0400bc 72%, #0012fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .pg-cifras { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .pg-cifra { display: grid; align-content: start; gap: 3px; min-width: 112px; padding: 10px 16px 11px; border-radius: 16px; border: 1px solid rgba(255,255,255,.8); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.88), rgba(255,255,255,.42)); box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -8px rgba(4,0,188,.18), 0 8px 18px -12px rgba(4,0,188,.45); } .pg-cifra b { display: flex; align-items: baseline; height: 32px; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: .5px; color: var(--azul); } .pg-cifra b small { font-size: 18px; color: var(--text-3); margin-left: 2px; } .pg-cifra b.pg-cifra-ic { align-items: center; } .pg-cifra-l { display: grid; overflow: hidden; font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; } .pg-cifra-a, .pg-cifra-b { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; transition: transform .22s var(--ease), opacity .22s var(--ease); } .pg-cifra-l .ic { color: var(--azul); } /* 2.ª vuelta (12-oct, «me gusta pero lo podemos mejorar más»): título más grande, pastillas con un toque lavanda que las separa de los accesos, una barrita de avance en cada una (tiempo que queda, clases y exámenes) y las cifras que suben desde 0 al entrar (app.js: contar). */ .pg-hero .page-title { font-size: clamp(28px, 2.7vw, 40px); } .pg-cifra { min-width: 124px; background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.94), rgba(236,238,255,.55)); } .pg-cifra-barra { display: block; height: 4px; margin-top: 7px; border-radius: 999px; background: rgba(4,0,188,.1); overflow: hidden; } .pg-cifra-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azul), var(--azul-brillante)); transform-origin: left center; animation: pgBarra .9s var(--ease) both; } @keyframes pgBarra { from { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .pg-cifra-barra i { animation: none; } } /* 3.ª vuelta (12-oct, «eso es solo en la carga de la pantalla»): las pastillas también responden al usarlas. Son enlaces (días → tus suscripciones, clases → el mapa, exámenes → el examen listo o el mapa); al pasar el ratón o con el teclado se elevan, aparece una flecha y la etiqueta cambia por un dato más (cuándo vence, cuántas clases faltan, si tienes un examen listo). */ a.pg-cifra { position: relative; color: inherit; text-decoration: none; transition: transform .22s var(--ease), box-shadow .22s var(--ease); } a.pg-cifra:hover, a.pg-cifra:focus-visible { text-decoration: none; transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -8px rgba(4,0,188,.22), 0 16px 28px -14px rgba(4,0,188,.55); } .pg-cifra-b { opacity: 0; transform: translateY(100%); color: var(--azul); } a.pg-cifra:hover .pg-cifra-a, a.pg-cifra:focus-visible .pg-cifra-a { opacity: 0; transform: translateY(-100%); } a.pg-cifra:hover .pg-cifra-b, a.pg-cifra:focus-visible .pg-cifra-b { opacity: 1; transform: none; } .pg-cifra-ir { position: absolute; top: 10px; right: 10px; display: inline-flex; color: var(--azul); opacity: 0; transform: translateX(-4px); transition: opacity .22s, transform .22s var(--ease); } a.pg-cifra:hover .pg-cifra-ir, a.pg-cifra:focus-visible .pg-cifra-ir { opacity: 1; transform: none; } a.pg-cifra:hover .pg-cifra-barra i, a.pg-cifra:focus-visible .pg-cifra-barra i { filter: brightness(1.25) saturate(1.1); } @media (prefers-reduced-motion: reduce) { a.pg-cifra, .pg-cifra-a, .pg-cifra-b, .pg-cifra-ir { transition: none; } a.pg-cifra:hover, a.pg-cifra:focus-visible { transform: none; } } @media (max-width: 560px) { .pg-cifra { flex: 1 1 0; min-width: 0; padding: 9px 10px 10px; } .pg-cifra b { height: 28px; font-size: 27px; } .pg-cifra b small { font-size: 16px; } .pg-cifra-l { font-size: 11.5px; white-space: normal; } .pg-cifra-l .ic { display: none; } /* en el celular el ícono partía «días restantes» en dos líneas */ } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root:not([data-theme="dark"]) .pg-chip, :root:not([data-theme="dark"]) .pg-cifra { background: #fff; } } @media (prefers-contrast: more) { .pg-titulo-grad { background: none; color: var(--negro); -webkit-text-fill-color: currentColor; } } /* [CERT] 12-oct · «Sigue donde quedaste» (propuesta A, la eligió el dueño): una sola tarjeta de vidrio a todo el ancho con la clase en grande, el avance del área y «A continuación». Sin la tarjeta de la próxima clase en vivo (ya está en Inicio y en Calendario). */ .pg-sigue.card { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 300px); gap: 26px; align-items: center; padding: 18px 20px 18px 18px; margin-bottom: 34px; } .pg-sigue.card:not(:has(.pg-sigue-luego)) { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); } .pg-sigue-vacio.card { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px 24px; } .pg-sigue-vacio b { font-size: 17px; line-height: 1.32; color: var(--negro); } .pg-sub { font-size: 13.5px; line-height: 1.45; color: var(--text-2); } .pg-sigue-portada { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; text-decoration: none; background: linear-gradient(135deg, #0400bc, #0012fd); box-shadow: 0 18px 32px -18px rgba(4,0,188,.65), 0 2px 6px -2px rgba(4,0,188,.25); } .pg-sigue-portada img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); } .pg-sigue-portada:hover img { transform: scale(1.03); } .pg-sigue-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #0400bc; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 10px 24px -8px rgba(4,0,188,.55), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .pg-sigue-play svg { margin-left: 3px; } .pg-sigue-chip { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(10,12,40,.42); border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .pg-sigue-txt { display: grid; min-width: 0; } .pg-sigue-titulo { margin: 6px 0 4px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--negro); } .pg-sigue-donde { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); } .pg-sigue-meta { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--text-3); } .pg-sigue-avance { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; max-width: 460px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); } .pg-sigue-avance > span:first-child { font-weight: 600; color: var(--text-2); } .pg-riel { grid-column: 1 / -1; display: block; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(4,0,188,.09); box-shadow: inset 0 1px 2px rgba(4,0,188,.12); } .pg-riel i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azul), var(--azul-brillante)); } .pg-sigue-acc { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; } .pg-sigue-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--azul); } .pg-sigue-luego { align-self: stretch; display: grid; align-content: start; gap: 10px; padding: 16px 16px 12px; border-radius: 18px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px -14px rgba(4,0,188,.3); } .pg-sigue-lista { list-style: none; margin: 0; padding: 0; display: grid; } .pg-sigue-lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; } .pg-sigue-lista li + li { border-top: 1px solid rgba(4,0,188,.07); } .pg-sigue-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--text-2); background: rgba(255,255,255,.75); border: 1px solid rgba(4,0,188,.1); } .pg-sigue-lt { display: grid; gap: 1px; min-width: 0; } .pg-sigue-lt b { font-size: 13.5px; line-height: 1.3; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pg-sigue-lt small { font-size: 12px; color: var(--text-3); } .pg-sigue-candado { display: inline-flex; color: var(--text-3); } .pg-sigue-lista .es-examen .pg-sigue-n { color: #0400bc; background: rgba(255,228,0,.55); border-color: rgba(255,228,0,.9); } .pg-sigue-lista .es-area .pg-sigue-n { color: var(--azul); } @media (max-width: 1100px) { .pg-sigue.card { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); } .pg-sigue-luego { grid-column: 1 / -1; } } @media (max-width: 980px) { .pg-hero.card { grid-template-columns: minmax(0, 1fr); padding: 24px; } } @media (max-width: 760px) { .pg-sigue.card, .pg-sigue.card:not(:has(.pg-sigue-luego)) { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; } .pg-sigue-titulo { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { .pg-pill, .pg-sigue-portada img { transition: none; } .pg-pill:hover, .pg-sigue-portada:hover img { transform: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .pg-sigue-luego { background: #fff; } .pg-sigue-play, .pg-sigue-chip { -webkit-backdrop-filter: none; backdrop-filter: none; } .pg-sigue-chip { background: rgba(10,12,40,.82); } } /* [CERT] 09-oct · Mapa de progreso (el de la plataforma actual, mejorado). En la cabecera del programa, en lugar del círculo: el avance grande y el camino en pequeño. En #/mapa/: el camino entero con un punto de vidrio por área, el panda donde vas y la meta al final; debajo, el área actual; al lado, el resumen. Receta de vidrio del campus, sin figuras de adorno. */ .pg-mapa { display: grid; gap: 10px; min-width: 0; } .pg-mapa-cab { display: flex; align-items: center; gap: 12px; } .pg-mapa-pct { font-family: var(--font-display); font-size: 64px; line-height: .8; letter-spacing: .5px; color: var(--azul); } .pg-mapa-pct small, .mp-pct small { font-size: .5em; margin-left: 2px; } .pg-mapa-txt { display: grid; gap: 3px; font-size: 13.5px; color: var(--text-2); } .pg-mapa-txt b { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .mm { position: relative; display: block; margin: 8px 4px 2px; color: inherit; text-decoration: none; cursor: pointer; } .mm:hover { text-decoration: none; } .mm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .mm-svg path, .mp-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .mm-base { stroke: rgba(255,255,255,.8); stroke-width: 13; } .mm-hecho { stroke: #0012fd; stroke-width: 5; } .mm-falta { stroke: rgba(4,0,188,.3); stroke-width: 4; stroke-dasharray: 0 9; } .mm-gold { stroke: #e0a526; stroke-width: 4; stroke-dasharray: 0 9; } .mm-p { position: absolute; display: grid; justify-items: center; gap: 5px; width: 33%; transform: translate(-50%, -15px); text-align: center; } .mm-p i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 400 16px/1 var(--font-display); color: var(--azul); border: 1px solid rgba(255,255,255,.95); background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.98), rgba(255,255,255,.6)); box-shadow: inset 0 1px 0 #fff, 0 6px 12px -6px rgba(4,0,188,.55); } .mm-p i b { font-weight: 400; } .mm-p small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--text-2); } .mm-p.is-hecha i { color: #fff; border-color: rgba(255,255,255,.5); background: linear-gradient(160deg, #4a57ff, #0012fd 55%, #0400bc); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px rgba(0,18,253,.8); } .mm-p.is-actual { transform: translate(-50%, -20px); } .mm-p.is-actual i { width: 40px; height: 40px; color: #11111a; border: 2px solid #fff; background: radial-gradient(120% 120% at 30% 20%, #fff7a8, #ffe400 60%, #f2c500); box-shadow: 0 0 0 5px rgba(255,228,0,.3), 0 8px 18px -6px rgba(150,110,0,.7); animation: mm-latido 2.4s ease-in-out infinite; } .mm-p.is-actual small { color: var(--negro); font-weight: 700; } .mm-p.is-bloqueada i { color: var(--text-3); } .mm-p.is-gold i { color: #6b4a00; border-color: rgba(255,244,214,.95); background: radial-gradient(120% 120% at 30% 20%, #fff1c4, #f6d365 55%, #e0a526); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px -6px rgba(224,165,38,.9); } .mm-p.is-gold small { color: #7a5600; } .pg-mapa-ver { justify-self: start; } @keyframes mm-latido { 50% { box-shadow: 0 0 0 9px rgba(255,228,0,.12), 0 8px 18px -6px rgba(150,110,0,.7); } } /* Página del mapa */ .mp-cab { margin-bottom: 20px; } .mp-cab .page-title { margin: 0; } .mp-cab p { margin: 6px 0 0; } .mp-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 22px; align-items: start; } .mp-col { display: grid; gap: 22px; min-width: 0; } .mp-mapa.card { position: relative; padding: 0; overflow: hidden; container-type: inline-size; } .mp-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .mp-borde { stroke: rgba(4,0,188,.1); stroke-width: 42; } .mp-base { stroke: rgba(255,255,255,.72); stroke-width: 36; } .mp-hecho-luz { stroke: rgba(0,18,253,.2); stroke-width: 24; } .mp-hecho { stroke: #0012fd; stroke-width: 9; } .mp-falta { stroke: rgba(4,0,188,.32); stroke-width: 7; stroke-dasharray: 0 17; } .mp-gold { stroke: #e0a526; stroke-width: 7; stroke-dasharray: 0 17; } /* cada punto es un ancla sin tamaño en el centro del círculo; el texto va al lado, hacia el centro del mapa (en .der, a la izquierda) */ .mp-p { position: absolute; z-index: 1; width: 0; height: 0; color: inherit; text-decoration: none; } .mp-p:hover { text-decoration: none; } .mp-med { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font: 400 36px/1 var(--font-display); color: var(--azul); border: 1.5px solid rgba(255,255,255,.95); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.98), rgba(255,255,255,.55) 62%, rgba(255,255,255,.4)); box-shadow: inset 0 2px 1px #fff, inset 0 -8px 14px -8px rgba(4,0,188,.28), 0 14px 26px -14px rgba(4,0,188,.65); transition: transform .25s, box-shadow .25s; } .mp-med b { font-weight: 400; } a.mp-p:hover .mp-med { transform: translateY(-3px) scale(1.04); } a.mp-p:focus-visible { outline: none; } a.mp-p:focus-visible .mp-med { box-shadow: 0 0 0 4px rgba(0,18,253,.5), 0 14px 26px -14px rgba(4,0,188,.65); } .mp-info { position: absolute; top: 0; left: 54px; width: min(330px, calc(64cqw - 64px)); display: grid; gap: 4px; justify-items: start; text-align: left; transform: translateY(-50%); } .mp-p.der .mp-info { left: auto; right: 54px; justify-items: end; text-align: right; } .mp-chip { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 4px 10px -6px rgba(4,0,188,.4); } .mp-info b { font-size: 14px; line-height: 1.3; color: var(--negro); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mp-clases { font-size: 12.5px; color: var(--text-3); } .mp-p.is-hecha .mp-med { color: #fff; border-color: rgba(255,255,255,.55); background: radial-gradient(120% 120% at 30% 18%, #6b76ff, #0012fd 55%, #0400bc); box-shadow: inset 0 2px 1px rgba(255,255,255,.5), 0 14px 28px -12px rgba(0,18,253,.85); } .mp-p.is-hecha .mp-chip { color: #0b6b4b; } .mp-p.is-actual .mp-info { left: 62px; } .mp-p.is-actual.der .mp-info { left: auto; right: 62px; } .mp-p.is-actual .mp-med { left: -46px; top: -46px; width: 92px; height: 92px; color: #11111a; border: 2px solid #fff; background: radial-gradient(120% 120% at 30% 18%, #fff8b8, #ffe400 58%, #f2c500); box-shadow: 0 0 0 8px rgba(255,228,0,.28), 0 18px 32px -14px rgba(150,110,0,.75); animation: mp-latido 2.6s ease-in-out infinite; } .mp-p.is-actual .mp-chip { color: #11111a; background: #ffe400; border-color: #fff3a0; } .mp-p.is-bloqueada .mp-med { color: var(--text-3); } .mp-p.is-gold .mp-med { color: #6b4a00; border-color: rgba(255,244,214,.95); background: radial-gradient(120% 120% at 30% 18%, #fff3cc, #f6d365 55%, #e0a526); box-shadow: inset 0 2px 1px rgba(255,255,255,.8), 0 14px 28px -12px rgba(224,165,38,.9); } .mp-p.is-gold .mp-chip, .mp-fin .mp-chip { color: #7a5600; background: rgba(255,244,214,.88); border-color: rgba(255,236,170,.95); } .mp-panda { position: absolute; top: -64px; right: 52px; width: 92px; height: 92px; max-width: none; pointer-events: none; animation: mp-pasito 2.8s ease-in-out infinite; } .mp-p.der .mp-panda { right: auto; left: 52px; } .mp-globo { position: absolute; top: -100px; right: 62px; white-space: nowrap; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: #ffe400; color: #11111a; font-size: 12.5px; font-weight: 700; box-shadow: 0 10px 20px -10px rgba(0,0,0,.45); } .mp-p.der .mp-globo { right: auto; left: 62px; border-radius: 14px 14px 14px 4px; } .mp-fin .mp-info { top: 50px; left: 0; width: 240px; justify-items: center; text-align: center; transform: translateX(-50%); } .mp-fin .mp-med { color: #8a6200; border: 2px dashed rgba(224,165,38,.8); background: radial-gradient(120% 120% at 30% 18%, rgba(255,252,238,.98), rgba(255,243,210,.6)); } .mp-fin.is-logrado .mp-med { color: #6b4a00; border-style: solid; background: radial-gradient(120% 120% at 30% 18%, #fff3cc, #f6d365 55%, #e0a526); } @keyframes mp-latido { 50% { box-shadow: 0 0 0 14px rgba(255,228,0,.1), 0 18px 32px -14px rgba(150,110,0,.75); } } @keyframes mp-pasito { 50% { transform: translateY(-5px); } } .mp-actual.card { display: grid; gap: 14px; padding: 22px 24px; } .mp-actual-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .mp-actual-cab h2 { margin: 4px 0 0; font-size: 19px; line-height: 1.3; } .mp-actual-num { display: grid; justify-items: end; flex: none; text-align: right; } .mp-actual-num b { font-family: var(--font-display); font-weight: 400; font-size: 42px; line-height: .9; color: var(--azul); } .mp-actual-num span { font-size: 12.5px; color: var(--text-3); } .mp-actual p { margin: 0; } .mp-lista { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.34); } .mp-lista .lesson-row:first-child { border-top: 0; } .mp-lista .lesson-row > .grow { min-width: 0; } .mp-lista .lesson-row .ellipsis { display: block; } .mp-actual-pie { display: flex; flex-wrap: wrap; gap: 10px; } .mp-lado { display: grid; gap: 18px; position: sticky; top: 90px; } .mp-resumen.card { display: grid; justify-items: center; gap: 4px; padding: 24px; text-align: center; } .mp-pct { margin-top: 10px; font-family: var(--font-display); font-size: 92px; line-height: .82; letter-spacing: .5px; color: var(--azul); } .mp-pct-txt { font-size: 13px; color: var(--text-3); } .mp-datos { display: grid; gap: 8px; width: 100%; margin: 16px 0 0; padding: 0; list-style: none; text-align: left; } .mp-datos li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--text-2); background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.85); } .mp-datos .ic { flex: none; color: var(--azul); } .mp-datos b { color: var(--negro); } .mp-animo.card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; } .mp-animo img { flex: none; width: 72px; height: auto; } .mp-animo p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); } .mp-animo b { color: var(--azul); } :root:not([data-theme="dark"]) [data-ruta="mapa"] .card { position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,.65); background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); -webkit-backdrop-filter: none; backdrop-filter: none; } :root:not([data-theme="dark"]) [data-ruta="mapa"] .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :root:not([data-theme="dark"]) [data-ruta="mapa"] .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root:not([data-theme="dark"]) [data-ruta="mapa"] .card { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } @media (max-width: 980px) { .pg-mapa { max-width: 460px; } .mp-grid { grid-template-columns: minmax(0, 1fr); } .mp-lado { position: static; } } @media (max-width: 560px) { .mp-med { left: -32px; top: -32px; width: 64px; height: 64px; font-size: 30px; } .mp-p.is-actual .mp-med { left: -40px; top: -40px; width: 80px; height: 80px; } .mp-info { left: 44px; } .mp-p.der .mp-info { right: 44px; } .mp-p.is-actual .mp-info { left: 50px; } .mp-p.is-actual.der .mp-info { right: 50px; } .mp-fin .mp-info { top: 42px; left: 0; width: 220px; } .mp-panda { top: -36px; right: 42px; width: 58px; height: 58px; } .mp-p.der .mp-panda { left: 42px; } .mp-globo { display: none; } .mp-info b { font-size: 13px; -webkit-line-clamp: 3; } /* [CERT] 13-oct auditoría · serpentina de áreas en el celular: el nombre va entero (antes «Programa 4 - Comunicación Profesional para el», sin el final) y usa el ancho que queda hasta el borde; los puntitos de los módulos, más chicos, para que quepan entre el círculo y el cuadrito del examen */ .mp-mapa:not(.pm-full) .mp-p:not(.mp-fin) .mp-info { width: calc(72cqw - 52px); } .mp-mapa:not(.pm-full) .mp-p.is-actual .mp-info { width: calc(72cqw - 58px); } .mp-mapa:not(.pm-full) .mp-info b { -webkit-line-clamp: 6; } .mp-mapa:not(.pm-full) .pmB-piedra::before { width: 11px; height: 11px; border-width: 1.5px; } .mp-mapa:not(.pm-full) .pmB-piedra.is-actual::before { width: 14px; height: 14px; } .mp-mapa:not(.pm-full) .pmB-piedra.denso::before { width: 9px; height: 9px; } .mp-mapa:not(.pm-full) .pmB-piedra.denso.is-actual::before { width: 12px; height: 12px; } .mp-chip { padding: 2px 8px; font-size: 10.5px; white-space: nowrap; } .mp-actual.card { padding: 18px; } .mp-actual-cab { flex-direction: column; } .mp-actual-num { justify-items: start; text-align: left; } } @media (prefers-reduced-motion: reduce) { .mm-p.is-actual i, .mp-p.is-actual .mp-med, .mp-panda { animation: none; } .mp-med { transition: none; } a.mp-p:hover .mp-med { transform: none; } } /* [CERT] 09-oct · Enlaces de la clase (contrato 0.14.0): misma fila que el material, con la descripción y el sitio debajo del título */ .resource.enlace { align-items: flex-start; } .resource.enlace > .res-ic, .resource.enlace > .ic { margin-top: 2px; } .enlace-txt { display: grid; gap: 2px; min-width: 0; } .enlace-t { font-weight: 600; color: var(--negro); } .enlace-d { font-size: 13px; line-height: 1.45; color: var(--text-2); } .enlace-dom { font-size: 12px; color: var(--text-3); } /* [CERT] 09-oct · Regla de oro (vidrio líquido en todo): la página de la clase con la misma receta que las demás pantallas, solo en claro. Temario de la derecha, cabecera de lectura/recurso y filas de material y enlaces; sin desenfoque. */ :root:not([data-theme="dark"]) [data-ruta="leccion"] .card { position: relative; isolation: isolate; border: 1px solid rgba(255,255,255,.65); background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); -webkit-backdrop-filter: none; backdrop-filter: none; } :root:not([data-theme="dark"]) [data-ruta="leccion"] .card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :root:not([data-theme="dark"]) [data-ruta="leccion"] .syllabus-head { border-bottom-color: rgba(255,255,255,.7); } :root:not([data-theme="dark"]) [data-ruta="leccion"] .resource, :root:not([data-theme="dark"]) [data-ruta="leccion"] .reading-hero { border: 1px solid rgba(255,255,255,.75); border-right-color: rgba(0,18,253,.14); border-bottom-color: rgba(0,18,253,.2); background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,255,255,.18)); box-shadow: inset 0 1px 1px #fff, inset 0 0 24px rgba(255,255,255,.25), 0 2px 8px rgba(4,0,188,.06), 0 20px 40px -28px rgba(4,0,188,.5); } :root:not([data-theme="dark"]) [data-ruta="leccion"] .reading-hero { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 52%), linear-gradient(145deg, color-mix(in srgb, var(--pc, #0012fd) 12%, rgba(255,255,255,.5)), rgba(255,255,255,.18)); } :root:not([data-theme="dark"]) [data-ruta="leccion"] .resource:hover { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.3)); } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root:not([data-theme="dark"]) [data-ruta="leccion"] .card, :root:not([data-theme="dark"]) [data-ruta="leccion"] .resource, :root:not([data-theme="dark"]) [data-ruta="leccion"] .reading-hero { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* [CERT] 09-oct · Ayuda: grilla de canales (correo, WhatsApp, horario, chat con IA), botón flotante y ventanita de chat. Usa los tokens del tema, así que funciona igual en claro y en oscuro; los ajustes propios del oscuro van al final. */ .ayuda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 24px; } .ayuda-tarjeta.card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px; } .ayuda-tarjeta .card-title { margin: 0; } .ayuda-tarjeta p { margin: 0; } .ayuda-tarjeta .btn { margin-top: auto; } .ayuda-tarjeta p + .btn { margin-top: auto; } @media (max-width: 560px) { .ayuda-tarjeta .btn { width: 100%; justify-content: center; } } .ayuda-fab { position: fixed; z-index: 45; right: 24px; bottom: 24px; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--primary); color: var(--primary-contrast); box-shadow: 0 14px 30px -12px rgba(4,0,188,.55); cursor: pointer; opacity: .92; transition: transform .2s var(--ease, ease), opacity .2s; } .ayuda-fab:hover { opacity: 1; transform: translateY(-2px); } .ayuda-fab:focus-visible { outline: 3px solid var(--focus, var(--primary)); outline-offset: 3px; } @media (max-width: 900px) { .ayuda-fab { right: 16px; bottom: calc(62px + 16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; } } .chat-caja .pf-t { display: flex; align-items: center; gap: 8px; font-size: 18px; } .chat-msgs { display: flex; flex-direction: column; gap: 8px; min-height: 180px; max-height: min(46vh, 360px); overflow-y: auto; padding: 4px 2px; } .chat-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .chat-msg.bot { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 6px; } .chat-msg.yo { align-self: flex-end; background: var(--primary); color: var(--primary-contrast); border-bottom-right-radius: 6px; } .chat-faq { display: grid; gap: 2px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); } .chat-faq b { font-size: 13.5px; } .chat-faq span { font-size: 13px; color: var(--text-2); } .chat-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .chat-form { display: flex; gap: 8px; } .chat-form .pf-in { flex: 1; min-width: 0; } .chat-form .btn { flex: none; min-width: 48px; justify-content: center; } :root[data-theme="dark"] .ayuda-fab { background: #6c78ff; color: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); } :root[data-theme="dark"] .chat-msg.bot { background: rgba(255,255,255,.07); color: var(--text); } :root[data-theme="dark"] .chat-msg.yo { background: #4b56e8; color: #fff; } :root[data-theme="dark"] .chat-faq { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); } /* ===== Comunidad: feed estilo X/Threads (.cm-*) — usa solo variables del tema, sirve en claro y oscuro ===== */ .cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); align-items: start; min-width: 0; } .cm-feed.card { padding: 0; overflow: hidden; min-width: 0; } .cm-side { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); min-width: 0; } .cm-rules ul { margin: var(--s-3) 0 0; padding-left: 18px; } .cm-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); } .cm-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 8px 12px; font-weight: 600; font-size: var(--fs-base); color: var(--text-3); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .cm-tab:hover { background: var(--surface-2); color: var(--text); } .cm-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); } .cm-tab:focus-visible, .cm-act:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .cm-note { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); } .cm-note .ic { flex: none; } .cm-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); } .cm-rail { display: flex; flex-direction: column; align-items: center; min-width: 0; } .has-thread > .cm-rail::after { content: ""; flex: 1; width: 2px; min-height: 12px; margin-top: 6px; border-radius: 2px; background: var(--border-strong); } .cm-body { min-width: 0; } .cm-compose { padding: 14px var(--s-4); border-bottom: 1px solid var(--border); } .cm-post { padding: 14px var(--s-4) 6px; } .cm-post + .cm-post { border-top: 1px solid var(--border); } .cm-thread { position: relative; padding-bottom: 4px; } .cm-thread::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 18px; width: 2px; border-radius: 2px; background: var(--border-strong); } .cm-thread .cm-reply { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin-left: 52px; padding-top: var(--s-2); } .cm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; line-height: 1.35; } .cm-name { font-weight: 700; color: var(--text); overflow-wrap: anywhere; } .cm-you { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-full); background: var(--primary-soft); color: var(--primary); } .cm-time { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; } .cm-follow { margin-left: auto; min-height: 28px; padding: 3px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-full); background: var(--text); color: var(--surface); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .cm-follow[aria-pressed="true"] { background: none; color: var(--text); } .cm-follow:hover { opacity: .85; } .cm-follow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .cm-text { margin: 4px 0 4px; color: var(--text); line-height: var(--lh); white-space: pre-wrap; overflow-wrap: anywhere; } .cm-acts { display: flex; flex-wrap: wrap; gap: 2px; margin-left: -8px; } .cm-act { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 0; border-radius: var(--r-full); background: none; color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .cm-act:hover { background: var(--surface-2); color: var(--text); } .cm-act[aria-expanded="true"] { color: var(--primary); } .cm-act.like:hover, .cm-act.like[aria-pressed="true"] { color: var(--danger); background: var(--danger-soft); } .cm-act.like[aria-pressed="true"] svg { fill: currentColor; } .cm-act.share:hover, .cm-act.share[aria-pressed="true"] { color: var(--success); background: var(--success-soft); } .cm-box { min-width: 0; } .cm-input { display: block; width: 100%; min-height: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); line-height: 1.5; resize: vertical; } .cm-input::placeholder { color: var(--text-3); } .cm-box-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); } .cm-count { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } .cm-count.warn { color: var(--warning); font-weight: 600; } @media (max-width: 900px) { .cm-layout { grid-template-columns: minmax(0, 1fr); } .cm-side { position: static; } } @media (max-width: 480px) { .cm-compose, .cm-post { padding-left: var(--s-3); padding-right: var(--s-3); } .cm-note { padding: var(--s-2) var(--s-3); } .cm-row { gap: 10px; } .cm-thread .cm-reply { margin-left: 34px; gap: 8px; } .cm-act { padding: 4px 8px; } } /* [CERT] 10-oct · Logros: vuelve la tarjeta de nivel (decisión del dueño), en liquid glass y sin el cuadro azul sólido. Misma receta que las demás pantallas: velo fino, brillo arriba a la izquierda, filo de luz con reflejo azul y grosor por dentro. */ .lg-nivel-cab .level-card { position: relative; isolation: isolate; flex-wrap: nowrap; gap: 18px; padding: 16px 24px 16px 18px; border-radius: 24px; } .lg-nivel-cab .level-card .grow { min-width: 0; display: grid; gap: 7px; } .lg-nivel-cab .level-card h3 { margin: 0; font: 400 28px/1 var(--font-display, "Bebas Neue", Impact, sans-serif); letter-spacing: .5px; color: var(--azul, #0400bc); } .lg-nivel-cab .level-card small.muted { font-size: 12.5px; } .lg-nivel-cab .level-badge { width: 74px; height: 74px; border-radius: 20px; } .lg-nivel-cab .level-badge b { font: 400 42px/1 var(--font-display, "Bebas Neue", Impact, sans-serif); letter-spacing: .5px; margin-top: 3px; } .lg-nivel-cab .progress { height: 10px; } :root:not([data-theme="dark"]) .lg-nivel-cab .level-card { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } :root:not([data-theme="dark"]) .lg-nivel-cab .level-card::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } :root:not([data-theme="dark"]) .lg-nivel-cab .level-badge { background: radial-gradient(110% 80% at 20% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%), linear-gradient(150deg, rgba(255,255,255,.72) 0%, rgba(232,235,255,.5) 55%, rgba(0,18,253,.14) 100%); color: var(--azul, #0400bc); box-shadow: inset 0 1px 1px #fff, inset 0 -10px 18px -14px rgba(4,0,188,.35), 0 0 0 1.5px rgba(0,18,253,.16), 0 14px 26px -16px rgba(4,0,188,.55); } :root:not([data-theme="dark"]) .lg-nivel-cab .level-badge small { background: rgba(255,255,255,.92); color: var(--azul, #0400bc); border-color: rgba(0,18,253,.18); } :root:not([data-theme="dark"]) .lg-nivel-cab .progress { background: rgba(4,0,188,.10); } @media (max-width: 600px) { .lg-nivel-cab .level-card { gap: 14px; padding: 14px 16px 14px 14px; } .lg-nivel-cab .level-badge { width: 60px; height: 60px; border-radius: 17px; } .lg-nivel-cab .level-badge b { font-size: 34px; } .lg-nivel-cab .level-card h3 { font-size: 24px; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root:not([data-theme="dark"]) .lg-nivel-cab .level-card { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* [CERT] 10-oct · Comunidad en liquid glass (decisión del dueño): el muro y las normas llevan el vidrio de las demás pantallas (se sumó [data-ruta="comunidad"] a los bloques de vidrio de arriba); por dentro, las franjas y los campos dejan de ser grises sólidos. */ :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-note { background: rgba(255,255,255,.34); border-bottom-color: rgba(4,0,188,.08); } :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-tabs, :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-compose { border-bottom-color: rgba(4,0,188,.08); } :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-post + .cm-post { border-top-color: rgba(4,0,188,.08); } :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-tab:hover, :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-act:hover:not(.like):not(.share) { background: rgba(255,255,255,.5); } :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-tab[aria-selected="true"] { border-bottom-color: var(--azul, #0400bc); } :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-input { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.8); box-shadow: inset 0 1px 2px rgba(4,0,188,.06); } :root:not([data-theme="dark"]) [data-ruta="comunidad"] .cm-input:focus { background: rgba(255,255,255,.88); } /* [CERT] 12-oct · Mapas de los programas con pocas áreas, uno distinto por programa (elegidos por el dueño): B «Paso a paso» en Empleabilidad, C «La subida y la ruta por tramos» en el Bono 600/15 y A «Serpentina de módulos» en Atención al Cliente (app.js: MAPA_ESTILO). La Certificación no cambia. Paleta de la página; el amarillo solo marca «aquí vas» y «En progreso». */ /* ---------- Común: paradas del mapa pequeño de B y C (mismo vidrio que el mapa pequeño de hoy) ---------- */ .pm-pt { position: absolute; z-index: 1; width: 0; height: 0; color: inherit; text-decoration: none; } .pm-pt:hover { text-decoration: none; } .pm-pt i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--font-display); color: var(--azul); border: 1px solid rgba(255,255,255,.95); background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.98), rgba(255,255,255,.6)); box-shadow: inset 0 1px 0 #fff, 0 6px 12px -6px rgba(4,0,188,.55); transition: transform .2s; } .pm-pt i b { font-weight: 400; } .pm-pt.is-hecha i { color: #fff; border-color: rgba(255,255,255,.5); background: linear-gradient(160deg, #4a57ff, #0012fd 55%, #0400bc); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px rgba(0,18,253,.8); } .pm-pt.is-actual i { left: -19px; top: -19px; width: 38px; height: 38px; color: #11111a; border: 2px solid #fff; background: radial-gradient(120% 120% at 30% 20%, #fff7a8, #ffe400 60%, #f2c500); box-shadow: 0 0 0 5px rgba(255,228,0,.3), 0 8px 18px -6px rgba(150,110,0,.7); animation: mm-latido 2.4s ease-in-out infinite; } .pm-pt.is-bloqueada i { color: var(--text-3); } .pm-pt small { position: absolute; left: 0; top: 19px; width: 86px; transform: translateX(-50%); text-align: center; font-size: 10.5px; line-height: 1.2; font-weight: 600; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pm-pt.arriba small { top: auto; bottom: 19px; } .pm-pt.is-actual small { top: 24px; color: var(--negro); font-weight: 700; } .pm-pt.is-actual.arriba small { top: auto; bottom: 24px; } .pm-meta i { color: var(--azul); border: 1.5px dashed rgba(108,120,255,.85); background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.98), rgba(238,240,255,.7)); box-shadow: 0 6px 12px -8px rgba(4,0,188,.5); } .pm-meta.is-logrado i { color: #fff; border-style: solid; border-color: rgba(255,255,255,.6); background: linear-gradient(160deg, #4a57ff, #0012fd 55%, #0400bc); } .pm-meta small { color: var(--text-3); } /* ---------- A · Serpentina de módulos (mapa pequeño): el nombre del módulo en 2 líneas y el área donde empieza ---------- */ .pm-A .mm-p small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.22; font-size: 11px; } .pm-A .mm-p small em { display: block; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6c78ff; } /* ---------- B · Paso a paso (mapa pequeño): la ola, con un paso por clase ---------- */ .mm.pmB { margin-top: 2px; } .pmB-falta { stroke: rgba(108,120,255,.45); stroke-width: 3; } .pmB-paso { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 1.5px solid rgba(108,120,255,.75); box-shadow: 0 2px 4px -1px rgba(4,0,188,.3); } .pmB-paso.is-hecha { background: #0012fd; border-color: rgba(255,255,255,.9); } .pmB-paso.is-actual { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #ffe400; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(255,228,0,.35); } .pmB-paso.is-bloqueada { border-color: rgba(108,120,255,.45); } /* ---------- C · La subida (mapa pequeño): cada parada se toca; el área debajo de su tramo; un globo con el módulo donde vas ---------- */ .mm.pmC-mini { cursor: default; margin-top: 4px; } a.pm-pt { cursor: pointer; } a.pm-pt:hover i { transform: translateY(-2px) scale(1.08); } a.pm-pt:focus-visible { outline: none; } a.pm-pt:focus-visible i { box-shadow: 0 0 0 3px rgba(0,18,253,.55), 0 6px 12px -6px rgba(4,0,188,.55); } .pmC-area-mini { position: absolute; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; padding-top: 5px; text-align: center; font-size: 10.5px; line-height: 1.2; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1.5px solid rgba(108,120,255,.35); } .pmC-area-mini b { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6c78ff; font-weight: 700; } .pmC-globo { position: absolute; z-index: 2; display: grid; gap: 1px; padding: 6px 11px 7px; border-radius: 12px; font-size: 11.5px; line-height: 1.25; font-weight: 600; color: var(--negro); white-space: nowrap; background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.96), rgba(255,255,255,.72)); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -12px rgba(4,0,188,.55); transform: translateY(calc(-100% - 44px)); pointer-events: none; } .pmC-globo b { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6c78ff; font-weight: 700; } .pmC-globo.izq { transform: translate(calc(-100% + 6px), calc(-100% - 28px)); border-radius: 12px 12px 4px 12px; } /* ---------- A y B · Mapa completo: la serpentina con un punto por módulo ---------- */ .pm-area { display: block; max-width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; color: #6c78ff; } .pm-full .mp-p.is-hecha .mp-chip { color: #0400bc; } .pm-full .mp-fin .mp-med { color: var(--azul); border: 2px dashed rgba(108,120,255,.75); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.98), rgba(238,240,255,.65)); } .pm-full .mp-fin .mp-chip { color: #0400bc; background: rgba(238,240,255,.92); border-color: #fff; } .pm-full .mp-fin.is-logrado .mp-med { color: #fff; border-style: solid; border-color: rgba(255,255,255,.55); background: radial-gradient(120% 120% at 30% 18%, #6b76ff, #0012fd 55%, #0400bc); } /* B · cada clase es un paso que se toca */ .mp-svg .pmB-falta { stroke: rgba(108,120,255,.4); stroke-width: 6; } .pmB-piedra { position: absolute; z-index: 1; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; } .pmB-piedra::before { content: ""; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(108,120,255,.8); background: radial-gradient(120% 120% at 30% 20%, #fff, rgba(238,240,255,.92)); box-shadow: 0 4px 10px -4px rgba(4,0,188,.5); transition: transform .2s; } .pmB-piedra.is-hecha::before { border-color: #fff; background: radial-gradient(120% 120% at 30% 20%, #6b76ff, #0012fd 60%, #0400bc); } .pmB-piedra.is-actual::before { width: 20px; height: 20px; border-color: #fff; background: radial-gradient(120% 120% at 30% 20%, #fff8b8, #ffe400 60%, #f2c500); box-shadow: 0 0 0 4px rgba(255,228,0,.3), 0 6px 12px -4px rgba(150,110,0,.6); } .pmB-piedra.is-bloqueada::before { border-color: rgba(108,120,255,.42); background: rgba(255,255,255,.8); box-shadow: none; } a.pmB-piedra:hover { text-decoration: none; } a.pmB-piedra:hover::before { transform: scale(1.3); } a.pmB-piedra:focus-visible { outline: 2px solid #0012fd; outline-offset: 0; } /* ---------- C · Mapa completo: ruta por tramos; cada módulo se abre ahí mismo ---------- */ .mp-mapa.card.pmC { height: auto; padding: 24px 24px 28px; } .pmC-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .pmC-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .pmC-base { stroke: rgba(255,255,255,.78); stroke-width: 26; } .pmC-hecho { stroke: #0012fd; stroke-width: 7; } .pmC-falta { stroke: rgba(4,0,188,.3); stroke-width: 5.5; stroke-dasharray: 0 13; } .pmC-tramo, .pmC-fin { position: relative; z-index: 1; } .pmC-tramo + .pmC-tramo { margin-top: 12px; } .pmC-tramo-cab { display: grid; gap: 3px; padding: 6px 0 10px 104px; } .pmC-tramo-cab h2 { margin: 0; font-size: 18px; line-height: 1.3; color: var(--negro); } .pmC-tramo-num { font-size: 12.5px; color: var(--text-3); } .pmC-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .pmC-boton { -webkit-appearance: none; appearance: none; border: 0; background: transparent; font: inherit; color: inherit; width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) 34px; align-items: center; gap: 16px; padding: 8px 10px 8px 0; text-align: left; cursor: pointer; border-radius: 20px; transition: background .2s; } .pmC-boton:hover { background: rgba(255,255,255,.3); } .pmC-boton:focus-visible { outline: 2px solid #0012fd; outline-offset: 2px; } .pmC-p.zz .pmC-boton, .pmC-fin.zz { padding-left: 44px; } .pmC-med { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 400 30px/1 var(--font-display); color: var(--azul); border: 1.5px solid rgba(255,255,255,.95); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.98), rgba(255,255,255,.55) 62%, rgba(255,255,255,.4)); box-shadow: inset 0 2px 1px #fff, inset 0 -8px 14px -8px rgba(4,0,188,.28), 0 14px 26px -14px rgba(4,0,188,.65); transition: transform .25s; } .pmC-med b { font-weight: 400; } .pmC-boton:hover .pmC-med { transform: translateY(-2px) scale(1.04); } .pmC-p.is-hecha .pmC-med { color: #fff; border-color: rgba(255,255,255,.55); background: radial-gradient(120% 120% at 30% 18%, #6b76ff, #0012fd 55%, #0400bc); box-shadow: inset 0 2px 1px rgba(255,255,255,.5), 0 14px 28px -12px rgba(0,18,253,.85); } .pmC-p.is-actual .pmC-med { color: #11111a; border: 2px solid #fff; background: radial-gradient(120% 120% at 30% 18%, #fff8b8, #ffe400 58%, #f2c500); box-shadow: 0 0 0 7px rgba(255,228,0,.26), 0 16px 28px -14px rgba(150,110,0,.75); animation: mp-latido 2.6s ease-in-out infinite; } .pmC-p.is-bloqueada .pmC-med { color: var(--text-3); } .pmC-txt { display: grid; gap: 4px; justify-items: start; min-width: 0; } .pmC-txt b { font-size: 15px; line-height: 1.3; color: var(--negro); } .pmC-p.is-hecha .mp-chip { color: #0400bc; } .pmC-p.is-actual .mp-chip { color: #11111a; background: #ffe400; border-color: #fff3a0; } .pmC-p.is-bloqueada .pmC-txt b { color: var(--text-2); } .pmC-chev { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--azul); background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -9px rgba(4,0,188,.45); transition: transform .25s; } .pmC-p.abierto .pmC-chev { transform: rotate(180deg); } .pmC-det { display: grid; gap: 12px; margin: 2px 0 14px 80px; } .pmC-det[hidden] { display: none; } .pmC-p.zz .pmC-det { margin-left: 124px; } .pmC-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; } .pmC-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--azul); } .pmC-nota { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text-2); } .pmC-fin { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding-top: 16px; } .pmC-fin .pmC-med { color: var(--azul); border: 2px dashed rgba(108,120,255,.75); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.98), rgba(238,240,255,.6)); box-shadow: none; } .pmC-fin.is-logrado .pmC-med { color: #fff; border-style: solid; border-color: rgba(255,255,255,.55); background: radial-gradient(120% 120% at 30% 18%, #6b76ff, #0012fd 55%, #0400bc); } .pmC-fin .mp-chip { color: #0400bc; background: rgba(238,240,255,.92); border-color: #fff; } @media (max-width: 560px) { .mp-mapa.card.pmC { padding: 18px 14px 22px; } .pmC-boton { grid-template-columns: 52px minmax(0, 1fr) 30px; gap: 12px; padding-right: 4px; } .pmC-med { width: 52px; height: 52px; font-size: 25px; } .pmC-p.zz .pmC-boton, .pmC-fin.zz { padding-left: 24px; } .pmC-tramo-cab { padding-left: 64px; } .pmC-tramo-cab h2 { font-size: 16.5px; } .pmC-det, .pmC-p.zz .pmC-det { margin-left: 64px; } .pmC-fin { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; } .pmC-chev { width: 30px; height: 30px; } .pmC-txt b { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .pm-pt.is-actual i, .pmC-p.is-actual .pmC-med { animation: none; } .pm-pt i, .pmC-med, .pmB-piedra::before, .pmC-chev { transition: none; } a.pm-pt:hover i, .pmC-boton:hover .pmC-med, a.pmB-piedra:hover::before { transform: none; } } /* [CERT] 12-oct · El examen de cada área como parada del camino en el mapa completo (app.js: exParada, examenC). Un cuadrado de vidrio redondeado (las áreas y los módulos son círculos): candado si está cerrado, azul brillante si está listo, ✓ si lo aprobaste. */ .mp-ex { position: absolute; z-index: 1; width: 0; height: 0; color: inherit; text-decoration: none; } .mp-ex:hover { text-decoration: none; } .mp-ex-med { position: absolute; left: -21px; top: -21px; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--text-3); border: 1.5px solid rgba(255,255,255,.95); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.98), rgba(238,240,255,.7) 62%, rgba(238,240,255,.5)); box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -6px rgba(4,0,188,.26), 0 10px 20px -10px rgba(4,0,188,.6); transition: transform .25s, box-shadow .25s; } a.mp-ex:hover .mp-ex-med { transform: translateY(-2px) scale(1.06); } a.mp-ex:focus-visible { outline: none; } a.mp-ex:focus-visible .mp-ex-med { box-shadow: 0 0 0 4px rgba(0,18,253,.45), 0 10px 20px -10px rgba(4,0,188,.6); } .mp-ex-txt { position: absolute; top: 0; left: 30px; display: grid; gap: 1px; width: max-content; max-width: min(220px, calc(46cqw - 40px)); padding: 6px 11px; border-radius: 12px; transform: translateY(-50%); font-size: 12.5px; line-height: 1.3; color: var(--text-2); background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 6px 14px -8px rgba(4,0,188,.45); } .mp-ex.der .mp-ex-txt { left: auto; right: 30px; text-align: right; } .mp-ex-txt b { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .mp-ex.is-listo .mp-ex-med, .mp-ex.is-ok .mp-ex-med, .pmC-ex.is-ex-listo .pmC-med, .pmC-ex.is-ex-ok .pmC-med { color: #fff; border-color: rgba(255,255,255,.6); background: radial-gradient(120% 120% at 30% 18%, #6b76ff, #0012fd 55%, #0400bc); box-shadow: inset 0 2px 1px rgba(255,255,255,.5), 0 12px 24px -10px rgba(0,18,253,.85); } .mp-ex.is-listo .mp-ex-med { animation: mp-ex-listo 2.4s ease-in-out infinite; } @keyframes mp-ex-listo { 50% { box-shadow: inset 0 2px 1px rgba(255,255,255,.5), 0 0 0 9px rgba(108,120,255,.22), 0 12px 24px -10px rgba(0,18,253,.85); } } .mp-ex.is-listo .mp-ex-txt span, .mp-ex.is-ok .mp-ex-txt span { color: #0400bc; font-weight: 600; } .mp-ex.is-mal .mp-ex-med, .pmC-ex.is-ex-mal .pmC-med { color: #0400bc; border: 1.5px solid rgba(108,120,255,.7); } .mp-ex.is-bloq .mp-ex-med { border-style: dashed; border-color: rgba(108,120,255,.55); } /* en la ruta por tramos (C): la última parada del tramo, un poco más adentro y con la medalla cuadrada */ .pmC-ex .pmC-boton { padding-left: 22px; text-decoration: none; } .pmC-ex .pmC-med { width: 52px; height: 52px; margin: 6px; border-radius: 16px; } .pmC-ex.is-ex-bloq .pmC-med { color: var(--text-3); border: 1.5px dashed rgba(108,120,255,.55); } .pmC-ex.is-ex-listo .mp-chip, .pmC-ex.is-ex-ok .mp-chip { color: #0400bc; } @media (max-width: 640px) { .mp-ex-txt { max-width: calc(50cqw - 34px); font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { .mp-ex.is-listo .mp-ex-med { animation: none; } .mp-ex-med { transition: none; } a.mp-ex:hover .mp-ex-med { transform: none; } } /* [CERT] 12-oct · Portadas «Plano técnico» en el campus (portadas-plano.css trae el estilo base; aquí, cómo encaja en cada lugar). El estado va arriba a la derecha de la portada; «En progreso» sigue en amarillo, como en todo el campus. */ .plano-pastilla--progreso { color: #11111a; background: #ffe400; border-color: #ffe400; } .plano__dib { transition: transform .45s cubic-bezier(.2,.8,.2,1); transform-origin: 75% 50%; } /* áreas del programa */ .area-card.con-plano { --plano-radio: 20px; } .area-card.con-plano .plano { position: absolute; inset: 0; height: 100%; } .area-card.con-plano .area-velo, .area-card.con-plano .area-estado { display: none; } .area-card.con-plano.is-bloqueada .plano__dib, .area-card.con-plano.is-gold .plano__dib { opacity: .55; } .area-card.con-plano .area-barra { z-index: 3; background: rgba(255,255,255,.14); } .area-card.con-plano.is-completada .area-barra i { background: #b3baff; } @media (hover: hover) { .area-card.con-plano:hover .plano__dib { transform: scale(1.035); } } /* página del área, pila de Mis programas y «Sigue donde quedaste» */ .area-cab-img .plano { --plano-radio: 22px; position: absolute; inset: 0; height: 100%; } .pa-carta .plano { --plano-radio: 16px; position: absolute; inset: 0; height: 100%; } .pa-c2 .plano, .pa-c3 .plano { filter: saturate(.75); } .pg-sigue-portada .plano { --plano-radio: 16px; position: absolute; inset: 0; height: 100%; } .pg-sigue-portada:hover .plano__dib { transform: scale(1.035); } /* Inicio: la portada llena el fondo de la tarjeta principal, como la foto de antes, con el mismo velo blanco a la izquierda */ .in3-mision-img.con-plano .plano { position: absolute; inset: 0; --plano-radio: 0px; } .in3-mision-img.con-plano .plano__bloque, .in3-mision-img.con-plano .plano__marca { display: none; } /* la tarjeta ya dice la clase y el área: solo el dibujo */ /* [CERT] 12-oct · 2.ª vuelta de portadas (el dueño: «no se diferencian los bloqueados, la Zona Gold está muy azul, recuerda el liquid glass»). Zona Gold: el mismo plano en noche profunda con líneas y brillo dorados (el dorado del sello de certificación, solo aquí). Bloqueadas: el dibujo queda esmerilado detrás de un candado de vidrio líquido; el título y el estado se siguen leyendo. */ .plano.plano--oro { --plano-lav: #e0a526; --plano-lav-c: #f6d365; } .plano.plano--oro .plano__lienzo { background: radial-gradient(62% 78% at 82% 24%, rgba(246,211,101,.26) 0%, rgba(246,211,101,0) 72%), linear-gradient(to bottom left, #2a2c7a 0%, #121452 52%, #0b0c1d 100%); } .plano.plano--oro .plano__lienzo::after { box-shadow: inset 0 0 0 1px rgba(246,211,101,.42), inset 0 1px 0 rgba(255,244,214,.35); } .plano-pastilla { -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px rgba(0,0,0,.45); } .plano-pastilla--completada { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(4,0,188,.5); } .plano-pastilla--oro { color: #3b2a00; background: linear-gradient(135deg, rgba(255,240,190,.92), rgba(246,211,101,.88) 55%, rgba(224,165,38,.88)); border-color: rgba(255,244,214,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px -8px rgba(160,110,0,.7); } .area-card.con-plano.is-bloqueada .plano__dib, .area-card.con-plano.is-gold .plano__dib { opacity: .5; filter: blur(1.4px); } .area-candado { position: absolute; z-index: 3; right: 22%; top: 50%; width: 60px; height: 60px; transform: translate(50%, -50%); display: grid; place-items: center; border-radius: 50%; color: #fff; pointer-events: none; background: radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.5), rgba(255,255,255,.14) 60%, rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.65); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -8px 14px -8px rgba(4,0,188,.35), 0 14px 28px -12px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .area-card.is-gold .area-candado { color: #fff3cc; border-color: rgba(255,236,170,.8); background: radial-gradient(120% 120% at 28% 18%, rgba(255,240,190,.5), rgba(246,211,101,.2) 60%, rgba(224,165,38,.16)); box-shadow: inset 0 1px 1px rgba(255,248,220,.9), 0 14px 28px -12px rgba(120,80,0,.6); } @media (max-width: 640px) { .area-candado { width: 48px; height: 48px; } } /* mapas: el área bloqueada es vidrio esmerilado con el borde punteado (antes se confundía con las abiertas y con los exámenes cerrados) */ .mp-p.is-bloqueada .mp-med { color: #6c78ff; border: 1.5px dashed rgba(108,120,255,.6); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.72), rgba(226,229,255,.42) 62%, rgba(214,218,255,.32)); -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%); } .mp-p.is-bloqueada .mp-info b { color: var(--text-2); } .mp-p.is-bloqueada .mp-chip { color: var(--text-3); background: rgba(238,240,255,.72); } .mm-p.is-bloqueada i { border: 1.5px dashed rgba(108,120,255,.6); background: rgba(238,240,255,.6); color: #6c78ff; } /* exámenes de la Zona Gold, en dorado; el examen cerrado es solo el cuadrito (el texto sale al pasar el ratón) */ .mp-ex.is-oro .mp-ex-med { color: #8a6200; border: 1.5px dashed rgba(224,165,38,.8); background: radial-gradient(120% 120% at 30% 18%, rgba(255,252,238,.98), rgba(255,243,210,.66)); } .mp-ex.is-oro.is-listo .mp-ex-med, .mp-ex.is-oro.is-ok .mp-ex-med { color: #3b2a00; border: 1.5px solid #fff3c4; background: radial-gradient(120% 120% at 30% 18%, #fff3cc, #f6d365 55%, #e0a526); } .mp-ex.is-oro .mp-ex-txt { background: rgba(255,248,226,.86); border-color: rgba(255,236,170,.95); } .mp-ex.is-oro .mp-ex-txt b { color: #7a5600; } .mp-ex.is-bloq .mp-ex-med { left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 10px; } .mp-ex.is-bloq .mp-ex-txt { opacity: 0; pointer-events: none; transition: opacity .2s; } .mp-ex.is-bloq:hover .mp-ex-txt, .mp-ex.is-bloq:focus-visible .mp-ex-txt { opacity: 1; } /* [CERT] 12-oct · Mapa de la Certificación, 2.ª vuelta («es muy grande; los bloqueados y la Zona Gold se pueden hacer mejor»): las áreas seguidas del mismo estado son UNA parada (app.js: paradasZoom). La parada de grupo se ve como una pila de medallas de vidrio; las bloqueadas, esmeriladas; la Zona Gold, más grande, dorada y con un brillo que respira, para que se note que es la meta especial. */ .mp-p.is-grupo .mp-med::before, .mp-p.is-grupo .mp-med::after { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 50%; border: inherit; background: inherit; box-shadow: 0 8px 16px -10px rgba(4,0,188,.5); } .mp-p.is-grupo .mp-med::before { transform: translate(9px, 7px) scale(.94); opacity: .75; } .mp-p.is-grupo .mp-med::after { transform: translate(17px, 13px) scale(.88); opacity: .45; } .mp-p.is-grupo.der .mp-med::before { transform: translate(-9px, 7px) scale(.94); } .mp-p.is-grupo.der .mp-med::after { transform: translate(-17px, 13px) scale(.88); } .mp-p.is-grupo .mp-clases { font-weight: 600; color: var(--text-2); } .mp-p.is-bloqueada .mp-clases { display: inline-flex; align-items: center; gap: 6px; } .mp-p.is-gold.is-grupo .mp-med, .mp-p.is-gold.is-gold:not(.is-hecha) .mp-med { animation: mp-oro 3.2s ease-in-out infinite; } .mp-p.is-gold.is-grupo .mp-med { left: -46px; top: -46px; width: 92px; height: 92px; } .mp-p.is-gold.is-grupo .mp-info { left: 62px; } .mp-p.is-gold.is-grupo.der .mp-info { left: auto; right: 62px; } .mp-p.is-gold .mp-info b { color: #5a3f00; } .mp-p.is-gold .mp-clases { color: #7a5600; } @keyframes mp-oro { 50% { box-shadow: inset 0 2px 1px rgba(255,255,255,.8), 0 0 0 10px rgba(246,211,101,.22), 0 14px 28px -12px rgba(224,165,38,.9); } } .mm-p.is-grupo i { box-shadow: 4px 4px 0 -1px rgba(255,255,255,.85), 4px 4px 0 0 rgba(108,120,255,.35), 8px 8px 0 -1px rgba(255,255,255,.7), 8px 8px 0 0 rgba(108,120,255,.25); } .mm-p.is-gold.is-grupo i { width: 36px; height: 36px; box-shadow: 0 0 0 5px rgba(246,211,101,.25), 0 6px 14px -6px rgba(160,110,0,.6); } .pm-zoom .mm-p small { -webkit-line-clamp: 2; } /* puntitos de los módulos en la serpentina de la Certificación: en las áreas con muchos módulos, más chicos para que no se peguen */ .pmB-piedra.denso::before { width: 11px; height: 11px; border-width: 1.5px; } .pmB-piedra.denso.is-actual::before { width: 15px; height: 15px; } /* la ola (B) también para la Certificación: áreas en grupo, bloqueadas y Zona Gold en las paradas pequeñas */ .pm-pt.is-bloqueada i, .pm-pt.is-gold.is-bloqueada i { border: 1.5px dashed rgba(108,120,255,.6); background: rgba(238,240,255,.66); color: #6c78ff; } .pm-pt.is-gold i { color: #6b4a00; border: 1.5px solid rgba(255,244,214,.95); background: radial-gradient(120% 120% at 30% 20%, #fff1c4, #f6d365 55%, #e0a526); box-shadow: 0 0 0 4px rgba(246,211,101,.22), 0 6px 12px -6px rgba(160,110,0,.6); } .pm-pt.is-gold small { color: #7a5600; } .pm-pt.is-grupo i { box-shadow: 4px 3px 0 -1px rgba(255,255,255,.9), 4px 3px 0 0 rgba(108,120,255,.35), 8px 6px 0 -1px rgba(255,255,255,.75), 8px 6px 0 0 rgba(108,120,255,.25); } .pm-pt.is-gold.is-grupo i { left: -17px; top: -17px; width: 34px; height: 34px; box-shadow: 0 0 0 5px rgba(246,211,101,.25), 0 6px 14px -6px rgba(160,110,0,.6); } .pm-pt.is-hecha.is-grupo i { box-shadow: 4px 3px 0 -1px #fff, 4px 3px 0 0 rgba(0,18,253,.45), 8px 6px 0 -1px #fff, 8px 6px 0 0 rgba(0,18,253,.3); } @media (prefers-reduced-motion: reduce) { .mp-p.is-gold .mp-med { animation: none; } } @media (prefers-reduced-motion: reduce) { .plano__dib { transition: none; } .area-card.con-plano:hover .plano__dib, .pg-sigue-portada:hover .plano__dib { transform: none; } } /* [CERT] 12-oct: campana de notificaciones mejorada (pedido del dueño: «que mejore la campana de las notificaciones»). Botón de vidrio con el número de avisos sin leer en azul de marca; la campana se mece una vez cuando hay avisos nuevos. Panel de vidrio con «Nuevas» y «Anteriores»: cada aviso con su ícono de color, su texto y la hora. En el celular, a todo el ancho. */ .icon-btn.campana { width: 42px; height: 42px; border-radius: 13px; color: #0400bc; border: 1px solid transparent; background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(238,240,255,.75)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.5) 45%, rgba(4,0,188,.18)) border-box; box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(4,0,188,.6); transition: background .18s, box-shadow .18s, color .18s; } .icon-btn.campana:hover { color: #0012fd; box-shadow: inset 0 1px 0 #fff, 0 10px 22px -12px rgba(4,0,188,.7); } .icon-btn.campana[aria-expanded="true"] { color: #0012fd; background: linear-gradient(150deg, #eef0ff, #dde1ff) padding-box, linear-gradient(135deg, #fff, rgba(108,120,255,.5)) border-box; } .icon-btn.campana .ic { transform-origin: 50% 8%; } .campana-num { position: absolute; top: -6px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; font: 700 11px/1 Poppins, system-ui, sans-serif; color: #fff; background: linear-gradient(135deg, #0012fd, #0400bc); border: 2px solid #fff; box-shadow: 0 5px 12px -3px rgba(0,18,253,.6); } /* Liquid glass del panel (el dueño: «recuerda el liquid glass, no lo implementaste en el desplegable»): velo fino para que se vean las formas de atrás, filo de luz de 2 px con reflejo azul abajo a la derecha, brillo y grano (los pone .pop), grosor y sombra. */ /* 2.ª vuelta («me gusta pero el texto se pierde un poco»): vidrio un poco más mate, nivel «normal» de Apple: más velo y más desenfoque para que lo de atrás quede como color suave y no compita con las letras. */ .pop.pop-capa.pop-campana { width: 392px; max-width: calc(100vw - 24px); padding: 0; border: 2px solid transparent; background: linear-gradient(150deg, rgba(255,255,255,.64), rgba(255,255,255,.42)) padding-box, linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 40%, rgba(255,255,255,.08) 62%, rgba(0,18,253,.42)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 6px rgba(4,0,188,.08), 0 30px 60px -30px rgba(4,0,188,.6); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .pop.pop-capa.pop-campana { -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); } } .cp-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px; } .cp-cab b { display: block; font-size: 16.5px; font-weight: 700; color: #121452; } .cp-cab small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-2); } .cp-leidas { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; color: #0400bc; font: 600 12.5px Poppins, system-ui, sans-serif; background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,.28)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.3) 50%, rgba(0,18,253,.3)) border-box; box-shadow: inset 0 -6px 12px -10px rgba(4,0,188,.25), 0 6px 14px -12px rgba(4,0,188,.6); } .cp-leidas:hover { background: linear-gradient(150deg, rgba(238,240,255,.9), rgba(238,240,255,.45)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.3) 50%, rgba(0,18,253,.4)) border-box; } .cp-lista { display: grid; gap: 6px; max-height: min(56vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 12px; } .cp-grupo { padding: 8px 6px 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0012fd; text-shadow: 0 1px 0 rgba(255,255,255,.7); } /* Cada aviso es una pieza de vidrio: velo que deja ver el panel, filo de luz y grosor; los nuevos con un tinte lavanda */ .cp-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 11px 12px; border-radius: 16px; border: 1px solid transparent; color: var(--text); text-decoration: none; background: linear-gradient(150deg, rgba(255,255,255,.66), rgba(255,255,255,.36)) padding-box, linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.22) 50%, rgba(0,18,253,.2)) border-box; box-shadow: inset 0 -10px 18px -14px rgba(4,0,188,.18), 0 10px 22px -20px rgba(4,0,188,.55); transition: background .15s, box-shadow .15s, transform .15s; } .cp-item.nuevo { background: linear-gradient(150deg, rgba(240,242,255,.86), rgba(238,240,255,.5)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.28) 50%, rgba(0,18,253,.34)) border-box; } .cp-item:hover { text-decoration: none; transform: translateY(-1px); background: linear-gradient(150deg, rgba(255,255,255,.8), rgba(255,255,255,.34)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.3) 50%, rgba(0,18,253,.38)) border-box; box-shadow: inset 0 -10px 18px -14px rgba(4,0,188,.22), 0 14px 26px -18px rgba(4,0,188,.6); } .cp-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0012fd, #0400bc); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px rgba(4,0,188,.7); } .cp-ic--achievement { background: linear-gradient(135deg, #8d97ff, #6c78ff); } .cp-ic--system { background: linear-gradient(135deg, #252a7a, #121452); color: #b3baff; } .cp-ic--community, .cp-ic--offer { background: #eef0ff; color: #0400bc; box-shadow: inset 0 0 0 1px rgba(4,0,188,.12); } .cp-txt { display: grid; gap: 2px; min-width: 0; } .cp-txt b { font-size: 14px; font-weight: 600; line-height: 1.3; color: #121452; } .cp-item:not(.nuevo) .cp-txt b { font-weight: 500; } .cp-cuerpo { font-size: 12.5px; line-height: 1.4; color: #2f3550; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cp-txt small { margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #4f5672; } .cp-cab small { color: #3d4459; } .cp-punto { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #0012fd; box-shadow: 0 0 0 4px rgba(0,18,253,.14); } .cp-vacio { display: grid; justify-items: center; gap: 6px; padding: 14px 24px 22px; text-align: center; } .cp-vacio-ic { width: 58px; height: 58px; margin-bottom: 4px; border-radius: 18px; display: grid; place-items: center; color: #0400bc; border: 1px solid transparent; background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(238,240,255,.3)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.3) 50%, rgba(0,18,253,.35)) border-box; box-shadow: inset 0 -10px 18px -14px rgba(4,0,188,.22), 0 12px 24px -16px rgba(4,0,188,.6); } .cp-vacio b { font-size: 15px; color: #121452; } .cp-vacio p { margin: 0; max-width: 260px; font-size: 13px; color: var(--text-2); } .pop-campana .pop-pie { padding: 12px 14px 14px; } .pop-campana .pop-pie .btn { gap: 8px; } @media (max-width: 600px) { .pop.pop-capa.pop-campana { left: 12px !important; right: 12px !important; width: auto; max-width: none; } .cp-lista { max-height: 58vh; } } @media (prefers-reduced-motion: no-preference) { .icon-btn.campana.con-avisos .ic { animation: campanaMece 1.1s ease-in-out .8s 1; } .icon-btn.campana:hover .ic { animation: campanaMece .9s ease-in-out 1; } .campana-num { animation: campanaNum .4s cubic-bezier(.3, 1.6, .5, 1) .5s both; } .cp-item { animation: cpEntra .28s ease both; animation-delay: calc(var(--i, 0) * 40ms); } } @keyframes campanaMece { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-13deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } } @keyframes campanaNum { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } @keyframes cpEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .pop.pop-capa.pop-campana { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* [CERT] 12-oct · 3.ª vuelta de bloqueadas y Zona Gold, como en la plataforma actual de la Certificación, que el dueño ya conoce (rechazó las dos versiones anteriores). Zona Gold: sección aparte al final, con su título «✦ ZONA GOLD ✦» entre rayas, el aviso de cuándo se abre y las tarjetas con borde amarillo que brilla y la etiqueta «✦ GOLD». Cerradas (Gold o normales): velo oscuro con un candado de vidrio y el motivo en una línea: «Se desbloquea al 50%» en amarillo y «Se abre al terminar la anterior» en blanco. */ .zg { margin-top: 36px; } .zg-cab { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; } .zg-cab i { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,214,0,0), rgba(255,200,0,.9)); } .zg-cab i:last-child { background: linear-gradient(90deg, rgba(255,200,0,.9), rgba(255,214,0,0)); } .zg-cab h2 { margin: 0; font: 800 15px/1 Poppins, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: #8a6a00; } .zg-aviso { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; padding: 13px 20px; border-radius: 16px; text-align: center; font-size: 13.5px; font-weight: 500; color: #5c4600; border: 1px solid transparent; background: linear-gradient(135deg, rgba(255,248,205,.8), rgba(255,236,150,.34)) padding-box, linear-gradient(135deg, #fff, rgba(255,214,0,.6)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -10px 18px -14px rgba(160,120,0,.3), 0 14px 30px -24px rgba(160,120,0,.7); } .zg-aviso .ic { flex: none; color: #b08600; } .area-card.is-oro { box-shadow: 0 0 0 2px rgba(255,214,0,.92), 0 0 26px rgba(255,214,0,.4), 0 22px 44px -28px rgba(4,0,188,.6); } .plano-pastilla--gold { color: #0b0d1c; background: linear-gradient(135deg, #ffe400, #ffd000); border-color: #ffe400; font-weight: 800; letter-spacing: .1em; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px -8px rgba(160,120,0,.8); } .area-cierre { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 0 4% 0 48%; text-align: center; pointer-events: none; background: linear-gradient(90deg, rgba(5,7,28,.16) 0%, rgba(5,7,28,.5) 58%); } @supports ((-webkit-backdrop-filter: grayscale(1)) or (backdrop-filter: grayscale(1))) { .area-cierre { -webkit-backdrop-filter: grayscale(.45) brightness(.85); backdrop-filter: grayscale(.45) brightness(.85); } } .area-cierre-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.6); background: radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.42), rgba(255,255,255,.12) 62%); box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 10px 22px -10px rgba(0,0,0,.6); } .area-cierre b { font-size: 11.5px; font-weight: 800; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .area-cierre.is-oro .area-cierre-ic { color: #ffe400; border-color: rgba(255,228,0,.65); background: radial-gradient(120% 120% at 28% 18%, rgba(255,240,150,.34), rgba(255,228,0,.12) 62%); } .area-cierre.is-oro b { color: #ffe400; } .area-card.con-plano.is-bloqueada .plano__dib, .area-card.con-plano.is-gold .plano__dib { opacity: 1; filter: none; } /* sin el dibujo esmerilado de la 2.ª vuelta: lo apaga el velo */ .area-cierre { padding-left: 52%; } .area-cierre b { max-width: 190px; text-wrap: balance; } .area-gold { position: absolute; z-index: 3; top: 5.6%; right: 3.2%; padding: 5px 10px; border-radius: 999px; pointer-events: none; font: 800 11px/1 Poppins, system-ui, sans-serif; letter-spacing: .1em; color: #0b0d1c; background: linear-gradient(135deg, #ffe400, #ffd000); border: 1px solid #ffe400; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px -8px rgba(160,120,0,.8); } @media (max-width: 640px) { .area-cierre { padding-left: 46%; } .area-cierre-ic { width: 40px; height: 40px; } .area-cierre b { font-size: 10.5px; } } /* [CERT] 13-oct · El XP se escribe, sin ícono, en todo el campus (el dueño: «quitar ese logo de xp, pon XP solo»). Ocupa el lugar del ícono (en círculos, listas y fichas): «XP» en Bebas, azul de la marca. */ .xp-txt { display: inline-grid; place-items: center; font-family: var(--font-display, 'Bebas Neue', Impact, sans-serif); font-weight: 400; font-size: 1.05em; letter-spacing: .05em; line-height: 1; color: var(--azul); } /* [CERT] 13-oct · La flecha de volver SIEMPRE a la izquierda, fuera de los cuadros (el dueño: «en todas partes esté a la izquierda y no encima de los cuadros»). Antes, en ventanas de menos de 1510 px (1360 px en la clase y el examen; la entrega, siempre) la flecha ocupaba su propia fila encima. Ahora, desde 901 px, donde no cabe en el margen la página deja una franja a la izquierda para la flecha, pegada arriba a la altura del primer cuadro. Con margen de sobra sigue en el margen, como estaba. En el celular (sin margen) sigue arriba. */ @media (min-width: 901px) and (max-width: 1509.98px) { .content:is([data-ruta="programa"], [data-ruta="area"], [data-ruta="mapa"]) > .view { position: relative; padding-left: 62px; } .content:is([data-ruta="programa"], [data-ruta="area"], [data-ruta="mapa"]) > .view > .volver { position: absolute; left: 0; top: 0; margin: 0; } } @media (min-width: 901px) and (max-width: 1359.98px) { .content:is([data-ruta="leccion"], [data-ruta="examen"]) > .view { position: relative; padding-left: 62px; } .content:is([data-ruta="leccion"], [data-ruta="examen"]) > .view > .volver { position: absolute; left: 0; top: 0; margin: 0; } } @media (min-width: 901px) { .content[data-ruta^="entrega"] > .view { position: relative; padding-left: 62px; } /* [CERT] 14-oct · ^= : también la actividad del módulo (#/entrega-modulo/...) */ .content[data-ruta^="entrega"] > .view > .volver { position: absolute; left: 0; top: 0; margin: 0; } } /* [CERT] 13-oct · Barra de arriba: «3.540 XP», el número y las siglas (sin insignia ni rayo), como pidió el dueño */ .g-item.xp .g-xp { margin-left: 3px; font-size: 15px; } /* juegos-extra.css */ /* Campus Remotos Academy — estilos de «Memoria de conceptos» y «Ruleta de premios» (juegos-extra.js). Archivo aparte de styles.css: reutiliza .partida, .partida-titulo, .volver, .energia, .pila, .fin-panda, .fin-premio, .fin-cifra, .fg y .figura-*. Todo lo propio lleva el prefijo jx-. Versión clara · paleta #FFE400 #0400BC #0012FD #CECECE #11111A · degradados que se funden · amarillo solo en detalles. */ .jx-raiz { display: block; } /* ---------- comunes ---------- */ .jx-accion { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 48px; } .jx-botones { gap: 10px; justify-content: center; } .jx-pistas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-family: var(--font-2); font-size: 13px; color: var(--text-2); } .jx-pistas li { display: inline-flex; align-items: center; gap: 8px; } .jx-pista-fig { position: relative; display: inline-block; flex: none; width: 12px; height: 12px; } .jx-pista-fig.t { width: 14px; } /* Confeti propio con las figuras de la marca */ .jx-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 200; } .jx-confeti i { position: fixed; width: 11px; height: 11px; animation: jx-volar 1.35s cubic-bezier(.15,.7,.3,1) forwards; } @keyframes jx-volar { 0% { transform: translate(-50%, -50%) rotate(0); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 260px)) rotate(var(--rot)); opacity: 0; } } /* ===================================================================== MEMORIA DE CONCEPTOS ===================================================================== */ .partida.jx-mem { max-width: 880px; gap: 12px; } .jx-marcador { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); } .jx-dato { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .jx-dato .ic { color: var(--azul); } .jx-dato b { font: 400 22px/1 var(--font-display); letter-spacing: .5px; color: var(--azul); padding-top: 2px; } .jx-ayuda { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); } .jx-ley { font-weight: 600; color: var(--negro); white-space: nowrap; } .jx-ley::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 5px 1px 0; vertical-align: middle; border-radius: 2px; background: var(--azul); } .jx-ley.d::before { border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 1px rgba(160,130,0,.35) inset; } /* Tablero: 4 columnas en PC, 3 en celular (2 si el espacio es mínimo). Medido sobre el propio tablero. */ .jx-tablero-caja { width: 100%; container-type: inline-size; } .jx-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* Carta: botón con dos caras que gira en 3D */ .jx-carta { --alto: 128px; --radio: 18px; position: relative; display: block; width: 100%; height: var(--alto); margin: 0; padding: 0; border: 0; border-radius: var(--radio); background: none; color: var(--negro); font: inherit; text-align: left; cursor: pointer; perspective: 1000px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .jx-carta:focus-visible { outline: 3px solid var(--azul-brillante); outline-offset: 3px; border-radius: calc(var(--radio) + 2px); } .jx-carta-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .jx-carta.volteada .jx-carta-in { transform: rotateY(180deg); } .jx-cara { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radio); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Dorso: degradado azul y las figuras de la marca (una grande translúcida + un detalle amarillo) */ .jx-dorso { background: linear-gradient(150deg, var(--azul) 0%, var(--azul-brillante) 62%, var(--jg-1, #5560ff) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 16px 30px -20px color-mix(in srgb, var(--jg-3, #0400bc) 85%, transparent); transition: filter .2s; } .jx-dorso .jx-g { background: rgba(255,255,255,.14); } .jx-dorso-0 .jx-g { width: 74%; aspect-ratio: 1; right: -22%; top: -32%; } .jx-dorso-0 .jx-p { width: 17%; aspect-ratio: 1; left: 13%; bottom: 15%; transform: rotate(14deg); } .jx-dorso-1 .jx-g { width: 64%; aspect-ratio: 1; left: -16%; bottom: -34%; transform: rotate(-16deg); } .jx-dorso-1 .jx-p { width: 19%; aspect-ratio: 1.1; right: 13%; top: 14%; } .jx-dorso-2 .jx-g { width: 72%; aspect-ratio: 1.1; right: -14%; bottom: -18%; transform: rotate(8deg); } .jx-dorso-2 .jx-p { width: 14%; aspect-ratio: 1; left: 14%; top: 15%; } .jx-carta:hover:not(.volteada) .jx-dorso { filter: brightness(1.12) saturate(1.05); } /* Frente: blanco que se funde, marca de tipo (cuadrado azul = concepto, círculo amarillo = significado) */ .jx-frente { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 14px; background: linear-gradient(165deg, #fff 0%, #fff 55%, var(--jg-papel, #f1f0ff) 100%); box-shadow: 0 1px 0 #fff inset, 0 0 0 1px color-mix(in srgb, var(--jg-3, #0400bc) 7%, transparent) inset, 0 16px 30px -22px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } .jx-tipo { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1.2 var(--font-2); letter-spacing: .07em; text-transform: uppercase; color: var(--azul); } .jx-tipo::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--azul); } .jx-tipo-d::before { border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 1px rgba(160,130,0,.35) inset; } .jx-texto { font-size: 13.5px; line-height: 1.32; color: var(--negro); overflow-wrap: anywhere; -webkit-hyphens: manual; hyphens: manual; } .jx-texto-c { font-size: 15.5px; font-weight: 700; line-height: 1.25; } .jx-texto.largo { font-size: 12.5px; } /* Pareja encontrada / no coinciden */ .jx-carta.hecha { cursor: default; } .jx-carta.hecha .jx-frente { background: linear-gradient(165deg, #f5fffa 0%, var(--success-soft) 100%); box-shadow: 0 0 0 2px rgba(18,128,92,.42) inset, 0 16px 30px -24px rgba(18,128,92,.7); } .jx-carta.hecha .jx-tipo { color: var(--success); } .jx-carta.fallo .jx-frente { box-shadow: 0 0 0 2px rgba(194,39,45,.42) inset, 0 16px 30px -24px rgba(194,39,45,.6); } .jx-sello { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center; padding-top: 1px; border-radius: 50%; background: var(--amarillo); color: var(--azul); font: 400 15px/1 var(--font-display); } @media (prefers-reduced-motion: no-preference) { .jx-carta.fallo { animation: jx-sacude .42s ease-in-out .32s; } .jx-carta.hecha { animation: jx-pop .5s cubic-bezier(.2,.8,.3,1.3) .3s; } } @media (prefers-reduced-motion: reduce) { .jx-carta-in, .jx-dorso { transition: none; } } @keyframes jx-sacude { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } } @keyframes jx-pop { 50% { scale: 1.05; } } /* Celular: 3 columnas con textos que se ajustan. La palabra «concepto/significado» se queda solo en su marca (la leyenda de arriba la explica) para que el tablero entero quepa en la pantalla. La marca va en la esquina, por encima de la primera línea, y el número de pareja cuelga de la esquina de la carta: en cartas de ~97 px (celular de 360) ninguno de los dos tapa letras de los textos largos. */ @container (max-width: 620px) { .jx-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .jx-carta:last-child:nth-child(3n + 1) { grid-column: 2; } .jx-carta { --alto: 100px; --radio: 14px; } .jx-frente { padding: 9px 7px 7px 8px; overflow: visible; } .jx-tipo { position: absolute; top: 3px; left: 5px; font-size: 0; letter-spacing: 0; } .jx-tipo::before { width: 6px; height: 6px; } .jx-texto { font-size: 11px; line-height: 1.22; } .jx-texto-c { font-size: 12.5px; line-height: 1.18; } .jx-texto.largo { font-size: 10.5px; line-height: 1.2; } .jx-sello { top: -5px; right: -5px; width: 19px; height: 19px; font-size: 13px; box-shadow: 0 0 0 2px #fff, 0 6px 12px -6px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } } @container (max-width: 299px) { .jx-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jx-carta:last-child:nth-child(3n + 1) { grid-column: auto; } } /* Pantalla final */ .jx-fin-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 14px; color: var(--text-2); } .jx-fin-datos span { display: inline-flex; align-items: center; gap: 6px; } .jx-fin-datos .ic { color: var(--azul); } .jx-fin-datos b { color: var(--negro); } @media (max-width: 640px) { .partida.jx-mem { padding: 18px 12px 20px; border-radius: 22px; } .jx-marcador { gap: 4px 12px; } .jx-dato b { font-size: 20px; } .jx-dato-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .jx-ayuda { font-size: 12.5px; } } /* ===================================================================== RULETA DE PREMIOS ===================================================================== */ .partida.jx-ruleta { max-width: 980px; container-type: inline-size; } .jx-ru-cuerpo { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 22px 30px; align-items: start; margin-top: 4px; } .jx-ru-juego { min-width: 0; display: grid; justify-items: center; gap: 14px; } @container (max-width: 760px) { .jx-ru-cuerpo { grid-template-columns: minmax(0, 1fr); } } /* Máquina: azul de marca con figuras, rodillos blancos que se funden arriba y abajo */ .jx-maquina { position: relative; isolation: isolate; overflow: hidden; width: min(100%, 440px); padding: 20px 28px; border-radius: 28px; background: linear-gradient(135deg, var(--azul) 0%, var(--azul-brillante) 72%, var(--jg-1, #3d4bff) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 26px 50px -30px color-mix(in srgb, var(--jg-3, #0400bc) 85%, transparent); } .jx-maq-deco i { z-index: -1; } .jx-maq-deco .jx-m1 { width: 200px; height: 200px; right: -70px; top: -96px; background: rgba(255,255,255,.1); } .jx-maq-deco .jx-m2 { width: 48px; height: 48px; left: -16px; bottom: -18px; } .jx-maq-deco .jx-m3 { width: 34px; height: 30px; right: 24%; bottom: -8px; transform: rotate(12deg); opacity: .85; } .jx-rodillos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .jx-rodillo { --celda: 88px; --asoma: 28px; position: relative; overflow: hidden; height: calc(var(--celda) + 2 * var(--asoma)); border-radius: 20px; background: linear-gradient(180deg, var(--jg-papel, #dfe2ff) 0%, #fff 32%, #fff 68%, var(--jg-papel, #dfe2ff) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 12px 22px -14px rgba(0,0,40,.55) inset; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%, #000 70%, rgba(0,0,0,.55) 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%, #000 70%, rgba(0,0,0,.55) 88%, transparent 100%); } .jx-tira { padding-top: var(--asoma); will-change: transform; } .jx-tira.quieta { transform: translateY(calc(var(--celda) * -1)); } .jx-celda { height: var(--celda); display: grid; place-items: center; } .jx-rodillo.gira .jx-celda { filter: blur(1.4px); } .jx-marca { position: absolute; z-index: 2; top: 50%; width: 12px; height: 18px; margin-top: -9px; background: var(--amarillo); } .jx-marca.izq { left: 9px; clip-path: polygon(0 0, 100% 50%, 0 100%); } .jx-marca.der { right: 9px; clip-path: polygon(100% 0, 0 50%, 100% 100%); } @media (prefers-reduced-motion: no-preference) { .jx-rodillo.frena { animation: jx-frena .45s ease-out; } .jx-maquina.gana { animation: jx-brillo 1.6s ease-out; } .jx-maquina.gana .jx-tira.quieta .jx-celda:nth-child(2) .jx-sim { animation: jx-salta .6s cubic-bezier(.2,.8,.3,1.4) both; } .jx-ganado.nuevo { animation: jx-entra .5s cubic-bezier(.2,.8,.3,1.25) both; } } @keyframes jx-frena { 35% { transform: translateY(4px); } } @keyframes jx-brillo { 0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 26px 50px -30px color-mix(in srgb, var(--jg-3, #0400bc) 85%, transparent); } 25% { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 0 0 4px rgba(255,228,0,.85), 0 0 46px 6px rgba(255,228,0,.45); } 60% { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 0 0 2px rgba(255,228,0,.5), 0 0 30px 2px rgba(255,228,0,.25); } } @keyframes jx-salta { 0% { scale: .7; } 60% { scale: 1.12; } 100% { scale: 1; } } @keyframes jx-entra { from { opacity: 0; transform: translateY(10px) scale(.96); } } /* Símbolos: figura de la marca + ícono; todo escala con --t */ .jx-sim { --t: 54px; display: grid; justify-items: center; align-content: center; gap: 5px; } .jx-sim b { font: 400 17px/1 var(--font-display); letter-spacing: .6px; color: var(--azul); white-space: nowrap; } .jx-fig { position: relative; display: grid; place-items: center; width: var(--t); height: var(--t); color: var(--amarillo); background: linear-gradient(145deg, var(--azul) 0%, var(--azul-brillante) 100%); box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--jg-3, #0400bc) 90%, transparent); } .jx-fig svg { width: calc(var(--t) * .48); height: calc(var(--t) * .48); fill: currentColor; } .jx-fig.c { border-radius: 50%; } .jx-fig.s { border-radius: 24%; } .jx-sim-xp100 .jx-fig { background: linear-gradient(145deg, var(--azul-brillante) 0%, var(--jg-1, #4452ff) 100%); } .jx-doble { display: flex; } .jx-doble svg { width: calc(var(--t) * .4); height: calc(var(--t) * .4); } .jx-doble svg + svg { margin-left: calc(var(--t) * -.16); } .jx-fig.t { align-items: end; padding-bottom: calc(var(--t) * .1); color: #fff; box-shadow: none; background: linear-gradient(170deg, var(--jg-1, #3d4bff) 0%, var(--azul-brillante) 45%, var(--azul) 100%); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .jx-x2 { font: 400 calc(var(--t) * .4)/1 var(--font-display); letter-spacing: .5px; } .jx-sim-protector .jx-fig { color: #fff; } .jx-sim-protector .jx-fig svg { fill: rgba(255,255,255,.16); } .jx-fig.mon { background: none; box-shadow: none; } .jx-moneda { position: absolute; inset: 7%; display: grid; place-items: center; border-radius: 50%; font: 400 calc(var(--t) * .44)/1 var(--font-display); font-style: normal; color: var(--azul); background: radial-gradient(circle at 34% 30%, #fff8b8 0%, #ffe400 48%, #ecc900 100%); box-shadow: 0 0 0 2px rgba(201,154,0,.45) inset, 0 0 0 5px rgba(255,255,255,.3) inset, 0 10px 16px -10px rgba(140,110,0,.9); } .jx-sim-m80 .jx-moneda { inset: 12%; } .jx-sim-m80 .jx-moneda.atras { transform: translate(-14%, -12%); filter: brightness(.94); color: transparent; } .jx-sim-m80 .jx-moneda:not(.atras) { transform: translate(12%, 10%); } .jx-fig.en { grid-auto-flow: column; gap: calc(var(--t) * .09); } .jx-pila { width: calc(var(--t) * .2); height: calc(var(--t) * .44); border-radius: calc(var(--t) * .07); background: var(--amarillo); box-shadow: 0 0 10px rgba(255,228,0,.55); } .jx-sim.mini { --t: 30px; gap: 0; } /* Resultado del giro */ .jx-resultado { width: 100%; display: grid; justify-items: center; } .jx-resultado:empty { display: none; } .jx-ganado { width: 100%; max-width: 440px; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 14px; border-radius: 20px; text-align: left; background: linear-gradient(120deg, #fff 0%, rgba(255,255,255,.88) 55%, color-mix(in srgb, var(--jg-papel, #eceaff) 85%, transparent) 100%); box-shadow: 0 1px 0 #fff inset, 0 18px 40px -28px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } .jx-ganado.viejo { opacity: .45; filter: saturate(.5); transition: opacity .2s, filter .2s; } .jx-ganado:focus { outline: none; } .jx-ganado:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .jx-ganado .jx-sim.mini { --t: 50px; } .jx-ganado-txt { min-width: 0; display: grid; gap: 3px; } .jx-ganaste { justify-self: start; padding: 4px 9px; border-radius: 999px; background: var(--amarillo); color: var(--negro); font: 600 10.5px/1 var(--font-2); letter-spacing: .07em; text-transform: uppercase; } .jx-ganado-txt b { font: 400 30px/1 var(--font-display); letter-spacing: .5px; color: var(--azul); } .jx-ganado-txt > span:last-child { font-size: 13px; line-height: 1.4; color: var(--text-2); } /* Premios guardados */ .jx-inventario { display: grid; justify-items: center; gap: 6px; } .jx-inventario:empty { display: none; } .jx-inv-t { margin: 0; font: 600 10.5px/1.2 var(--font-2); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); } .jx-inv { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .jx-inv li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: var(--text-2); background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--jg-papel, #eceaff) 85%, transparent)); box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } .jx-inv li .ic { color: var(--azul); } .jx-inv b { color: var(--negro); } .jx-x2-mini { font: 400 15px/1 var(--font-display); color: var(--azul); } /* Tabla de premios con su probabilidad real */ .jx-premios { width: 100%; padding: 18px 18px 14px; border-radius: 22px; text-align: left; background: linear-gradient(160deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 60%, color-mix(in srgb, var(--jg-papel, #eceaff) 55%, transparent) 100%); box-shadow: 0 1px 0 #fff inset, 0 18px 40px -30px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } .jx-premios-t { margin: 0 0 6px; font: 400 25px/1 var(--font-display); letter-spacing: .5px; color: var(--azul); } .jx-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; } .jx-tabla thead th { padding: 6px 0; text-align: left; font: 600 10.5px/1.2 var(--font-2); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); } .jx-tabla thead th:last-child { text-align: right; } .jx-tabla tbody th, .jx-tabla td { padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--jg-3, #0400bc) 7%, transparent); text-align: left; vertical-align: middle; font-weight: 600; } .jx-tabla-premio { display: inline-flex; align-items: center; gap: 10px; color: var(--negro); } .jx-prob { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .jx-barra { width: 70px; height: 6px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent); } .jx-barra i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--azul), var(--azul-brillante)); } .jx-prob b { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--azul); } .jx-nota { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-3); } /* Respaldo para navegadores sin consultas de contenedor (Safari < 16): las mismas reglas, por ancho de pantalla. */ @supports not (container-type: inline-size) { @media (max-width: 700px) { .jx-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .jx-carta:last-child:nth-child(3n + 1) { grid-column: 2; } .jx-carta { --alto: 100px; --radio: 14px; } .jx-frente { padding: 9px 7px 7px 8px; overflow: visible; } .jx-tipo { position: absolute; top: 3px; left: 5px; font-size: 0; letter-spacing: 0; } .jx-tipo::before { width: 6px; height: 6px; } .jx-texto { font-size: 11px; line-height: 1.22; } .jx-texto-c { font-size: 12.5px; line-height: 1.18; } .jx-texto.largo { font-size: 10.5px; line-height: 1.2; } .jx-sello { top: -5px; right: -5px; width: 19px; height: 19px; font-size: 13px; box-shadow: 0 0 0 2px #fff, 0 6px 12px -6px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } } @media (max-width: 355px) { .jx-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jx-carta:last-child:nth-child(3n + 1) { grid-column: auto; } } @media (max-width: 800px) { .jx-ru-cuerpo { grid-template-columns: minmax(0, 1fr); } } } @media (max-width: 640px) { .partida.jx-ruleta { padding: 22px 14px; } .jx-maquina { padding: 16px 22px; border-radius: 24px; } .jx-rodillos { gap: 8px; } .jx-rodillo { --celda: 78px; --asoma: 22px; border-radius: 16px; } .jx-sim { --t: 46px; } .jx-sim b { font-size: 15px; } .jx-marca { width: 10px; height: 15px; margin-top: -7.5px; } .jx-marca.izq { left: 7px; } .jx-marca.der { right: 7px; } .jx-premios { padding: 16px 14px 12px; } .jx-barra { width: 46px; } .jx-ganado-txt b { font-size: 26px; } } /* ---------- juegos por rondas: «Detecta el phishing», «Ordena la entrevista», «Zona horaria» ---------- */ .partida.jx-rondas { max-width: 760px; } .jx-ronda-n { margin: 6px 0 0; font-family: var(--font-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .jx-ronda-n:focus { outline: none; } .jx-ronda-cuerpo { width: 100%; display: grid; gap: 14px; } .jx-porque { margin: 0; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--text-2); font-size: 14px; line-height: 1.5; text-align: left; } .jx-porque[hidden] { display: none; } /* phishing */ .jx-msg { display: grid; gap: 6px; width: 100%; padding: 16px 18px; border: 1px solid var(--surface-3); border-radius: 16px; background: var(--surface); text-align: left; box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--jg-3, #0400bc) 35%, transparent); } .jx-msg-linea { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; } .jx-msg-k { color: var(--text-3); margin-right: 4px; } .jx-msg-texto { margin: 6px 0 0; padding-top: 10px; border-top: 1px dashed var(--surface-3); font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; } .opciones.jx-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* entrevista (STAR) */ .jx-star { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; } .jx-star-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--surface-3); border-radius: 14px; background: var(--surface); text-align: left; } .jx-star-n, .jx-star-letra { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-2); font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--azul); } .jx-star-letra { background: var(--azul); color: #fff; } .jx-star-txt { flex: 1 1 auto; min-width: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; } .jx-star-btns { display: flex; gap: 6px; margin-left: auto; flex: none; } .jx-mover { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; } .jx-mover:hover:not(:disabled) { border-color: var(--azul-brillante); color: var(--azul-brillante); } .jx-mover:focus-visible { outline: 3px solid var(--azul-brillante); outline-offset: 2px; } .jx-mover:disabled { opacity: .35; cursor: default; } .jx-star.ok .jx-star-item { border-color: var(--success); background: var(--success-soft); } .jx-star.mal .jx-star-item { border-color: var(--surface-3); } .jx-star.mal .jx-star-letra { background: var(--danger); } /* oscuro: la letra blanca sobre el azul claro (#b3baff) daba 1,84:1 y sobre el rojo claro 2,19:1; ahora el azul vivo de los botones con la letra clara da 6,60:1 y el rojo de error con la letra clara 5,12:1 */ :root[data-theme="dark"] .jx-star-letra { background: var(--jg-2, #2a37e8); color: var(--jg-papel, #eef0ff); } :root[data-theme="dark"] .jx-star.mal .jx-star-letra { background: #c2272d; color: var(--jg-papel, #eef0ff); } /* figuras de la sala (96x76) */ .figura-phishing .sobre { width: 64px; height: 44px; left: 6px; top: 22px; } .figura-phishing .pico { width: 64px; height: 24px; left: 6px; top: 22px; transform: rotate(180deg); } .figura-phishing .alerta { width: 30px; height: 28px; left: 60px; top: 4px; } .figura-entrevista .paso { height: 12px; left: 8px; } .figura-entrevista .paso:nth-child(1) { width: 34px; top: 6px; } .figura-entrevista .paso:nth-child(2) { width: 50px; top: 24px; } .figura-entrevista .paso:nth-child(3) { width: 66px; top: 42px; } .figura-entrevista .paso:nth-child(4) { width: 80px; top: 60px; height: 10px; } .figura-zona .reloj { width: 62px; height: 62px; left: 8px; top: 7px; } .figura-zona .aguja { width: 4px; left: 37px; background: #fff; border-radius: 2px; transform-origin: 50% 100%; } .figura-zona .aguja.larga { height: 26px; top: 12px; transform: rotate(40deg); } .figura-zona .aguja.corta { height: 18px; top: 20px; transform: rotate(-70deg); } .figura-zona .sm { width: 22px; height: 22px; left: 68px; top: 4px; } @media (max-width: 640px) { .partida.jx-rondas { padding: 22px 14px; } } @media (max-width: 360px) { .partida.jx-rondas { padding: 18px 10px; } .jx-msg { padding: 12px; } .opciones.jx-dos { grid-template-columns: minmax(0, 1fr); } .jx-star-item { gap: 8px; padding: 8px; } .jx-star-txt { font-size: 13.5px; } .jx-star-btns { gap: 4px; } } /* misiones.css */ /* Campus Remotos Academy — Misiones (misiones.js) · Propuesta D «Hoja con tarjetas» (13-oct). Lo que el dueño eligió de las dos anteriores: de la B, la hoja de misiones (el cajetín con fecha, relojes de reinicio y totales) y los sellos «RECLAMADA»; de la C, la estética: vidrio claro con filo de luz y grano mate, cuadrícula fina de plano con esquinas marcadas, tarjetas grandes con anillo de avance y el número al centro, fichas de premio y mucho aire. Arriba, la hoja de misiones con el panda al lado. Abajo, las diarias y las semanales como tarjetas (M-01 … M-09), cada una con su dibujo propio a dos tonos (la familia de los dibujos de la Tienda). Al reclamar, el sello cae sobre el anillo y la tarjeta queda sellada. Amarillo solo en «Reclamar» y en la moneda. Sin backdrop-filter. Clases nuevas con prefijo mn- (las reglas viejas .mi-* de oscuro-juegos.css no les aplican); se conservan .mi-raiz, .mi-cuerpo, .mi-entra y .mi-sim porque las usa mount(). El modo oscuro va al final, bajo :root[data-theme="dark"]. */ /* ---------- Base y colores ---------- */ .mi-raiz { container: mn / inline-size; --mn-tit: #0400bc; --mn-brillante: #0012fd; --mn-lav: #6c78ff; --mn-trazo: #6c78ff; --mn-texto: #11111a; --mn-texto-2: #3a3d55; --mn-texto-3: #5d6078; --mn-etq: rgba(4, 0, 188, .76); --mn-linea: rgba(108, 120, 255, .32); --mn-tinta: #12805c; /* 13-oct, el dueño: «que el sello sea verde» (verde de éxito del campus) */ --mn-papel: #fff; } .mi-raiz, .mi-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; } .mi-cuerpo > * { min-width: 0; } .mn-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- Vidrio (la receta de la Sala): velo, brillo, filo de luz de 2 px, grosor, sombra y grano mate ---------- */ .mn-cab, .mn-cajetin, .mn-card { position: relative; isolation: isolate; } :root:not([data-theme="dark"]) :is(.mn-cab, .mn-card) { background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 52%), linear-gradient(145deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .24) 60%, rgba(255, 255, 255, .14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255, 255, 255, .4), inset 0 0 30px rgba(255, 255, 255, .3), inset 0 -14px 24px -16px rgba(4, 0, 188, .24), 0 2px 8px rgba(4, 0, 188, .07), 0 30px 60px -30px rgba(4, 0, 188, .6); } /* el cajetín: vidrio grueso (como los medidores de la C y el panel de energía de la Sala) */ :root:not([data-theme="dark"]) .mn-cajetin { background: radial-gradient(120% 140% at 0% 0%, #fff 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, rgba(251, 251, 255, .94) 0%, rgba(244, 245, 255, .88) 55%, rgba(236, 238, 255, .84) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255, 255, 255, .6), inset 0 0 26px rgba(255, 255, 255, .7), inset 0 -18px 28px -18px rgba(4, 0, 188, .3), 0 2px 8px rgba(4, 0, 188, .08), 0 30px 52px -24px rgba(4, 0, 188, .6); } :root:not([data-theme="dark"]) :is(.mn-cab, .mn-cajetin, .mn-card)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :is(.mn-cab, .mn-cajetin, .mn-card)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: var(--mn-filo, linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .6) 14%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 62%, rgba(0, 18, 253, .22) 84%, rgba(0, 18, 253, .42) 100%)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* ---------- Rótulo técnico: mayúsculas espaciadas con su línea de extensión ---------- */ .mn-etq { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; font: 600 11px/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--mn-etq); } .mn-etq .ic { flex: none; color: var(--mn-brillante); } .mn-etq::after { content: ""; flex: 1 1 auto; min-width: 14px; height: 9px; margin-left: 6px; border-right: 1px solid rgba(108, 120, 255, .8); background: repeating-linear-gradient(90deg, rgba(108, 120, 255, .75) 0 4px, transparent 4px 7px) left center / 100% 1px no-repeat; } /* ===================================================================================================================== La hoja de misiones: tablero de vidrio con la cuadrícula del plano y sus esquinas; dentro, el cajetín (título, fecha, relojes y totales) y, al lado, el panda con su globo ===================================================================================================================== */ .mn-cab { --mn-oso-w: 262px; display: grid; grid-template-columns: minmax(0, 1fr) var(--mn-oso-w); grid-template-areas: "caj oso"; column-gap: 22px; padding: 24px; border-radius: 30px; } /* la cuadrícula del plano, más presente a la derecha (donde está el panda) */ .mn-cuadricula { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(to right, rgba(108, 120, 255, .13) 1px, transparent 1px), linear-gradient(to bottom, rgba(108, 120, 255, .13) 1px, transparent 1px), linear-gradient(to right, rgba(108, 120, 255, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(108, 120, 255, .06) 1px, transparent 1px); background-size: 44px 44px, 44px 44px, 11px 11px, 11px 11px; background-position: right -1px top -1px; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .3) 45%, #000 82%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .3) 45%, #000 82%); } /* esquinas marcadas y marcas de centrado, como en un plano */ .mn-esquinas, .mn-plano::after { --mn-e: rgba(108, 120, 255, .75); --mn-l: 16px; pointer-events: none; background: linear-gradient(var(--mn-e), var(--mn-e)) left top / var(--mn-l) 1.5px no-repeat, linear-gradient(var(--mn-e), var(--mn-e)) left top / 1.5px var(--mn-l) no-repeat, linear-gradient(var(--mn-e), var(--mn-e)) right top / var(--mn-l) 1.5px no-repeat, linear-gradient(var(--mn-e), var(--mn-e)) right top / 1.5px var(--mn-l) no-repeat, linear-gradient(var(--mn-e), var(--mn-e)) left bottom / var(--mn-l) 1.5px no-repeat, linear-gradient(var(--mn-e), var(--mn-e)) left bottom / 1.5px var(--mn-l) no-repeat, linear-gradient(var(--mn-e), var(--mn-e)) right bottom / var(--mn-l) 1.5px no-repeat, linear-gradient(var(--mn-e), var(--mn-e)) right bottom / 1.5px var(--mn-l) no-repeat; } .mn-esquinas { position: absolute; inset: 11px; z-index: -1; } .mn-esquinas::before, .mn-esquinas::after { content: ""; position: absolute; left: 50%; width: 1px; height: 10px; background: var(--mn-e); } .mn-esquinas::before { top: 0; } .mn-esquinas::after { bottom: 0; } .mn-cajetin { grid-area: caj; z-index: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "tit fecha" "tit reloj" "tot tot"; border-radius: 22px; --mn-filo: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .7) 16%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 60%, rgba(0, 18, 253, .24) 84%, rgba(0, 18, 253, .42) 100%); } .mn-cajetin > * { min-width: 0; } /* título: «Hoja de» con su línea de extensión y «Misiones» grande sobre la raya de medida */ .mn-caj-tit { grid-area: tit; align-self: center; padding: 26px 28px; } .mn-medida { width: max-content; max-width: 100%; } .mn-titulo { display: block; margin: 0; font-weight: 400; line-height: 1; letter-spacing: 0; } .mn-t1 { display: flex; align-items: center; gap: 12px; font: 400 38px/.92 var(--font-display); letter-spacing: .06em; color: var(--mn-brillante); } .mn-t1::after { content: ""; flex: 1 1 auto; min-width: 28px; height: 11px; margin-bottom: 4px; border-right: 1px solid var(--mn-trazo); background: repeating-linear-gradient(90deg, var(--mn-trazo) 0 4px, transparent 4px 7px) left center / 100% 1px no-repeat; } .mn-t2 { display: block; padding: .1em 0 0; font: 400 108px/.7 var(--font-display); letter-spacing: .012em; color: #0400bc; background: linear-gradient(180deg, #2430ff 0%, #0012fd 30%, #0400bc 74%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 14px 20px rgba(4, 0, 188, .16)); } .mn-raya { display: block; height: 10px; margin-top: 10px; border-left: 1px solid var(--mn-trazo); border-right: 1px solid var(--mn-trazo); background: linear-gradient(var(--mn-trazo), var(--mn-trazo)) center / 100% 1px no-repeat; } .mn-sub { margin: 18px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--mn-texto-2); } /* fecha y relojes de reinicio */ .mn-caj-fecha, .mn-caj-reloj { padding: 22px 24px 18px; border-left: 1px solid var(--mn-linea); } .mn-caj-fecha { grid-area: fecha; } .mn-caj-reloj { grid-area: reloj; border-top: 1px dashed var(--mn-linea); } .mn-fecha { margin: 0; } .mn-fecha-v { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n m" "n d"; align-items: center; column-gap: 12px; } .mn-fecha-v b { grid-area: n; padding-top: 4px; font: 400 74px/.78 var(--font-display); letter-spacing: 0; color: var(--mn-tit); } .mn-fecha-m { grid-area: m; align-self: end; font: 400 25px/1 var(--font-display); letter-spacing: .06em; color: var(--mn-lav); white-space: nowrap; } .mn-fecha-d { grid-area: d; align-self: start; margin-top: 4px; font: 600 13px/1.25 var(--font); color: var(--mn-texto-2); text-transform: capitalize; } .mn-reloj { margin: 0; } .mn-reloj + .mn-reloj { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mn-linea); } .mn-reloj-v { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; } .mn-reloj-p { font: 600 13px/1.2 var(--font); color: var(--mn-texto-2); } .mn-reloj b { font: 400 31px/1 var(--font-display); letter-spacing: .03em; color: var(--mn-tit); font-variant-numeric: tabular-nums; white-space: nowrap; } /* totales: hoy, esta semana, ganado hoy y total */ .mn-caj-tot { grid-area: tot; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--mn-linea); } .mn-dato { min-width: 0; padding: 16px 20px 18px; border-left: 1px solid var(--mn-linea); } .mn-dato:first-child { padding-left: 28px; border-left: 0; } .mn-dato dt { font: 600 10.5px/1.35 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--mn-etq); } .mn-dato dd { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; font-weight: 500; color: var(--mn-texto-2); } .mn-dato dd > b { font: 400 40px/.85 var(--font-display); letter-spacing: .02em; color: var(--mn-tit); } /* celdas del periodo: reclamadas (con visto), listas (azul que late), la siguiente punteada */ .mn-segs { flex-basis: 100%; display: flex; gap: 5px; margin-top: 6px; } .mn-segs i { display: grid; place-items: center; width: 26px; height: 12px; border-radius: 4px; color: #fff; background: rgba(108, 120, 255, .1); box-shadow: inset 0 0 0 1px rgba(108, 120, 255, .34); } .mn-segs i:is(.mn-s-hecha, .mn-s-lista) { background: linear-gradient(180deg, #3340ff 0%, #0012fd 32%, #0400bc 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 8px -4px rgba(4, 0, 188, .7); } .mn-segs i.mn-s-sig { background: rgba(0, 18, 253, .04); box-shadow: inset 0 0 0 1.5px rgba(0, 18, 253, .5); } .mn-segs .ic { width: 11px; height: 11px; } .mn-dato-ganado dd { align-items: center; gap: 8px; } .mn-total { display: inline-flex; align-items: baseline; gap: 6px; color: var(--mn-tit); } .mn-total .mn-rayo { flex: none; align-self: center; width: 24px; height: 24px; } .mn-total b { font: 400 40px/.85 var(--font-display); letter-spacing: .02em; } .mn-total small { font: 600 12px/1 var(--font); color: var(--mn-texto-2); } /* el globo del panda (con su línea de referencia, como en los planos) y EL PANDA (lo hace el dueño): un solo , entero y sin recortes (assets/panda/panda-misiones.webp, 556 × 556, fondo transparente). La imagen trae aire transparente arriba y abajo: --mn-panda-arriba y --mn-panda-abajo (en proporción de su ancho) y --mn-panda-alto (alto ÷ ancho) lo descuentan para que el dibujo quede apoyado. Con otra imagen, basta con cambiar el src en misiones.js y esos tres números (sin aire: 0, 0 y alto ÷ ancho). */ .mn-oso { --mn-panda-alto: 1; --mn-panda-arriba: .155; --mn-panda-abajo: .038; grid-area: oso; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; } .mn-globo { position: relative; z-index: 2; align-self: stretch; margin: 0 0 22px; padding: 10px 14px; border-radius: 14px; text-align: center; font: 700 12.5px/1.35 var(--font); color: #0400bc; background: linear-gradient(180deg, #fff 0%, #f1f2ff 100%); box-shadow: inset 0 0 0 1px rgba(108, 120, 255, .5), inset 0 -6px 10px -8px rgba(4, 0, 188, .3), 0 10px 22px -12px rgba(4, 0, 188, .55); } .mn-globo::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 13px; background: var(--mn-trazo); } .mn-globo::before { content: ""; position: absolute; left: calc(50% - 3px); top: calc(100% + 12px); width: 7px; height: 7px; border-radius: 50%; background: var(--mn-trazo); } .mn-panda { position: relative; width: 100%; height: calc(var(--mn-oso-w) * (var(--mn-panda-alto) - var(--mn-panda-arriba) - var(--mn-panda-abajo))); pointer-events: none; } .mn-panda img { position: absolute; left: 0; top: calc(var(--mn-oso-w) * var(--mn-panda-arriba) * -1); display: block; width: 100%; max-width: none; height: auto; filter: drop-shadow(0 14px 18px rgba(4, 0, 188, .2)); } /* ---------- Fichas (el premio de cada misión y lo ganado hoy): disco con el rayo o la moneda, cifra en Bebas y la unidad ---------- */ .mn-ficha { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 4px; border-radius: 999px; white-space: nowrap; background: linear-gradient(180deg, #fff 0%, #eef0ff 100%); box-shadow: inset 0 0 0 1px rgba(108, 120, 255, .45), inset 0 -6px 10px -8px rgba(4, 0, 188, .35), 0 6px 14px -8px rgba(4, 0, 188, .55); } .mn-ficha b { padding-top: 2px; font: 400 22px/1 var(--font-display); letter-spacing: .02em; color: #0400bc; } .mn-ficha small { font: 600 11.5px/1 var(--font); color: var(--mn-texto-2); } .mn-ficha.mn-practica { padding-right: 14px; } .mn-ficha.mn-practica b { padding: 0; font: 600 13px/1 var(--font); } .mn-disco { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: radial-gradient(120% 120% at 30% 22%, #4a54ff 0%, #0012fd 40%, #0400bc 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -3px 5px rgba(4, 0, 120, .45), 0 4px 8px -4px rgba(4, 0, 188, .75); } .mn-disco svg { display: block; width: 14px; height: 14px; } .mn-ficha .mn-moneda { display: block; flex: none; width: 26px; height: 26px; filter: drop-shadow(0 3px 4px rgba(150, 120, 0, .35)); } /* ===================================================================================================================== Diarias y semanales: rótulo de sección y tarjetas grandes de vidrio con su plano ===================================================================================================================== */ .mn-sec { display: grid; gap: 16px; } .mn-sec-t { display: flex; align-items: center; gap: 14px; margin: 0; font: 400 34px/1 var(--font-display); letter-spacing: .04em; color: var(--mn-tit); } .mn-sec-nombre { padding-top: 3px; } .mn-sec-t::after { content: ""; order: 1; flex: 1 1 auto; min-width: 24px; height: 11px; border-right: 1px solid var(--mn-trazo); background: repeating-linear-gradient(90deg, var(--mn-trazo) 0 4px, transparent 4px 7px) left center / 100% 1px no-repeat; } .mn-sec-n { order: 2; font: 600 11.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--mn-etq); white-space: nowrap; } /* rejilla: una columna; en pantalla ancha, 3 columnas y la última fila se reparte (4 diarias: 3 + 1 a lo ancho; 5 semanales: 3 + 2) */ .mn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } @container mn (min-width: 900px) { .mn-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mn-card { grid-column: span 2; } .mn-card:nth-child(3n+1):last-child { grid-column: span 6; } .mn-card:nth-child(3n+1):nth-last-child(2), .mn-card:nth-child(3n+2):last-child { grid-column: span 3; } } .mn-card { min-width: 0; container-type: inline-size; border-radius: 24px; } .mn-card-in { display: flex; flex-direction: column; height: 100%; padding: 10px 10px 2px; } /* el plano de la tarjeta: cuadrícula tenue, esquinas de marco, código técnico, ficha del premio, dibujo y anillo */ .mn-plano { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "cod ficha" "logo anillo"; align-items: center; gap: 8px 14px; min-height: 182px; padding: 14px 18px 14px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(238, 240, 255, .82), rgba(238, 240, 255, .34)); box-shadow: inset 0 0 0 1px rgba(108, 120, 255, .2); } .mn-plano::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(to right, rgba(108, 120, 255, .2) 1px, transparent 1px), linear-gradient(to bottom, rgba(108, 120, 255, .2) 1px, transparent 1px), linear-gradient(to right, rgba(108, 120, 255, .09) 1px, transparent 1px), linear-gradient(to bottom, rgba(108, 120, 255, .09) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px; background-position: center; -webkit-mask-image: radial-gradient(75% 85% at 50% 50%, #000 35%, rgba(0, 0, 0, .2) 100%); mask-image: radial-gradient(75% 85% at 50% 50%, #000 35%, rgba(0, 0, 0, .2) 100%); } .mn-plano::after { --mn-l: 12px; content: ""; position: absolute; inset: 7px; z-index: -1; } /* M-01 … M-09: el código de la misión, como el número de un plano */ .mn-cod { grid-area: cod; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 2px 0 0 6px; font: 400 19px/1 var(--font-display); letter-spacing: .08em; color: var(--mn-lav); white-space: nowrap; } .mn-cod::after { content: ""; width: 26px; height: 7px; border-right: 1px solid var(--mn-trazo); background: repeating-linear-gradient(90deg, var(--mn-trazo) 0 3px, transparent 3px 6px) left center / 100% 1px no-repeat; opacity: .8; } .mn-lista .mn-cod { color: var(--mn-brillante); } .mn-plano > .mn-ficha { grid-area: ficha; justify-self: end; } .mn-logo { grid-area: logo; justify-self: center; display: block; width: 100%; max-width: 146px; aspect-ratio: 120 / 96; } .mn-logo svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 12px rgba(4, 0, 188, .22)); } /* el anillo de avance (con marcas de dial y el número al centro) */ .mn-anillo { grid-area: anillo; position: relative; display: grid; justify-items: center; gap: 5px; } .mn-dial { position: relative; display: block; width: 96px; height: 96px; } .mn-dial::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0%, rgba(255, 255, 255, .92) 45%, rgba(238, 240, 255, .78) 100%); box-shadow: inset 0 0 0 1px rgba(108, 120, 255, .22), inset 0 -6px 12px -6px rgba(4, 0, 188, .25), 0 10px 18px -10px rgba(4, 0, 188, .55); } .mn-dial > svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; } .mn-marcas line { stroke: #6c78ff; stroke-width: 1.3; stroke-linecap: round; } .mn-marcas line.mn-marca0 { stroke: #0400bc; stroke-width: 2; } .mn-guia { fill: none; stroke: rgba(108, 120, 255, .45); stroke-width: .9; stroke-dasharray: 1.6 2.6; } .mn-pista { fill: none; stroke: rgba(108, 120, 255, .16); stroke-width: 9; } .mn-arco { fill: none; stroke: url(#mn-g-arco); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); } .mn-arco.mn-cero { stroke-opacity: 0; } /* lista para reclamar: una luz blanca da la vuelta al anillo lleno */ .mn-brillo { fill: none; stroke: #fff; stroke-opacity: .75; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 241.33; transform-box: view-box; transform-origin: 50px 50px; transform: rotate(-90deg); } .mn-anillo-num { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 4px; color: #0400bc; pointer-events: none; } .mn-anillo-num > span { display: inline-flex; align-items: baseline; } .mn-anillo-num b { font: 400 31px/1 var(--font-display); letter-spacing: .01em; } .mn-anillo-num small { font: 400 17px/1 var(--font-display); letter-spacing: .02em; color: #6c78ff; } .mn-anillo-pie { font: 600 11.5px/1.2 var(--font); color: var(--mn-texto-2); white-space: nowrap; } /* ---------- El sello «RECLAMADA» (la idea del sello del examen): cae sobre el anillo y la tarjeta queda sellada ---------- */ /* centrado un poco más abajo que el dial (debajo, la unidad se oculta al reclamar): así no tapa la ficha del premio */ .mn-sello { position: absolute; left: 50%; top: calc(50% + 7px); width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; } .mn-sello svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-14deg); } .mn-s1 { fill: none; stroke: var(--mn-tinta); stroke-width: 3.4; } .mn-s2 { fill: none; stroke: var(--mn-tinta); stroke-width: 1.2; } .mn-s3 { fill: none; stroke: var(--mn-tinta); stroke-width: 1.2; stroke-dasharray: 3 2.6; } .mn-stxt { font: 400 12.5px var(--font-display); letter-spacing: .14em; fill: var(--mn-tinta); } .mn-sbanda { fill: var(--mn-tinta); } .mn-spal { font: 400 23px var(--font-display); letter-spacing: .1em; fill: var(--mn-papel); } :root:not([data-theme="dark"]) .mn-sello { mix-blend-mode: multiply; opacity: .9; } .mn-tinta { position: absolute; inset: -8px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(18, 128, 92, .45) 0 34%, rgba(18, 128, 92, .14) 52%, rgba(18, 128, 92, 0) 70%); } /* reclamada: el anillo y el dibujo se calman debajo del sello; el plano queda con un velo de tinta */ .mn-hecha .mn-plano { background: linear-gradient(160deg, rgba(226, 229, 255, .78), rgba(238, 240, 255, .3)); } .mn-hecha .mn-logo svg { opacity: .42; filter: saturate(.5); } .mn-hecha .mn-arco { stroke: #b3baff; } .mn-hecha .mn-marcas line, .mn-hecha .mn-guia { opacity: .5; } .mn-hecha .mn-anillo-num { padding-top: 0; color: #9aa3ff; } .mn-hecha .mn-anillo-pie { visibility: hidden; } .mn-hecha .mn-ficha { opacity: .72; } .mn-hecha .mn-cod { color: var(--mn-texto-3); } /* texto y pie de la tarjeta */ .mn-card-txt { margin: 14px 8px 12px; } .mn-card-t { margin: 0; font: 600 17px/1.3 var(--font); letter-spacing: -.005em; color: var(--mn-texto); } .mn-card-p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--mn-texto-2); } .mn-hecha .mn-card-t { color: var(--mn-texto-2); } .mn-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 58px; margin: auto 8px 0; padding: 7px 0 8px; border-top: 1px dashed rgba(108, 120, 255, .38); } .mn-estado { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1.3 var(--font); color: var(--mn-texto-2); border-radius: 8px; } .mn-estado .ic { flex: none; } .mn-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #9aa0c4; box-shadow: 0 0 0 3px rgba(154, 160, 196, .2); } .mn-lista .mn-estado { font-weight: 700; color: var(--mn-tit); } .mn-lista .mn-estado .ic { color: var(--mn-brillante); } .mn-hecha .mn-estado { font-weight: 700; color: var(--mn-brillante); } .mn-reclamar { flex: none; margin-left: auto; min-height: 44px; padding: 0 24px; border-radius: 999px; font: 700 14.5px/1 var(--font); box-shadow: inset 0 -3px 0 rgba(120, 90, 0, .14), 0 10px 22px -12px rgba(150, 120, 0, .9); } .mn-reclamar:hover { filter: brightness(1.04); transform: translateY(-1px); } /* el foco con teclado igual al del campus (amarillo + anillo azul): la sombra propia del botón no debe taparlo */ .mn-reclamar:focus-visible { box-shadow: 0 0 0 6px #0400bc; } .mn-ir { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; font: 600 13.5px/1.2 var(--font); color: #0400bc; text-decoration: none; white-space: nowrap; } .mn-ir:hover { text-decoration: underline; text-underline-offset: 3px; } .mn-ir .ic { transition: transform .15s; } .mn-ir:hover .ic { transform: translateX(2px); } .mn-vuelve { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1.2 var(--font); color: var(--mn-texto-3); white-space: nowrap; } .mn-vuelve .ic { color: var(--mn-lav); } /* lista para reclamar: filo azul vivo y sombra azul */ .mn-card.mn-lista { --mn-filo: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, .75) 12%, rgba(108, 120, 255, .55) 38%, rgba(0, 18, 253, .62) 70%, rgba(4, 0, 188, .88) 100%); } :root:not([data-theme="dark"]) .mn-card.mn-lista { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255, 255, 255, .4), inset 0 0 30px rgba(255, 255, 255, .3), inset 0 -14px 24px -16px rgba(4, 0, 188, .24), 0 0 0 1px rgba(0, 18, 253, .1), 0 2px 8px rgba(4, 0, 188, .08), 0 30px 60px -26px rgba(0, 18, 253, .78); } /* sellada: vidrio más quieto */ :root:not([data-theme="dark"]) .mn-card.mn-hecha { background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 52%), linear-gradient(145deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .12) 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -10px 18px -14px rgba(4, 0, 188, .16), 0 16px 34px -26px rgba(4, 0, 188, .45); } /* ---------- Modo pruebas: simular progreso (nota de plano con borde punteado) ---------- */ .mn-sim { position: relative; padding: 2px 18px; border-radius: 20px; border: 1.5px dashed rgba(108, 120, 255, .55); background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(238, 240, 255, .42)); } .mn-sim summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font: 700 14px/1.3 var(--font); color: #0400bc; border-radius: 10px; } .mn-sim summary::-webkit-details-marker { display: none; } .mn-sim summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 500; line-height: 1; } .mn-sim[open] summary::after { content: "–"; } .mn-sim-nota { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--mn-texto-2); } .mn-sim-bts { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; } .mn-sim-b { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 13px/1.2 var(--font); color: #0400bc; cursor: pointer; background: linear-gradient(180deg, #fff 0%, #eef0ff 100%); box-shadow: inset 0 0 0 1px rgba(108, 120, 255, .45), 0 6px 14px -8px rgba(4, 0, 188, .5); } .mn-sim-b:hover { box-shadow: inset 0 0 0 1.5px #0012fd, 0 8px 16px -8px rgba(4, 0, 188, .6); } .mn-sim-b.mn-fuerte { color: #fff; background: linear-gradient(180deg, #0012fd 0%, #0400bc 100%); box-shadow: 0 8px 16px -8px rgba(4, 0, 188, .75); } .mn-sim-b:focus-visible { box-shadow: 0 0 0 6px #0400bc; } /* ===================================================================================================================== Movimiento (solo si la persona no pidió menos movimiento) ===================================================================================================================== */ @media (prefers-reduced-motion: no-preference) { .mi-entra > .mi-cuerpo { animation: mn-entrar .55s cubic-bezier(.2, .8, .2, 1) both; } .mi-entra .mn-card { animation: mn-entrar .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.08s + var(--i, 1) * .045s); } .mi-entra .mn-arco { animation: mn-llenar .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i, 1) * .06s); } .mi-entra .mn-segs i:is(.mn-s-hecha, .mn-s-lista) { animation: mn-cargar .45s cubic-bezier(.2, .8, .2, 1) .3s both; } @keyframes mn-entrar { from { opacity: 0; transform: translateY(12px); } } @keyframes mn-llenar { from { stroke-dashoffset: 251.33; } } @keyframes mn-cargar { from { opacity: 0; transform: scaleY(.2); } } /* lista para reclamar: la luz da la vuelta al anillo y su celda late despacio */ .mn-brillo { animation: mn-vuelta 2.8s linear infinite; } @keyframes mn-vuelta { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } } .mn-segs i.mn-s-lista { animation: mn-latido 1.8s ease-in-out infinite; } @keyframes mn-latido { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 3px rgba(108, 120, 255, .3), 0 4px 10px -4px rgba(0, 18, 253, .7); } } /* al reclamar: el sello cae girando, golpea el anillo, la tinta se abre y la tarjeta se sacude apenas */ .mn-estampa .mn-sello svg { animation: mn-sello-cae .8s var(--mn-ya, 0s) both; } @keyframes mn-sello-cae { 0% { opacity: 0; transform: translate(-10px, -56px) scale(1.75) rotate(-38deg); animation-timing-function: cubic-bezier(.55, 0, .9, .45); } 12% { opacity: 1; } 48% { opacity: 1; transform: translate(0, 0) scale(1.08) rotate(-14deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 62% { transform: scale(.93) rotate(-14deg); } 80% { transform: scale(1.03) rotate(-14deg); } 100% { opacity: 1; transform: scale(1) rotate(-14deg); } } .mn-estampa .mn-tinta { animation: mn-tinta .8s ease-out calc(var(--mn-ya, 0s) + .38s) both; } @keyframes mn-tinta { 0% { opacity: 0; transform: scale(.5); } 6% { opacity: .85; } 100% { opacity: 0; transform: scale(1.5); } } .mn-estampa .mn-dial > svg, .mn-estampa .mn-anillo-num { animation: mn-golpe .4s ease-out calc(var(--mn-ya, 0s) + .38s); } @keyframes mn-golpe { 30% { transform: scale(.9); } } .mn-card.mn-estampa { animation: mn-sacudir .36s ease-out calc(var(--mn-ya, 0s) + .38s); } @keyframes mn-sacudir { 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, 0); } 75% { transform: translate(-1px, 0); } } /* el panda da un saltito y lo ganado hoy late una vez */ .mn-panda.mn-salta img { animation: mn-salto .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--mn-ya, 0s) + .3s); } @keyframes mn-salto { 40% { translate: 0 -10px; } } .mn-dato-ganado.mn-late .mn-ficha { animation: mn-pop .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--mn-ya, 0s) + .45s); } @keyframes mn-pop { 40% { transform: scale(1.1); } } } @media (prefers-reduced-motion: reduce) { .mn-arco, .mn-ir .ic { transition: none; } .mn-reclamar:hover { transform: none; } .mn-brillo { display: none; } } /* ===================================================================================================================== Tamaños: se mide el ancho del contenido (con o sin menú lateral), no la ventana ===================================================================================================================== */ /* tableta: el título arriba, fecha y relojes debajo, los totales de a dos; el panda sigue al lado */ @container mn (max-width: 999px) { .mn-cab { --mn-oso-w: 196px; column-gap: 16px; padding: 20px; } .mn-cajetin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tit tit" "fecha reloj" "tot tot"; } .mn-caj-fecha { border-left: 0; border-top: 1px solid var(--mn-linea); padding-left: 28px; } .mn-caj-reloj { border-top: 1px solid var(--mn-linea); } .mn-caj-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-dato:nth-child(odd) { padding-left: 28px; border-left: 0; } .mn-dato:nth-child(n+3) { border-top: 1px solid var(--mn-linea); } .mn-t2 { font-size: 94px; } } /* celular: el panda y su globo arriba, en la esquina; el cajetín en una columna; las tarjetas una debajo de otra */ @container mn (max-width: 639px) { .mi-raiz, .mi-cuerpo { gap: 24px; } .mn-cab { --mn-oso-w: 138px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "oso" "caj"; row-gap: 0; padding: 14px 12px 12px; border-radius: 26px; } .mn-esquinas { inset: 7px; } .mn-oso { display: grid; grid-template-columns: minmax(0, 1fr) var(--mn-oso-w); align-items: center; column-gap: 12px; margin-bottom: -4px; } .mn-globo { grid-column: 1; align-self: center; justify-self: end; max-width: 210px; margin: 0 0 6px; text-align: left; } .mn-globo::after { left: 100%; top: 50%; width: 12px; height: 1px; } .mn-globo::before { left: calc(100% + 11px); top: calc(50% - 3px); } .mn-panda { grid-column: 2; } .mn-cajetin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tit" "fecha" "reloj" "tot"; border-radius: 20px; } .mn-caj-tit { padding: 20px 18px 18px; } .mn-caj-fecha, .mn-caj-reloj { padding: 14px 18px; border-left: 0; } .mn-caj-fecha { border-top: 1px solid var(--mn-linea); } .mn-caj-reloj { border-top: 1px dashed var(--mn-linea); } .mn-caj-fecha .mn-etq, .mn-caj-reloj .mn-etq { margin-bottom: 10px; } .mn-t1 { font-size: 30px; gap: 10px; } .mn-t2 { font-size: 80px; } .mn-sub { margin-top: 14px; font-size: 14px; } /* la fecha en una sola línea: 13 · OCT 2026 · martes */ .mn-fecha-v { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "n m d"; align-items: baseline; column-gap: 10px; } .mn-fecha-v b { font-size: 46px; } .mn-fecha-m { align-self: baseline; font-size: 21px; } .mn-fecha-d { align-self: baseline; margin: 0; } .mn-reloj b { font-size: 27px; } .mn-dato { padding: 12px 14px 14px; } .mn-dato:nth-child(odd) { padding-left: 18px; } .mn-dato dd > b, .mn-total b { font-size: 34px; } .mn-segs i { width: 22px; } .mn-sec-t { gap: 10px; font-size: 30px; } .mn-grid { gap: 14px; } } @container mn (max-width: 379px) { .mn-t2 { font-size: 70px; } .mn-sec-n { letter-spacing: .08em; } } /* la tarjeta elige su forma por su propio ancho: angosta (celular), normal o ancha (el plano a la izquierda) */ @container (max-width: 419px) { .mn-plano { min-height: 164px; gap: 6px 10px; padding: 12px 14px 12px 12px; } .mn-logo { max-width: 124px; } .mn-dial { width: 88px; height: 88px; } .mn-sello { top: calc(50% + 8px); width: 112px; height: 112px; margin: -56px 0 0 -56px; } .mn-anillo-num b { font-size: 28px; } .mn-anillo-num small { font-size: 15px; } .mn-card-t { font-size: 16px; } } @container (min-width: 600px) { .mn-card-in { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "plano txt" "plano pie"; column-gap: 24px; padding: 10px 22px 10px 10px; } .mn-plano { grid-area: plano; } .mn-card-txt { grid-area: txt; align-self: center; margin: 12px 0 10px; } .mn-card-t { font-size: 19px; } .mn-card-p { font-size: 13.5px; } .mn-pie { grid-area: pie; margin: 0; } } /* ===================================================================================================================== Modo oscuro (solo con data-theme="dark"): azul noche del campus, vidrio oscuro translúcido con filo de luz, texto #eef0ff, acento #8e97ff y azul vivo #3d4bff en lo lleno y en los botones. El amarillo sigue solo en «Reclamar» y en la moneda. ===================================================================================================================== */ :root[data-theme="dark"] .mi-raiz { --mn-tit: #eef0ff; --mn-brillante: #8e97ff; --mn-lav: #a7aeff; --mn-trazo: #8e97ff; --mn-texto: #eef0ff; --mn-texto-2: #d6d9f3; --mn-texto-3: #c0c4e5; --mn-etq: #b3baff; --mn-linea: rgba(142, 151, 255, .26); --mn-tinta: #3ccf91; --mn-papel: #15175a; } :root[data-theme="dark"] :is(.mn-cab, .mn-card) { --mn-filo: linear-gradient(135deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 16%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 62%, rgba(142, 151, 255, .28) 84%, rgba(142, 151, 255, .5) 100%); background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(38, 42, 118, .5) 0%, rgba(24, 27, 80, .42) 55%, rgba(14, 16, 50, .4) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(142, 151, 255, .16), 0 30px 60px -30px rgba(0, 0, 0, .8); } :root[data-theme="dark"] .mn-cajetin { --mn-filo: linear-gradient(135deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .12) 16%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 62%, rgba(142, 151, 255, .26) 84%, rgba(142, 151, 255, .5) 100%); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(150deg, rgba(32, 36, 108, .94) 0%, rgba(17, 19, 64, .94) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(142, 151, 255, .22), 0 26px 46px -26px rgba(0, 0, 0, .85); } :root[data-theme="dark"] .mn-cuadricula { background-image: linear-gradient(to right, rgba(142, 151, 255, .13) 1px, transparent 1px), linear-gradient(to bottom, rgba(142, 151, 255, .13) 1px, transparent 1px), linear-gradient(to right, rgba(142, 151, 255, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(142, 151, 255, .055) 1px, transparent 1px); } :root[data-theme="dark"] .mn-esquinas, :root[data-theme="dark"] .mn-plano::after { --mn-e: rgba(142, 151, 255, .75); } :root[data-theme="dark"] .mn-t2 { color: #eef0ff; background: linear-gradient(180deg, #ffffff 0%, #e6e8ff 45%, #b3baff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .4)); } :root[data-theme="dark"] .mn-segs i { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(142, 151, 255, .32); } :root[data-theme="dark"] .mn-segs i:is(.mn-s-hecha, .mn-s-lista) { background: linear-gradient(180deg, #8e97ff 0%, #5d69ff 40%, #3d4bff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 10px -4px rgba(61, 75, 255, .9); } :root[data-theme="dark"] .mn-segs i.mn-s-sig { background: rgba(142, 151, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(142, 151, 255, .75); } :root[data-theme="dark"] #mn-g-rayo stop:first-child { stop-color: #c9cdff; } :root[data-theme="dark"] #mn-g-rayo stop:last-child { stop-color: #5d69ff; } :root[data-theme="dark"] .mn-globo { color: #eef0ff; background: linear-gradient(180deg, #2b318e 0%, #1f2470 100%); box-shadow: inset 0 0 0 1px rgba(142, 151, 255, .45), 0 12px 24px -14px rgba(0, 0, 0, .8); } :root[data-theme="dark"] .mn-panda img { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); } :root[data-theme="dark"] .mn-ficha { background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 100%); box-shadow: inset 0 0 0 1px rgba(142, 151, 255, .4), 0 6px 14px -8px rgba(0, 0, 0, .6); } :root[data-theme="dark"] .mn-ficha b { color: #eef0ff; } :root[data-theme="dark"] .mn-disco { background: radial-gradient(120% 120% at 30% 22%, #8e97ff 0%, #5d69ff 40%, #3d4bff 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 4px 8px -4px rgba(0, 0, 0, .6); } /* tarjetas */ :root[data-theme="dark"] .mn-card.mn-lista { --mn-filo: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(142, 151, 255, .55) 40%, #8e97ff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(142, 151, 255, .3), 0 30px 60px -26px rgba(61, 75, 255, .65); } :root[data-theme="dark"] .mn-card.mn-hecha { background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 52%), linear-gradient(150deg, rgba(30, 33, 92, .42) 0%, rgba(22, 24, 66, .38) 60%, rgba(18, 20, 50, .34) 100%); } :root[data-theme="dark"] .mn-plano { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(142, 151, 255, .2); } :root[data-theme="dark"] .mn-hecha .mn-plano { background: linear-gradient(160deg, rgba(142, 151, 255, .12), rgba(142, 151, 255, .03)); } :root[data-theme="dark"] .mn-plano::before { background-image: linear-gradient(to right, rgba(142, 151, 255, .17) 1px, transparent 1px), linear-gradient(to bottom, rgba(142, 151, 255, .17) 1px, transparent 1px), linear-gradient(to right, rgba(142, 151, 255, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(142, 151, 255, .07) 1px, transparent 1px); } /* dibujos: el azul se aclara para que se vea sobre la noche (la lavanda y el blanco siguen igual) */ :root[data-theme="dark"] #mn-g-az stop:nth-child(1) { stop-color: #8e97ff; } :root[data-theme="dark"] #mn-g-az stop:nth-child(2) { stop-color: #4d5aff; } :root[data-theme="dark"] #mn-g-az stop:nth-child(3) { stop-color: #3d4bff; } :root[data-theme="dark"] #mn-g-azd stop:first-child { stop-color: #8e97ff; } :root[data-theme="dark"] #mn-g-azd stop:last-child { stop-color: #3d4bff; } :root[data-theme="dark"] .mn-halo { opacity: .38; } :root[data-theme="dark"] .mn-logo svg { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); } :root[data-theme="dark"] .mn-dial::before { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .04) 100%); box-shadow: inset 0 0 0 1px rgba(142, 151, 255, .28), 0 10px 18px -10px rgba(0, 0, 0, .7); } :root[data-theme="dark"] .mn-marcas line { stroke: #8e97ff; } :root[data-theme="dark"] .mn-marcas line.mn-marca0 { stroke: #eef0ff; } :root[data-theme="dark"] .mn-guia { stroke: rgba(142, 151, 255, .45); } :root[data-theme="dark"] .mn-pista { stroke: rgba(142, 151, 255, .2); } :root[data-theme="dark"] #mn-g-arco stop:nth-child(1) { stop-color: #c9cdff; } :root[data-theme="dark"] #mn-g-arco stop:nth-child(2) { stop-color: #8e97ff; } :root[data-theme="dark"] #mn-g-arco stop:nth-child(3) { stop-color: #3d4bff; } :root[data-theme="dark"] .mn-hecha .mn-arco { stroke: rgba(142, 151, 255, .45); } :root[data-theme="dark"] .mn-anillo-num { color: #fff; } :root[data-theme="dark"] .mn-anillo-num small { color: #8e97ff; } :root[data-theme="dark"] .mn-hecha .mn-anillo-num { color: rgba(179, 186, 255, .6); } :root[data-theme="dark"] .mn-sello { opacity: .92; } :root[data-theme="dark"] .mn-tinta { background: radial-gradient(circle, rgba(60, 207, 145, .55) 0 34%, rgba(60, 207, 145, .18) 52%, rgba(60, 207, 145, 0) 70%); } :root[data-theme="dark"] .mn-pie { border-top-color: rgba(142, 151, 255, .3); } :root[data-theme="dark"] .mn-punto { background: #8b93c9; box-shadow: 0 0 0 3px rgba(139, 147, 201, .2); } :root[data-theme="dark"] .mn-ir { color: #b3baff; } :root[data-theme="dark"] .mn-reclamar { color: #11111a; box-shadow: inset 0 -3px 0 rgba(120, 90, 0, .18), 0 10px 22px -12px rgba(0, 0, 0, .8); } :root[data-theme="dark"] .mn-reclamar:focus-visible { box-shadow: 0 0 0 6px #3d4bff; } /* modo pruebas (gana a las reglas viejas .mi-sim de oscuro-juegos.css) */ :root[data-theme="dark"] .mi-raiz .mn-sim { background: rgba(255, 255, 255, .04); border-color: rgba(142, 151, 255, .42); } :root[data-theme="dark"] .mi-raiz .mn-sim summary { color: #eef0ff; } :root[data-theme="dark"] .mi-raiz .mn-sim summary .ic { color: #b3baff; } :root[data-theme="dark"] .mi-raiz .mn-sim-b { color: #fff; background: #3d4bff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 16px -10px rgba(0, 0, 0, .7); } :root[data-theme="dark"] .mi-raiz .mn-sim-b:hover { background: #4d5aff; box-shadow: inset 0 0 0 1.5px #b3baff, 0 8px 16px -10px rgba(0, 0, 0, .7); } :root[data-theme="dark"] .mi-raiz .mn-sim-b.mn-fuerte { background: #3d4bff; box-shadow: inset 0 0 0 2px #b3baff, 0 10px 20px -12px rgba(0, 0, 0, .8); } :root[data-theme="dark"] .mi-raiz .mn-sim-b:focus-visible { box-shadow: 0 0 0 6px #b3baff; } @media (prefers-reduced-motion: no-preference) { :root[data-theme="dark"] .mn-segs i.mn-s-lista { animation-name: mn-latido-oscuro; } @keyframes mn-latido-oscuro { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 3px rgba(142, 151, 255, .28), 0 4px 12px -4px rgba(61, 75, 255, .9); } } } /* 13-oct · El XP va con la insignia de nivel (rangos.js), como en la barra de arriba: sin el disco azul detrás */ .mn-disco.mn-rango, :root[data-theme="dark"] .mn-disco.mn-rango { background: none; box-shadow: none; width: 28px; height: 28px; } .mn-disco.mn-rango svg { width: 28px; height: 28px; } .mn-total .mn-disco.mn-rango { width: 24px; height: 24px; } .mn-total .mn-disco.mn-rango svg { width: 24px; height: 24px; } /* tienda.css */ /* Campus Remotos Academy — Tienda (tienda.js). Prefijo tda- (y tdB- para el diseño B) para no chocar con otros estilos. 13-oct · Diseño B «Mostrador de juego» (lo eligió el dueño entre 3 propuestas): vidrio claro (la receta de la Sala de juegos), inventario en casillas redondas, pestañas sin JS y baldosas con el dibujo en su pedestal; el botón amarillo es el precio. Usa los tokens de styles.css (--azul, --amarillo, --negro, --font-display) con valores de respaldo. Modo oscuro: oscuro-tienda-logros.css. */ .tda { --tda-azul: var(--azul, #0400bc); --tda-azul2: var(--azul-brillante, #0012fd); --tda-am: var(--amarillo, #ffe400); --tda-negro: var(--negro, #11111a); --tda-t2: var(--text-2, #3a3d55); --tda-t3: var(--text-3, #5d6078); --tda-lav: #6c78ff; --tda-lav2: #b3baff; --tda-display: var(--font-display, "Bebas Neue"), Impact, sans-serif; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; color: var(--tda-negro); } .tda > * { min-width: 0; } .tda-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .tda-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tda-num { font-variant-numeric: tabular-nums; } .tda .fg { display: block; } /* ---------- Vidrio (la receta aprobada de la Sala de juegos) ---------- */ .tda-vidrio { position: relative; isolation: isolate; border: 0; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } .tda-vidrio::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .tda-vidrio::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* ---------- Dibujo de cada poder (SVG a dos tonos) ---------- */ .tda-arte { display: block; } .tda-arte svg { display: block; width: 100%; height: 100%; overflow: visible; } /* ---------- Últimas compras ---------- */ .tda-hist { font-size: 13px; } .tda-hist summary { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-weight: 600; color: var(--tda-azul); border-radius: 8px; list-style: none; } .tda-hist summary::-webkit-details-marker { display: none; } .tda-hist summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s, margin .2s; } .tda-hist[open] summary::after { margin-top: 3px; transform: rotate(-135deg); } .tda-hist ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; } .tda-hist li { display: flex; justify-content: space-between; gap: 8px; color: var(--tda-t2); } .tda-hist-d { white-space: nowrap; color: var(--tda-t3); } .tda-hist-d b { color: var(--tda-negro); font-weight: 600; } /* ---------- Estado de cada poder y botón de reintentar ---------- */ .tda-ficha-t { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; border-radius: 6px; } .tda-ficha-t:focus { outline: none; } .tda-ficha-t:focus-visible { outline: 3px solid var(--tda-azul2) !important; } .tda-ficha-estado { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--tda-azul2); } .tda-ficha-estado:empty { display: none; } .tda-ficha-estado .ic { width: 14px; height: 14px; margin-right: 2px; } .tda-reintentar { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(4,0,188,.08); color: var(--tda-azul); font: 600 13px var(--font, sans-serif); cursor: pointer; } /* ---------- Ventanita de compra ---------- */ .tda-dialogo { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; border-radius: 28px; overflow: auto; color: var(--tda-negro); background: radial-gradient(120% 140% at 0% 0%, #fff 0%, rgba(255,255,255,0) 58%), linear-gradient(150deg, #fbfbff 0%, #f4f5ff 55%, #eceeff 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -18px 28px -18px rgba(4,0,188,.3), 0 40px 90px -30px rgba(4,0,188,.6); } .tda-dialogo::backdrop { background: rgba(17,17,26,.4); backdrop-filter: blur(3px); } .tda-dlg-caja { display: grid; justify-items: center; gap: 10px; padding: 26px 24px 22px; text-align: center; } .tda-dlg-arte .tda-arte { width: 170px; height: 136px; } .tda-dlg-t { margin: 6px 0 0; font-size: 19px; font-weight: 700; line-height: 1.3; } .tda-dlg-d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tda-t2); } .tda-dlg-saldo { margin: 2px 0 0; padding: 8px 14px; border-radius: 14px; background: rgba(4,0,188,.05); font-size: 13.5px; color: var(--tda-t2); } .tda-dlg-saldo:empty { display: none; } .tda-dlg-saldo b { color: var(--tda-negro); } .tda-dlg-saldo span { color: var(--tda-t3); } .tda-dlg-error { margin: 0; font-size: 13.5px; font-weight: 600; color: #c2272d; } .tda-dlg-error[hidden] { display: none; } .tda-dlg-botones { display: flex; gap: 10px; width: 100%; margin-top: 8px; } .tda-dlg-botones .tda-btn { flex: 1 1 0; min-width: 0; } .tda-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1.15 var(--font, "Poppins", sans-serif); color: var(--tda-negro); background: var(--tda-am); box-shadow: 0 10px 22px -12px rgba(160,130,0,.8); transition: filter .15s, transform .15s; } .tda-btn:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); } .tda-btn:disabled { cursor: not-allowed; color: var(--tda-t3); background: rgba(4,0,188,.07); box-shadow: none; } .tda-btn.tda-btn-sec { color: var(--tda-azul); background: rgba(4,0,188,.08); box-shadow: none; font-weight: 600; } .tda .tda-btn:focus-visible, .tda-dialogo .tda-btn:focus-visible { outline: 3px solid var(--tda-azul2); outline-offset: 3px; } /* ---------- Movimiento (nada si la persona pidió menos movimiento) ---------- */ .tda-menos { position: absolute; right: 14px; top: -8px; font-weight: 700; font-size: 14px; color: var(--tda-azul2); pointer-events: none; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .tda > * { animation: tda-k-sube .5s cubic-bezier(.2,.8,.2,1) both; } .tda > :nth-child(3) { animation-delay: .05s; } .tda > :nth-child(4) { animation-delay: .1s; } .tda > :nth-child(5) { animation-delay: .15s; } @keyframes tda-k-sube { from { opacity: 0; transform: translateY(12px); } } .tda-arte.tda-pop { animation: tda-k-pop .7s cubic-bezier(.3,1.6,.5,1); } @keyframes tda-k-pop { 35% { transform: scale(1.12) rotate(-3deg); } 70% { transform: scale(.97); } } [data-tda-fila].tda-brilla { animation: tda-k-brilla 1.25s ease-out; } @keyframes tda-k-brilla { 20% { box-shadow: 0 0 0 4px rgba(0,18,253,.5); } 100% { box-shadow: 0 0 0 16px rgba(0,18,253,0); } } .tda-menos { animation: tda-k-menos 1.1s ease-out forwards; } @keyframes tda-k-menos { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px); } } .tda-dialogo[open] { animation: tda-k-dlg .26s cubic-bezier(.2,.9,.3,1.15); } @keyframes tda-k-dlg { from { opacity: 0; transform: translateY(14px) scale(.96); } } } /* ===================================================================== DISEÑO B · «Mostrador de juego» ===================================================================== */ /* ---------- Cabecera compacta: título, saldo grande y el oso con su globo ---------- */ .tdB-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; min-height: 0; padding: 26px clamp(22px, 4vw, 44px); border-radius: 28px; overflow: hidden; } .tdB-txt { display: grid; justify-items: start; } .tdB-eyebrow { margin: 0; font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--tda-azul2); } .tdB-titulo { margin: 4px 0 4px; font: 400 clamp(56px, 6.4vw, 84px)/.9 var(--tda-display); letter-spacing: .02em; color: var(--tda-azul); } .tdB-sub { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--tda-t2); } .tdB-sub a { color: var(--tda-azul2); font-weight: 600; } .tdB-saldo { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 999px; background: linear-gradient(180deg, #fff, #f1f2ff); box-shadow: inset 0 0 0 1px rgba(108,120,255,.35), inset 0 -8px 14px -10px rgba(4,0,188,.35), 0 14px 28px -18px rgba(4,0,188,.7); } .tdB-saldo-ic { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 6px 10px rgba(160,120,0,.3)); } .tdB-saldo-txt { display: flex; align-items: baseline; gap: 8px; } .tdB-saldo-txt b { font: 400 44px/1 var(--tda-display); letter-spacing: .02em; color: var(--tda-azul); font-variant-numeric: tabular-nums; } .tdB-saldo-txt span { font: 600 13px/1 var(--font); color: #8a6800; } .tdB-oso { position: relative; width: 210px; height: 200px; align-self: end; margin: -10px 0 -30px; } .tdB-oso img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.18); transform-origin: 50% 70%; filter: drop-shadow(0 16px 20px rgba(4,0,120,.25)); } .tdB-globo { position: absolute; right: 168px; top: 26px; padding: 8px 13px; border-radius: 14px; background: var(--tda-azul); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(4,0,188,.9); } .tdB-globo::after { content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left-color: var(--tda-azul); } /* ---------- Inventario: 5 casillas redondas ---------- */ .tdB-inv { padding: 16px 20px 18px; border-radius: 26px; } .tdB-inv-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } /* «Tus últimas compras»: se abre como un desplegable encima, sin mover el inventario (el inventario queda por encima de las baldosas) */ .tdB-inv { z-index: 2; } .tdB-inv-cab { align-items: flex-start; } .tdB-inv-cab .tda-hist { position: relative; z-index: 3; } .tdB-inv-cab .tda-hist ul { position: absolute; right: 0; top: calc(100% + 6px); width: min(340px, calc(100vw - 48px)); margin: 0; padding: 12px 14px; border-radius: 16px; background: linear-gradient(150deg, #fff, #f4f5ff); box-shadow: inset 0 0 0 1px rgba(108,120,255,.25), 0 24px 44px -20px rgba(4,0,188,.55); } .tdB-h2 { margin: 0; font: 400 28px/1 var(--tda-display); letter-spacing: .04em; color: var(--tda-azul); } .tdB-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .tdB-slot { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(108,120,255,.18); } .tdB-slot.on { background: linear-gradient(110deg, rgba(0,18,253,.1), rgba(255,255,255,.75)); box-shadow: inset 0 0 0 1px rgba(0,18,253,.25); } .tdB-anillo { --p: 0; position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(var(--tda-azul2) calc(var(--p) * 1turn), rgba(4,0,188,.1) 0); } .tdB-slot[data-tda-fila="protectores"].on .tdB-anillo, .tdB-slot[data-tda-fila="comodin"].on .tdB-anillo { background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(var(--tda-am) 0 1turn); } .tdB-ic { width: 26px; height: 26px; } .tdB-escudo { width: 30px; height: 35px; } .tdB-llama { position: absolute; width: 16px; height: 16px; left: 20px; top: 20px; } .tdB-inf { width: 30px; height: 18px; } .tdB-inf path { stroke: var(--tda-azul2); } .tdB-5050 { padding-top: 2px; font: 400 17px/1 var(--tda-display); color: var(--tda-azul); } .tdB-slot:not(.on) .tdB-anillo > * { filter: grayscale(1); opacity: .45; } .tdB-slot-txt { display: grid; gap: 2px; min-width: 0; } .tdB-slot-txt b { font-size: 13.5px; line-height: 1.2; } .tdB-val { font-size: 12px; font-weight: 600; color: var(--tda-t3); } .tdB-slot.on .tdB-val { color: var(--tda-azul2); } /* ---------- Mostrador: título, pestañas y la cuadrícula de baldosas ---------- */ .tdB-mostrador-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .tdB-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(108,120,255,.25), 0 10px 24px -18px rgba(4,0,188,.6); } .tdB-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tdB-tabs label { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font: 600 13.5px/1 var(--font); color: var(--tda-t2); cursor: pointer; transition: background .15s, color .15s; } .tdB-tabs label:hover { color: var(--tda-azul); } .tdB-tabs input:checked + label { color: #fff; background: linear-gradient(180deg, #2430ff, #0400bc); box-shadow: 0 8px 16px -8px rgba(4,0,188,.8); } .tdB-tabs input:focus-visible + label { outline: 3px solid var(--tda-azul2); outline-offset: 2px; } .tdB:has(#tdB-t-acelera:checked) .tdB-tile:not([data-grupo="acelera"]), .tdB:has(#tdB-t-protege:checked) .tdB-tile:not([data-grupo="protege"]), .tdB:has(#tdB-t-juega:checked) .tdB-tile:not([data-grupo="juega"]) { display: none; } .tdB-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .tdB-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 14px 16px; border-radius: 24px; text-align: center; transition: transform .18s; } .tdB-tile:hover { transform: translateY(-4px); } .tdB-etq { position: absolute; right: 12px; top: 12px; padding: 3px 9px; border-radius: 999px; font: 700 11px/1.3 var(--font); color: var(--tda-azul); background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(108,120,255,.35); } .tdB-pedestal { position: relative; display: grid; place-items: center; width: 100%; height: 132px; margin: 6px 0 4px; } .tdB-pedestal::before { content: ""; position: absolute; left: 50%; bottom: 6px; width: 140px; height: 28px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,18,253,.22), rgba(0,18,253,0)); } .tdB-pedestal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -54%); border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(179,186,255,.55), rgba(179,186,255,0)); } .tdB-pedestal .tda-arte { position: relative; width: 150px; height: 120px; } .tdB-tile .tda-ficha-t { font-size: 16px; font-weight: 700; } .tdB-que { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tda-t2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tdB-tile .tda-ficha-estado { justify-content: center; } .tdB-precio { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 46px; margin-top: auto; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: 700 13.5px/1.15 var(--font, "Poppins", sans-serif); color: var(--tda-negro); background: var(--tda-am); box-shadow: inset 0 -4px 0 rgba(160,120,0,.28), 0 10px 20px -12px rgba(160,130,0,.85); transition: filter .15s, transform .15s; } .tdB-precio b { font: 400 26px/1 var(--tda-display); letter-spacing: .02em; padding-top: 2px; } .tdB-moneda { width: 24px; height: 24px; flex: none; } .tdB-mas { padding: 3px 8px; white-space: nowrap; border-radius: 999px; background: rgba(17,17,26,.1); font-size: 12px; } .tdB-precio:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); } .tdB-precio:disabled { cursor: not-allowed; color: var(--tda-t3); background: rgba(4,0,188,.07); box-shadow: none; font-weight: 600; } .tdB-precio.falta:disabled { font-size: 12.5px; } .tdB-precio:focus-visible { outline: 3px solid var(--tda-azul2); outline-offset: 3px; } .tdB-grid { margin-top: 0; } /* el espacio para la etiqueta de arriba a la derecha */ .tdB-tile { padding-top: 38px; } /* ---------- Pantallas medianas ---------- */ @media (max-width: 1180px) { .tdB-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tdB-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Celular ---------- */ @media (max-width: 760px) { .tda.tdB { gap: 18px; } .tdB-cab { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 20px; border-radius: 24px; } .tdB-txt { padding-right: 96px; } .tdB-titulo { font-size: 58px; } .tdB-sub { font-size: 14px; } .tdB-saldo-box { margin-right: -96px; } .tdB-oso { position: absolute; right: -8px; top: 12px; width: 120px; height: 130px; margin: 0; } .tdB-globo { display: none; } .tdB-inv { padding: 14px; } .tdB-inv-cab { flex-direction: column; align-items: flex-start; gap: 4px; } .tdB-inv-cab .tda-hist ul { left: 0; right: auto; } /* las casillas se deslizan de lado */ .tdB-slots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 152px; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; } .tdB-slots::-webkit-scrollbar { display: none; } .tdB-slot { scroll-snap-align: start; } .tdB-mostrador-cab { flex-direction: column; align-items: stretch; } .tdB-tabs { overflow-x: auto; scrollbar-width: none; } .tdB-tabs label { flex: none; padding: 0 13px; } .tdB-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tdB-tile { padding: 34px 10px 12px; border-radius: 20px; } .tdB-etq { right: 8px; top: 9px; font-size: 10.5px; } .tdB-pedestal { height: 100px; margin: 0; } .tdB-pedestal .tda-arte { width: 118px; height: 94px; } .tdB-pedestal::after { width: 104px; height: 104px; } .tdB-tile .tda-ficha-t { font-size: 14.5px; } .tdB-que { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .tdB-tile, .tdB-precio, .tdB-tabs label { transition: none; } .tdB-tile:hover { transform: none; } } /* ===================================================================== VITRINA DE CURSOS (USD) · OCULTA desde el 13-oct (MOSTRAR_VITRINA en tienda.js): estilos de antes, sin cambios ===================================================================== */ .tda .fg { display: block; } /* Títulos de sección: Bebas Neue con una figura de la marca */ .tda-h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--tda-display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: .5px; color: var(--tda-negro); } .tda-h2 .fg { position: relative; width: 16px; height: 16px; flex: none; } .tda-h2 .fg.t { width: 18px; height: 16px; } .tda-sec-sub { margin: 6px 0 14px; font-size: 14px; line-height: 1.45; color: var(--tda-t2); } /* ===== Vitrina de cursos: vidrio con boletos ===== */ .tda-vitrina { position: relative; overflow: hidden; isolation: isolate; padding: 24px clamp(16px, 3vw, 28px) 28px; border-radius: 28px; background: linear-gradient(180deg, rgba(226, 230, 255, .92) 0%, rgba(240, 242, 255, .78) 42%, rgba(255, 255, 255, .5) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset; } .tda-vitrina::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(112deg, transparent 0 56%, rgba(255, 255, 255, .55) 56% 61%, transparent 61% 64%, rgba(255, 255, 255, .35) 64% 66%, transparent 66%); } .tda-candado { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(110deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7)); box-shadow: 0 16px 30px -26px rgba(4, 0, 188, .65); } .tda-candado-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--tda-am); background: linear-gradient(140deg, var(--tda-azul), #3341ff); box-shadow: 0 10px 20px -12px rgba(0, 18, 253, .9); } .tda-candado-txt { display: grid; gap: 2px; min-width: 0; } .tda-candado-txt b { font-size: 15px; } .tda-candado-txt p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tda-t2); } .tda-candado.abierto { background: linear-gradient(110deg, rgba(255, 255, 255, .95), rgba(255, 246, 170, .45)); } .tda-avance { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--tda-t2); } .tda-barra { flex: 1; max-width: 260px; height: 8px; border-radius: 99px; background: rgba(4, 0, 188, .1); overflow: hidden; } .tda-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0400bc, #0012fd 75%, #ffe400); } .tda-link { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; font-weight: 600; color: var(--tda-azul); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; border-radius: 8px; } .tda-candado .tda-btn { min-height: 40px; } .tda-tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; } .tda-ticket-li { display: grid; filter: drop-shadow(0 14px 18px rgba(4, 0, 188, .13)); } /* Boleto: muescas a los lados a la altura del corte (máscara en dos mitades) */ .tda-ticket { --corte: 66px; position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 16px 18px 0; border-radius: 20px; background: linear-gradient(170deg, #ffffff 0%, #ffffff 58%, #f5f6ff 100%); -webkit-mask: radial-gradient(circle 10px at left 0 bottom var(--corte), transparent 96%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 10px at right 0 bottom var(--corte), transparent 96%, #000 100%) right / 51% 100% no-repeat; mask: radial-gradient(circle 10px at left 0 bottom var(--corte), transparent 96%, #000 100%) left / 51% 100% no-repeat, radial-gradient(circle 10px at right 0 bottom var(--corte), transparent 96%, #000 100%) right / 51% 100% no-repeat; } .tda-ticket::after { content: ""; position: absolute; right: 16px; top: 18px; width: 11px; height: 11px; border-radius: 50%; background: rgba(4, 0, 188, .08); box-shadow: inset 0 1px 2px rgba(4, 0, 188, .3); } .tda-ticket-cab { display: flex; align-items: center; gap: 10px; padding-right: 22px; } .tda-ticket-fig { position: relative; width: 28px; height: 28px; flex: none; } .tda-ticket-fig .fg { position: absolute; inset: 0; } .tda-ticket-fig .fg.t { inset: 2px 0 0; } .tda-ticket-tipo { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tda-t3); } .tda-ticket-t { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.25; } .tda-ticket-que { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tda-t2); } .tda-ticket-pie { box-sizing: border-box; height: var(--corte); margin: 8px -18px 0; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 2px dashed rgba(4, 0, 188, .16); } .tda-usd { margin: 0; display: inline-flex; align-items: baseline; gap: 5px; color: var(--tda-azul); } .tda-usd span { font-size: 12px; font-weight: 700; letter-spacing: .05em; } .tda-usd b { font-family: var(--tda-display); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: .5px; } .tda-ir { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #fff; text-decoration: none; background: linear-gradient(110deg, var(--tda-azul), var(--tda-azul2)); box-shadow: 0 10px 20px -12px rgba(0, 18, 253, .9); transition: filter .15s, transform .15s; } .tda-ir:hover { color: #fff; text-decoration: none; filter: brightness(1.12); transform: translateY(-1px); } .tda-cerrado { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(4, 0, 188, .06); color: var(--tda-t3); font-size: 12.5px; font-weight: 700; } .tda-vitrina.bloqueada .tda-ticket-cab, .tda-vitrina.bloqueada .tda-ticket-t, .tda-vitrina.bloqueada .tda-ticket-que, .tda-vitrina.bloqueada .tda-usd { opacity: .74; } .tda-vitrina.bloqueada .tda-ticket-fig { filter: grayscale(.7); } .tda-vitrina.cargando .tda-tickets { opacity: .6; } .tda .tda-ir:focus-visible { border-radius: 999px; outline: 3px solid var(--tda-azul2); outline-offset: 3px; } @media (max-width: 760px) { .tda-h2 { font-size: 26px; } .tda-candado { grid-template-columns: 44px minmax(0, 1fr); } .tda-candado-ic { width: 44px; height: 44px; } .tda-candado > .tda-link, .tda-candado > .tda-btn { grid-column: 2; justify-self: start; } .tda-vitrina { padding-left: 16px; padding-right: 16px; } .tda-tickets { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, 300px); gap: 12px; margin: 0 -16px; padding: 4px 16px 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; } .tda-tickets::-webkit-scrollbar { display: none; } .tda-ticket-li { scroll-snap-align: start; } } /* ===== [CERT] 13-oct · Comodín 50/50 dentro de Trivia y Completa la frase (lo vende la Tienda; el botón lo pinta app.js) ===== */ [data-ruta="juegos"] .pc-comodin { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 20px 6px 6px; border: 0; border-radius: 999px; font: inherit; text-align: left; cursor: pointer; transition: transform .15s; } [data-ruta="juegos"] .pc-comodin:hover { transform: translateY(-2px); } [data-ruta="juegos"] .pc-comodin:focus-visible { outline: 3px solid #0012fd; outline-offset: 3px; } .pc-comodin-ic { display: grid; place-items: center; min-width: 58px; height: 40px; padding: 2px 10px 0; border-radius: 999px; color: #fff; font: 400 19px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; letter-spacing: .04em; background: radial-gradient(120% 120% at 30% 22%, #4a54ff 0%, #0012fd 40%, #0400bc 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -4px 6px rgba(4, 0, 120, .45), 0 6px 12px -5px rgba(4, 0, 188, .75); } .pc-comodin-txt { display: grid; gap: 3px; line-height: 1.2; } .pc-comodin-txt b { font: 600 14.5px/1.2 var(--font, "Poppins", sans-serif); color: #0400bc; } .pc-comodin-txt small { font: 500 12.5px/1.25 var(--font, "Poppins", sans-serif); color: var(--text-2, #3a3d55); } [data-ruta="juegos"] .pc-comodin-usado { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 600 14.5px/1.4 var(--font, "Poppins", sans-serif); color: #0400bc; } .pc-comodin-usado small { font-size: 13px; font-weight: 500; color: var(--text-2, #3a3d55); } /* las que quita el comodín: casi transparentes, tachadas y abajo (gana a la regla de «deshabilitada» de juegos-sala.css) */ [data-ruta="juegos"] .pc-opciones .opcion.descartada:disabled:not(.correcta):not(.elegida) { opacity: .26; transform: translateY(10px) scale(.94); } [data-ruta="juegos"] .pc-opciones .opcion.descartada .pc-op-txt { text-decoration: line-through; text-decoration-thickness: 2px; } :root[data-theme="dark"] .pc-comodin-txt b, :root[data-theme="dark"] [data-ruta="juegos"] .pc-comodin-usado { color: #b3baff; } @media (max-width: 760px) { [data-ruta="juegos"] .pc-juego .partida-pie .pc-comodin { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { [data-ruta="juegos"] .pc-comodin { transition: none; } [data-ruta="juegos"] .pc-comodin:hover { transform: none; } } /* logros.css */ /* Campus Remotos Academy · 13-oct · Diseño C «Álbum por categorías» — estilos de «Logros» (logros.js). Archivo aparte de styles.css. Los logros agrupados por categoría como un álbum de colección: cabecera con el anillo total y el oso, índice de categorías con su mini avance, filtro en cápsula y una página de vidrio por categoría con sus medallas (ganadas a color con su fecha; por ganar en gris con un anillo de avance alrededor). Reutiliza de styles.css: .btn, .btn-gold, .btn-soft y .sr-only. Lo propio lleva el prefijo lg-. Versión clara · liquid glass (la receta aprobada de .tda-vidrio) · paleta #0400BC #0012FD #6C78FF #B3BAFF #11111A · amarillo #FFE400 solo en detalles y en el botón principal · sin confeti ni figuras sueltas. Se arma primero para el celular y crece con el ancho del propio contenido (container queries sobre .lg-raiz). */ /* ---------- Base y colores de la propuesta ---------- */ .lg-raiz, .lg-dialogo, .lg-aviso { --lg-azul: #0400bc; --lg-azul-b: #0012fd; --lg-lav: #6c78ff; --lg-lav-c: #b3baff; --lg-am: #ffe400; --lg-negro: #11111a; --lg-t2: #3a3d55; --lg-t3: #5d6078; --lg-bebas: var(--font-display, "Bebas Neue", Impact, sans-serif); --lg-pop: var(--font, "Poppins", system-ui, sans-serif); } .lg-raiz { container: lg-raiz / inline-size; display: grid; gap: 18px; min-width: 0; color: var(--lg-negro); } .lg-raiz > * { min-width: 0; } .lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Foco visible igual al del campus (amarillo + azul), también sobre las piezas de vidrio */ .lg-raiz button:focus-visible, .lg-raiz a:focus-visible, .lg-aviso button:focus-visible, .lg-aviso a:focus-visible { outline: 3px solid #ffe400 !important; outline-offset: 2px; box-shadow: 0 0 0 6px #0400bc !important; } /* El título de la página del álbum recibe el foco al llegar desde el índice: con teclado, subrayado amarillo */ .lg-al-titulo:focus { outline: none; } .lg-al-titulo:focus-visible { text-decoration: underline; text-decoration-color: var(--lg-am); text-decoration-thickness: 3px; text-underline-offset: 5px; } /* ---------- Vidrio (receta aprobada: velo blanco degradado, filo de luz de 2 px, grosor por dentro y grano al 7 %) ---------- */ .lg-cab, .lg-al-chip, .lg-filtros, .lg-al-panel, .lg-vacio { position: relative; isolation: isolate; border: 0; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } .lg-cab::before, .lg-al-chip::before, .lg-filtros::before, .lg-al-panel::before, .lg-vacio::before, .lg-d-caja::before, .lg-a-caja::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .lg-cab::after, .lg-al-chip::after, .lg-filtros::after, .lg-al-panel::after, .lg-vacio::after, .lg-d-caja::after, .lg-a-caja::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* La tarjeta de nivel de arriba (la pinta app.js) suma el mismo grano para que todo sea del mismo vidrio */ :root:not([data-theme="dark"]) .lg-nivel-cab .level-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } /* ---------- Medalla: el dibujo completo de cada logro (ya trae su disco y su borde) ---------- */ .lg-med { --t: 64px; --aro-g: 4px; --aro-s: 5px; position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: var(--t); height: var(--t); } .lg-med picture { display: contents; } .lg-med img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; } .lg-med.on img { filter: drop-shadow(0 6px 10px rgba(4,0,188,.24)); } /* Ganada: una luz lavanda suave detrás; las de oro, un halo dorado */ .lg-med.on::before { content: ""; position: absolute; inset: -16%; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(108,120,255,.24) 0%, rgba(108,120,255,.08) 45%, rgba(108,120,255,0) 68%); } .lg-med.oro::before { inset: -30%; background: radial-gradient(circle, rgba(255,228,0,.6) 0%, rgba(255,228,0,.22) 40%, rgba(255,228,0,0) 68%); } /* Por ganar: en gris, con su candado y el anillo de avance alrededor (conic-gradient con el % de medir) */ .lg-med.off img { filter: grayscale(1); opacity: .55; } .lg-med-aro { position: absolute; inset: calc((var(--aro-g) + var(--aro-s)) * -1); z-index: 0; border-radius: 50%; pointer-events: none; } .lg-med-aro::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--lg-lav) 0%, var(--lg-azul-b) calc(var(--p, 0) * 1%), rgba(4,0,188,.1) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--aro-g) - .6px), #000 calc(100% - var(--aro-g))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--aro-g) - .6px), #000 calc(100% - var(--aro-g))); } /* «¡Casi!»: la punta del anillo lleva un punto amarillo */ .lg-med.casi .lg-med-aro::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; transform: rotate(calc(var(--p, 0) * 3.6deg)); background: radial-gradient(circle at 50% calc(4px + var(--aro-g) / 2), var(--lg-am) 0 calc(var(--aro-g) * .85), #fff calc(var(--aro-g) * .85 + .5px) calc(var(--aro-g) * .85 + 2px), rgba(255,255,255,0) calc(var(--aro-g) * .85 + 2.6px)); } .lg-candado { position: absolute; z-index: 2; right: 4%; bottom: 4%; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #4a4d63; box-shadow: 0 0 0 1.5px rgba(4,0,188,.08), 0 4px 10px -4px rgba(4,0,188,.5); } .lg-candado .ic { width: 11px; height: 11px; } .lg-med.xl { --t: 112px; --aro-g: 6px; --aro-s: 7px; } .lg-med.xl .lg-candado { right: 8%; bottom: 8%; width: 32px; height: 32px; } .lg-med.xl .lg-candado .ic { width: 15px; height: 15px; } .lg-med.xxl { --t: 132px; } /* ---------- Cabecera: título, anillo total y el oso ---------- */ .lg-cab { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt txt" "anillo panda"; align-items: end; gap: 6px 12px; padding: 22px 18px 0 22px; border-radius: 26px; } .lg-cab-txt { grid-area: txt; min-width: 0; } .lg-cab-etq { margin: 0 0 6px; font: 600 11px/1.2 var(--lg-pop); letter-spacing: .18em; text-transform: uppercase; color: var(--lg-azul-b); } .lg-titulo { margin: 0; font: 400 54px/.86 var(--lg-bebas); letter-spacing: 1.5px; color: var(--lg-azul); } .lg-lema { margin: 10px 0 0; max-width: 46ch; font: 400 14px/1.5 var(--lg-pop); color: var(--lg-t2); } .lg-anillo { grid-area: anillo; align-self: center; justify-self: start; display: grid; justify-items: center; gap: 6px; padding: 6px 0 20px; } .lg-anillo-graf { position: relative; display: block; width: 112px; height: 112px; } /* Lente de vidrio en el centro del anillo */ .lg-anillo-graf::before { content: ""; position: absolute; inset: 14.5%; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #fff 0%, rgba(255,255,255,.7) 45%, rgba(236,238,255,.55) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -8px 14px -10px rgba(4,0,188,.3), 0 10px 22px -14px rgba(4,0,188,.5); } .lg-anillo-graf svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; } .lg-anillo-fondo { stroke: rgba(4,0,188,.09); } .lg-anillo-punta { fill: #ffe400; stroke: #fff; stroke-width: 2.5; } .lg-anillo-n { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; } .lg-anillo-n b { font: 400 46px/.8 var(--lg-bebas); color: var(--lg-azul); padding-top: 6px; } .lg-anillo-n span { font: 600 11.5px/1.2 var(--lg-pop); color: var(--lg-t3); } .lg-anillo-l { font: 600 10.5px/1.2 var(--lg-pop); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-t3); } .lg-panda { grid-area: panda; justify-self: end; align-self: end; width: 148px; height: 148px; object-fit: cover; object-position: 50% 42%; transform: scale(1.22); transform-origin: 50% 88%; filter: drop-shadow(0 14px 18px rgba(4,0,188,.2)); pointer-events: none; user-select: none; } /* ---------- Índice del álbum: una ficha por categoría con su mini avance ---------- */ .lg-al-indice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lg-al-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "aro nom" "aro n"; align-items: center; column-gap: 10px; row-gap: 2px; min-height: 60px; margin: 0; padding: 9px 12px 9px 9px; border-radius: 18px; color: var(--lg-negro); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 22px rgba(255,255,255,.3), inset 0 -10px 18px -14px rgba(4,0,188,.22), 0 2px 6px rgba(4,0,188,.06), 0 16px 30px -22px rgba(4,0,188,.55); } .lg-al-chip-aro { grid-area: aro; position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--lg-azul); background: conic-gradient(var(--lg-azul-b) calc(var(--p, 0) * 1%), rgba(4,0,188,.11) 0); } .lg-al-chip-aro::before { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #fff 0%, #f3f4ff 100%); box-shadow: 0 1px 2px rgba(4,0,188,.14); } .lg-al-chip-aro .ic { position: relative; z-index: 1; width: 17px; height: 17px; } .lg-al-chip.lleno .lg-al-chip-aro { color: var(--lg-am); } .lg-al-chip.lleno .lg-al-chip-aro::before { background: linear-gradient(145deg, #0012fd, #0400bc); } .lg-al-chip-nom { grid-area: nom; align-self: end; font: 600 12.5px/1.2 var(--lg-pop); } .lg-al-chip-n { grid-area: n; align-self: start; padding-top: 1px; font: 400 17px/1 var(--lg-bebas); letter-spacing: .6px; color: var(--lg-azul); } @media (hover: hover) { .lg-al-chip:hover { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 22px rgba(255,255,255,.45), inset 0 -10px 18px -14px rgba(4,0,188,.22), 0 2px 6px rgba(4,0,188,.08), 0 20px 34px -20px rgba(4,0,188,.6); } } /* ---------- Filtro en cápsula: Todos / Ganados / Por ganar ---------- */ .lg-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 999px; box-shadow: inset 0 1px 1px #fff, inset 0 0 18px rgba(255,255,255,.3), inset 0 -8px 14px -10px rgba(4,0,188,.22), 0 2px 6px rgba(4,0,188,.06), 0 14px 28px -20px rgba(4,0,188,.5); } .lg-filtros button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 42px; padding: 0 6px 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--lg-t2); font: 600 12.5px/1 var(--lg-pop); white-space: nowrap; cursor: pointer; } .lg-filtros button[aria-pressed="true"] { color: var(--lg-azul); background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(4,0,188,.06), 0 8px 18px -10px rgba(4,0,188,.55); } .lg-f-n { min-width: 24px; height: 22px; padding: 3px 6px 0; border-radius: 999px; display: inline-grid; place-items: center; font: 400 16px/1 var(--lg-bebas); letter-spacing: .5px; color: var(--lg-azul); background: rgba(4,0,188,.07); } .lg-filtros button[aria-pressed="true"] .lg-f-n { background: var(--lg-am); color: var(--lg-negro); } @media (hover: hover) { .lg-filtros button[aria-pressed="false"]:hover { color: var(--lg-azul); background: rgba(255,255,255,.5); } } /* ---------- Páginas del álbum: un panel de vidrio por categoría ---------- */ .lg-listas { min-width: 0; } .lg-al-paginas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .lg-al-panel { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 10px 10px; border-radius: 26px; scroll-margin-top: 80px; } .lg-al-cab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 6px; } .lg-al-ic { flex: none; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--lg-azul); background: radial-gradient(110% 80% at 20% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%), linear-gradient(150deg, rgba(255,255,255,.75) 0%, rgba(232,235,255,.55) 55%, rgba(0,18,253,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -8px 14px -10px rgba(4,0,188,.35), 0 0 0 1.5px rgba(0,18,253,.12), 0 10px 20px -14px rgba(4,0,188,.55); } .lg-al-panel.lleno .lg-al-ic { color: var(--lg-am); background: linear-gradient(150deg, #0012fd 0%, #0400bc 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 10px 20px -12px rgba(4,0,188,.7); } .lg-al-cab-txt { flex: 1; min-width: 0; display: grid; gap: 3px; } .lg-al-titulo { margin: 0; font: 400 26px/.95 var(--lg-bebas); letter-spacing: .6px; color: var(--lg-negro); } .lg-al-sub { margin: 0; font: 500 12px/1.35 var(--lg-pop); color: var(--lg-t3); } .lg-al-cuenta { flex: none; margin: 0; display: flex; align-items: baseline; gap: 5px; font: 500 12.5px/1 var(--lg-pop); color: var(--lg-t3); white-space: nowrap; } .lg-al-cuenta b { font: 400 30px/.8 var(--lg-bebas); letter-spacing: .5px; color: var(--lg-azul); } .lg-al-ok { align-self: center; margin-right: 6px; padding: 4px 8px 3px; border-radius: 999px; background: var(--lg-am); color: var(--lg-negro); font: 700 9.5px/1.2 var(--lg-pop); letter-spacing: .08em; text-transform: uppercase; } .lg-al-barra { height: 6px; margin: 0 6px; border-radius: 99px; overflow: hidden; background: rgba(4,0,188,.08); box-shadow: inset 0 1px 1px rgba(4,0,188,.05); } .lg-al-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lg-azul) 0%, var(--lg-azul-b) 65%, var(--lg-lav) 100%); transform-origin: 0 50%; } /* Página sin fichas con el filtro puesto: la nota queda centrada en el alto que sobra */ .lg-al-nada { margin: auto 6px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.42); box-shadow: inset 0 1px 1px #fff; font: 500 13.5px/1.4 var(--lg-pop); color: var(--lg-t3); text-align: center; } /* Al llegar desde el índice, la página se marca un momento con un filo lavanda */ .lg-al-panel { outline: 3px solid rgba(108,120,255,0); outline-offset: 7px; } .lg-al-panel.lg-al-resalta { outline-color: rgba(108,120,255,.6); outline-offset: 3px; } /* Fichas: la medalla flota sobre la página; la ficha se aclara al pasar el puntero. Anchos medidos para que la palabra más larga («Transformación»: 98 px a 12 px, 102 px a 12,5 px) nunca se corte. */ .lg-al-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 4px; } .lg-al-grid > li { display: flex; min-width: 0; } .lg-al-ficha { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; padding: 12px 2px 10px; border: 0; border-radius: 18px; background: transparent; color: var(--lg-negro); font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Caja fija del tamaño del anillo: la ganada la llena entera y la bloqueada queda más chica, dentro de su anillo */ .lg-al-med { --caja: 74px; position: relative; display: grid; place-items: center; width: var(--caja); height: var(--caja); margin: 2px 0 12px; } .lg-al-ficha .lg-med { --t: calc(var(--caja) - 18px); } .lg-al-ficha .lg-med.on { --t: calc(var(--caja) - 2px); } .lg-al-nom { max-width: 100%; font: 600 12px/1.25 var(--lg-pop); overflow-wrap: break-word; } .lg-al-ficha.lg-pend .lg-al-nom { color: #3f4257; } .lg-al-meta { margin-top: auto; padding-top: 3px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font: 600 11px/1.2 var(--lg-pop); color: var(--lg-azul); white-space: nowrap; } .lg-al-ficha.lg-gana .lg-al-meta { font-weight: 500; color: var(--lg-t3); } .lg-al-meta .ic { flex: none; width: 12px; height: 12px; color: var(--lg-azul-b); stroke-width: 3; } .lg-prog-ic { width: 14px; height: 14px; flex: none; display: block; } /* «Nuevo» y «¡Casi!»: etiqueta amarilla sobre el borde de abajo de la medalla */ .lg-al-tag { position: absolute; z-index: 3; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 3px 7px 2px; border-radius: 999px; white-space: nowrap; background: var(--lg-am); color: var(--lg-negro); font: 700 9.5px/1.2 var(--lg-pop); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(150,120,0,.7); } @media (hover: hover) { .lg-al-ficha:hover { background: radial-gradient(100% 80% at 50% 0%, rgba(255,255,255,.85), rgba(255,255,255,.38)); box-shadow: inset 0 1px 1px #fff, 0 14px 28px -22px rgba(4,0,188,.6); } } /* ---------- Vacíos ---------- */ .lg-vacio { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 20px; border-radius: 26px; text-align: center; } .lg-vacio img { width: 112px; height: 112px; flex: none; object-fit: cover; object-position: 50% 42%; transform: scale(1.28); } .lg-vacio-txt { display: grid; justify-items: center; gap: 4px; min-width: 0; } .lg-vacio-txt b { font: 700 16px/1.3 var(--lg-pop); } .lg-vacio-txt span { font-size: 14px; line-height: 1.45; color: var(--lg-t2); } .lg-vacio-txt .btn { margin-top: 10px; min-height: 44px; height: auto; padding: 10px 22px; border-radius: 999px; font-weight: 700; } /* ---------- Cargando (si el estado llega por la red) ---------- */ .lg-cargando { display: grid; gap: 16px; } .lg-sk { display: block; border-radius: 22px; background: linear-gradient(90deg, rgba(4,0,188,.05), rgba(4,0,188,.1), rgba(4,0,188,.05)); background-size: 200% 100%; } .lg-sk-cab { height: 300px; border-radius: 26px; } .lg-sk-fila { display: grid; gap: 8px; } .lg-sk-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-sk-ind .lg-sk { height: 60px; border-radius: 18px; } .lg-sk-pag { grid-template-columns: minmax(0, 1fr); gap: 16px; } .lg-sk-pag .lg-sk { height: 340px; border-radius: 26px; } /* ---------- Celulares angostos (360 px o menos): letra un poco menor y, en los más chicos, dos columnas ---------- */ @container lg-raiz (max-width: 339px) { .lg-al-panel { padding-left: 8px; padding-right: 8px; } .lg-al-nom { font-size: 11.5px; } .lg-al-titulo { font-size: 24px; } } @container lg-raiz (max-width: 309px) { .lg-al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-al-indice { grid-template-columns: minmax(0, 1fr); } } /* ---------- Tableta y PC: crece con el ancho del contenido ---------- */ @container lg-raiz (min-width: 600px) { .lg-cab { grid-template-columns: minmax(0, 1fr) auto 168px; grid-template-areas: "txt anillo panda"; align-items: center; gap: 10px 28px; min-height: 200px; padding: 24px 22px 24px 32px; border-radius: 30px; } .lg-titulo { font-size: 66px; } .lg-lema { font-size: 15px; } .lg-anillo { padding: 0; } .lg-anillo-graf { width: 136px; height: 136px; } .lg-anillo-n b { font-size: 56px; } .lg-anillo-n span { font-size: 12.5px; } .lg-anillo-l { font-size: 11px; } .lg-panda { align-self: center; width: 168px; height: 168px; transform: scale(1.3); transform-origin: 50% 50%; } .lg-al-indice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .lg-al-chip { min-height: 64px; padding: 10px 12px 10px 10px; border-radius: 20px; } .lg-al-chip-nom { font-size: 13px; } .lg-filtros { display: inline-flex; justify-self: start; } .lg-filtros button { gap: 8px; padding: 0 7px 0 16px; font-size: 13.5px; } .lg-f-n { min-width: 28px; height: 26px; padding: 3px 8px 0; font-size: 18px; } .lg-al-panel { padding: 20px 16px 12px; border-radius: 28px; } .lg-al-titulo { font-size: 28px; } .lg-al-sub { font-size: 12.5px; } .lg-al-cuenta b { font-size: 32px; } .lg-al-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 4px 6px; } .lg-al-ficha { padding: 14px 2px 12px; } .lg-al-med { --caja: 80px; } .lg-al-nom { font-size: 12.5px; } .lg-al-meta { font-size: 11.5px; } .lg-vacio { flex-direction: row; text-align: left; padding: 20px 26px; } .lg-vacio-txt { justify-items: start; } .lg-sk-cab { height: 200px; border-radius: 30px; } .lg-sk-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Laptop chica (≈ 1024 px): ocho medallas por fila, así Estudio entra completa en una */ @container lg-raiz (min-width: 890px) and (max-width: 999px) { .lg-al-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px 4px; } .lg-al-nom { font-size: 12px; } } @container lg-raiz (min-width: 1000px) { .lg-cab { grid-template-columns: minmax(0, 1fr) auto 196px; gap: 10px 44px; min-height: 220px; padding: 26px 30px 26px 40px; } .lg-titulo { font-size: 80px; } .lg-lema { max-width: 40em; } .lg-anillo-graf { width: 152px; height: 152px; } .lg-anillo-n b { font-size: 64px; } .lg-panda { width: 196px; height: 196px; } .lg-al-indice { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* Páginas de a dos, como un álbum abierto; cada pareja tiene el mismo alto */ .lg-al-paginas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .lg-al-paginas .lg-al-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg-sk-ind { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg-sk-pag { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Panel de detalle (dialog) ---------- */ .lg-dialogo, .lg-aviso { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; color: var(--lg-negro); overflow: hidden; } .lg-dialogo[open], .lg-aviso[open] { display: grid; place-items: center; } .lg-dialogo::backdrop { background: rgba(16,18,52,.34); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); } /* La caja y el aviso: el mismo vidrio, más cubriente para leer bien sobre la página atenuada */ .lg-d-caja, .lg-a-caja { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 70% at 0% 0%, #fff 0%, rgba(255,255,255,0) 55%), linear-gradient(165deg, rgba(255,255,255,.94) 0%, rgba(248,249,255,.92) 55%, rgba(234,237,255,.9) 100%); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.5), inset 0 -18px 30px -20px rgba(4,0,188,.25), 0 2px 8px rgba(4,0,188,.08), 0 44px 90px -34px rgba(4,0,188,.65); } .lg-d-caja { width: min(100%, 460px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 30px; } .lg-d-cuerpo { min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; justify-items: center; gap: 10px; padding: 24px 26px 22px; text-align: center; } .lg-d-cerrar, .lg-a-cerrar { position: absolute; z-index: 3; top: 12px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--lg-azul); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 1px #fff, 0 0 0 1px rgba(4,0,188,.08), 0 6px 14px -8px rgba(4,0,188,.45); } @media (hover: hover) { .lg-d-cerrar:hover, .lg-a-cerrar:hover { background: #fff; } } .lg-d-cat { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 5px; border-radius: 999px; font: 600 11px/1.2 var(--lg-pop); letter-spacing: .1em; text-transform: uppercase; color: var(--lg-azul-b); background: rgba(4,0,188,.06); } .lg-d-luz { position: relative; display: grid; place-items: center; width: 176px; height: 160px; } .lg-d-luz .lg-med.on { --t: 136px; } .lg-d-luz::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(179,186,255,.42) 0%, rgba(179,186,255,.12) 44%, rgba(179,186,255,0) 68%); } .lg-d-caja.oro .lg-d-luz::before { display: none; } .lg-d-luz .lg-med { position: relative; z-index: 1; } .lg-d-estado { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--lg-pop); } .lg-d-estado.on { color: var(--lg-azul); background: rgba(4,0,188,.07); } .lg-d-estado.off { color: #4a4d63; background: rgba(17,17,26,.06); } .lg-d-nom { margin: 4px 0 0; max-width: 20ch; font: 400 36px/.95 var(--lg-bebas); letter-spacing: .6px; color: var(--lg-azul); } .lg-d-desc { margin: 0; max-width: 36ch; font-size: 15px; line-height: 1.45; color: var(--lg-t2); } .lg-d-ok { margin: 4px 0 0; font: 600 14px/1.4 var(--lg-pop); color: var(--lg-azul); } .lg-d-prog { width: 100%; display: grid; gap: 8px; margin-top: 6px; padding: 14px 16px; border-radius: 18px; text-align: left; background: rgba(255,255,255,.62); box-shadow: inset 0 1px 1px #fff, 0 0 0 1px rgba(4,0,188,.06), 0 10px 22px -18px rgba(4,0,188,.45); } .lg-d-prog-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--lg-t2); } .lg-d-prog-cab b { display: inline-flex; align-items: center; gap: 5px; color: var(--lg-azul); font-size: 14px; } .lg-prog-barra { position: relative; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(4,0,188,.09); } .lg-prog-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0400bc 0%, #0012fd 70%, #6c78ff 100%); } .lg-d-barra { height: 10px; } .lg-d-sig { margin: 0; font-weight: 600; font-size: 14px; color: var(--lg-negro); } .lg-d-como { width: 100%; margin-top: 2px; text-align: left; } .lg-d-como h3 { margin: 0 0 4px; font: 600 11.5px/1.3 var(--lg-pop); letter-spacing: .08em; text-transform: uppercase; color: var(--lg-t3); } .lg-d-como p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lg-t2); } .lg-d-acciones { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; } .lg-d-acciones .btn { min-height: 46px; height: auto; padding: 10px 22px; border-radius: 999px; font-weight: 700; } .lg-d-acciones .btn-gold { box-shadow: 0 12px 24px -14px rgba(170,140,0,.8); } .lg-d-acciones .btn-soft { background: rgba(4,0,188,.06); color: var(--lg-azul); } /* ---------- Aviso «¡Logro desbloqueado!» (vidrio claro, sin confeti) ---------- */ .lg-aviso::backdrop { background: rgba(16,18,52,.42); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); } .lg-a-caja { width: min(100%, 400px); display: grid; justify-items: center; gap: 6px; padding: 22px 26px 26px; border-radius: 32px; text-align: center; color: var(--lg-negro); } .lg-a-luz { position: relative; display: grid; place-items: center; width: 240px; height: 196px; } .lg-a-luz::before { content: ""; position: absolute; left: 50%; top: 50%; width: 236px; height: 236px; margin: -118px 0 0 -118px; border-radius: 50%; background: radial-gradient(circle, rgba(179,186,255,.6) 0%, rgba(179,186,255,.2) 40%, rgba(179,186,255,0) 68%); } .lg-a-caja.oro .lg-a-luz::before { background: radial-gradient(circle, rgba(255,228,0,.42) 0%, rgba(255,228,0,.14) 40%, rgba(255,228,0,0) 68%); } .lg-a-rayos { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: repeating-conic-gradient(rgba(108,120,255,.16) 0deg 6deg, rgba(108,120,255,0) 6deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 62%); mask-image: radial-gradient(circle, #000 20%, transparent 62%); } .lg-a-luz .lg-med { position: relative; z-index: 1; } .lg-a-etq { margin: 4px 0 0; font: 700 12px/1.2 var(--lg-pop); letter-spacing: .2em; text-transform: uppercase; color: var(--lg-azul-b); } .lg-a-nom { margin: 0; font: 400 clamp(38px, 9vw, 48px)/.92 var(--lg-bebas); letter-spacing: .6px; color: var(--lg-azul); } .lg-a-desc { margin: 2px 0 0; max-width: 30ch; font-size: 14.5px; line-height: 1.45; color: var(--lg-t2); } .lg-a-cat { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 5px; border-radius: 999px; font: 600 12px/1.25 var(--lg-pop); color: var(--lg-azul); background: rgba(4,0,188,.06); box-shadow: inset 0 0 0 1px rgba(4,0,188,.06); } .lg-a-acciones { width: 100%; display: grid; justify-items: center; gap: 12px; margin-top: 16px; } .lg-a-ok { min-width: 220px; height: 50px; padding: 0 26px; border-radius: 999px; font-size: 15.5px; font-weight: 700; box-shadow: 0 14px 26px -14px rgba(170,140,0,.85); } .lg-a-ver { color: var(--lg-azul); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) { .lg-a-ver:hover { color: var(--lg-azul-b); } } /* ---------- Celular: el panel de detalle sube desde abajo como una hoja ---------- */ @media (max-width: 600px) { .lg-dialogo { padding: 0; } .lg-dialogo[open] { place-items: end stretch; } .lg-d-caja { width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 28px 28px 0 0; } .lg-d-cuerpo { padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); } .lg-d-acciones .btn { flex: 1 1 140px; } .lg-a-caja { padding: 20px 20px 24px; } } /* ---------- Movimiento (solo si el sistema no pide reducirlo) ---------- */ @media (prefers-reduced-motion: no-preference) { .lg-al-chip, .lg-al-ficha, .lg-filtros button, .lg-d-cerrar, .lg-a-cerrar { transition: background-color .18s, box-shadow .2s, transform .2s, color .18s; } .lg-al-ficha .lg-med { transition: transform .28s cubic-bezier(.3,1.4,.5,1); } .lg-al-panel { transition: outline-color .45s, outline-offset .45s; } .lg-al-grid > li { animation: lg-sube .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(min(var(--i, 0), 8) * 40ms); } .lg-al-barra i { animation: lg-llena .9s .1s cubic-bezier(.2,.8,.2,1) both; } .lg-anillo-val { animation: lg-trazo 1.1s cubic-bezier(.2,.8,.2,1) both; } .lg-al-ficha.nuevo .lg-med.on::before { animation: lg-latido 2.4s ease-in-out infinite; } .lg-dialogo[open] .lg-d-caja { animation: lg-aparece .3s cubic-bezier(.2,.9,.3,1.1) both; } .lg-aviso[open] .lg-a-caja { animation: lg-aparece .45s cubic-bezier(.2,.9,.3,1.2) both; } .lg-aviso[open] .lg-a-luz .lg-med { animation: lg-pop .7s .1s cubic-bezier(.3,1.6,.5,1) both; } .lg-a-rayos { animation: lg-gira 22s linear infinite; } .lg-sk { animation: lg-brillo 1.4s ease-in-out infinite; } @media (hover: hover) { .lg-al-chip:hover { transform: translateY(-2px); } .lg-al-ficha:hover .lg-med { transform: translateY(-3px) scale(1.05); } } @keyframes lg-sube { from { opacity: 0; transform: translateY(10px); } } @keyframes lg-llena { from { transform: scaleX(0); } } @keyframes lg-trazo { from { stroke-dashoffset: 352; } } @keyframes lg-latido { 50% { transform: scale(1.18); opacity: .7; } } @keyframes lg-aparece { from { opacity: 0; transform: translateY(14px) scale(.96); } } @keyframes lg-pop { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.08) rotate(3deg); opacity: 1; } 100% { transform: none; } } @keyframes lg-gira { to { transform: rotate(360deg); } } @keyframes lg-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } } } @media (max-width: 600px) and (prefers-reduced-motion: no-preference) { .lg-dialogo[open] .lg-d-caja { animation: lg-hoja .32s cubic-bezier(.2,.9,.3,1) both; } @keyframes lg-hoja { from { transform: translateY(40px); opacity: .4; } } } /* ---------- Si el sistema pide menos transparencia o más contraste: vidrio casi sólido ---------- */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .lg-cab, .lg-al-chip, .lg-filtros, .lg-al-panel, .lg-vacio { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } .lg-d-caja, .lg-a-caja { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* [CERT] 13-oct · Tarjeta de nivel (la pinta app.js): la insignia de tu rango en lugar del bloque con el número */ .lg-nivel-cab .level-badge.rango { position: relative; width: 84px; height: 84px; border-radius: 0; background: none !important; box-shadow: none !important; } .lg-nivel-cab .level-badge.rango > svg { display: block; width: 84px; height: 84px; } .lg-nivel-cab .level-badge.rango small { bottom: -8px; white-space: nowrap; } @media (max-width: 600px) { .lg-nivel-cab .level-badge.rango, .lg-nivel-cab .level-badge.rango > svg { width: 66px; height: 66px; } } /* oscuro.css */ /* ===================================================================================================== [CERT] Modo oscuro del Campus (09-oct-2026). Parte 1: base + Perfil. Solo actúa si la persona elige «Oscuro» en Perfil › Preferencias (html[data-theme="dark"]). Lo normal es siempre claro. Mientras se terminan las demás pantallas, el selector y el oscuro solo funcionan en el visor local. Paleta de marca para la noche: fondo azul noche (#11111A con el azul #0400BC) y las mismas formas azules de atrás; vidrio oscuro translúcido, sin desenfoque fuerte (se ven las formas del fondo, como en claro), con filo de luz y grano; texto casi blanco; azul de marca aclarado (#b3baff) para textos e íconos; botones en azul vivo (#2a37e8); amarillo igual. ===================================================================================================== */ /* 1. Tokens */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0c1d; --surface: #16182f; --surface-2: #1c1f3c; --surface-3: #2a2e55; --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --text: #eef0ff; --text-2: #d6d9f3; --text-3: #c0c4e5; --negro: #eef0ff; --azul: #b3baff; --azul-brillante: #6c78ff; --primary: #b3baff; --primary-600: #a7aeff; --primary-soft: rgba(142,151,255,.16); --primary-contrast: #ffffff; --success: #45d39a; --success-soft: rgba(69,211,154,.15); --warning: #f7b55a; --warning-soft: rgba(247,181,90,.15); --danger: #ff7a7e; --danger-soft: rgba(255,122,126,.15); --info: #73bcff; --info-soft: rgba(115,188,255,.15); --gold: #f4c95d; --gold-2: #f4c95d; --gold-soft: rgba(244,201,93,.15); --focus: #b3baff; --sh-xs: 0 1px 2px rgba(0,0,0,.4); --sh-sm: 0 1px 3px rgba(0,0,0,.45); --sh: 0 8px 20px -8px rgba(0,0,0,.6); --sh-lg: 0 24px 48px -12px rgba(0,0,0,.7); } /* 2. Fondo: azul noche arriba → tinta abajo, con las formas azules de la marca y la «R» de marca de agua en blanco tenue */ :root[data-theme="dark"] body { background: linear-gradient(180deg, #121452 0px, #0e0f30 380px, #0b0c1d 960px) no-repeat, #0b0c1d !important; color: var(--text); } :root[data-theme="dark"] body::before { background: radial-gradient(36% 32% at 88% 12%, rgba(0,18,253,.46), rgba(0,18,253,.16) 52%, rgba(0,18,253,0) 76%), radial-gradient(26% 30% at 20% 74%, rgba(4,0,188,.55), rgba(4,0,188,.16) 54%, rgba(4,0,188,0) 76%), radial-gradient(28% 30% at 92% 72%, rgba(61,75,255,.36), rgba(61,75,255,.10) 54%, rgba(61,75,255,0) 76%), radial-gradient(42% 26% at 46% 104%, rgba(0,18,253,.30), rgba(0,18,253,0) 74%), linear-gradient(118deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.05) 47%, rgba(255,255,255,0) 60%) !important; } :root[data-theme="dark"] body::after { filter: brightness(0) invert(1); opacity: .05; } /* 3. Barra de arriba, menú lateral y barra de abajo (celular) */ :root[data-theme="dark"] .topbar { background: linear-gradient(180deg, rgba(22,24,58,.78) 0%, rgba(16,18,44,.62) 100%) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px -20px rgba(0,0,0,.75) !important; } :root[data-theme="dark"] .topbar .search { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; } :root[data-theme="dark"] .search input { color: var(--text); } :root[data-theme="dark"] .search input::placeholder { color: var(--text-3); } :root[data-theme="dark"] .search kbd, :root[data-theme="dark"] kbd { background: rgba(255,255,255,.08); color: var(--text-2); border-color: rgba(255,255,255,.14); } :root[data-theme="dark"] .icon-btn, :root[data-theme="dark"] .avatar-btn { color: var(--text-2); } :root[data-theme="dark"] .icon-btn:hover { background: rgba(255,255,255,.07); color: var(--text); } :root[data-theme="dark"] .ps-ic { color: color-mix(in srgb, var(--pc, #b3baff) 60%, #fff); background: color-mix(in srgb, var(--pc, #b3baff) 26%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } :root[data-theme="dark"] .side-prod-ic { background: color-mix(in srgb, var(--pc, #b3baff) 26%, transparent); color: color-mix(in srgb, var(--pc, #b3baff) 60%, #fff); } @media (min-width: 901px) { :root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, rgba(22,24,58,.80) 0%, rgba(16,18,44,.64) 100%) !important; border-right: 1px solid rgba(255,255,255,.08) !important; box-shadow: 12px 0 30px -26px rgba(0,0,0,.75) !important; } :root[data-theme="dark"] .nav-item { color: var(--text-2); } :root[data-theme="dark"] .nav-item .ic { color: var(--text-3); } :root[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,.06); color: var(--text); } :root[data-theme="dark"] .nav-item.active { background: rgba(142,151,255,.16) !important; color: var(--azul) !important; } :root[data-theme="dark"] .nav-item.active .ic { color: var(--azul) !important; } } :root[data-theme="dark"] .brand-iso { filter: brightness(0) invert(1); } /* logo: la R en blanco sobre la noche */ :root[data-theme="dark"] .tip-flotante { background: #1c1f42; color: #dfe2ff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); } @media (max-width: 900px) { :root[data-theme="dark"] .bottom-nav { background: rgba(16,18,44,.90); border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .bottom-nav a { color: var(--text-3); } :root[data-theme="dark"] .bottom-nav a.active { color: var(--azul); } } /* 4. Tarjetas: vidrio oscuro translúcido con filo de luz (se ven las formas del fondo) */ :root[data-theme="dark"] .card { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 18px -14px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25), 0 26px 50px -30px rgba(0,0,0,.75) !important; } :root[data-theme="dark"] .perfil .card { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.62) 0%, rgba(22,24,56,.46) 60%, rgba(18,20,46,.38) 100%) !important; border-color: rgba(255,255,255,.12) !important; } :root[data-theme="dark"] .perfil .card::after { background: linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 16%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(142,151,255,.22) 86%, rgba(142,151,255,.45) 100%); } /* 5. Textos, separadores y piezas comunes */ :root[data-theme="dark"] .page-title, :root[data-theme="dark"] .section-title { color: var(--text); } :root[data-theme="dark"] .section-title .ic { color: var(--text-3); } :root[data-theme="dark"] .toggle-row + .toggle-row, :root[data-theme="dark"] .status-row + .status-row { border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-prod { background: #2a37e8; border-color: #2a37e8; color: #fff; } :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .btn-prod:hover { background: #3a47f5; border-color: #3a47f5; } :root[data-theme="dark"] .btn-ghost { color: var(--text-2); } :root[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.07); color: var(--text); } :root[data-theme="dark"] .btn-soft { background: rgba(142,151,255,.15); color: #dde0ff; } :root[data-theme="dark"] .switch { background: #2a2e55; } :root[data-theme="dark"] .switch[aria-checked="true"] { background: #2a37e8 !important; } :root[data-theme="dark"] .seg { background: rgba(255,255,255,.06); border-color: rgba(142,151,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px -12px rgba(0,0,0,.6); } :root[data-theme="dark"] .seg button { color: var(--text-2); } :root[data-theme="dark"] .seg button:hover { background: rgba(255,255,255,.07); color: var(--text); } :root[data-theme="dark"] .seg button[aria-pressed="true"], :root[data-theme="dark"] .seg button[aria-pressed="true"]:hover { background: #2a37e8; color: #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.7); } :root[data-theme="dark"] .chip { border-color: rgba(255,255,255,.10); } :root[data-theme="dark"] .toast { background: #eef0ff; color: #0b0c1d; } /* 6. Desplegables (programa, notificaciones, cuenta): el mismo vidrio, en oscuro */ :root[data-theme="dark"] .pop, :root[data-theme="dark"] .pop.pop-capa { background: linear-gradient(150deg, rgba(30,33,72,.86), rgba(20,22,50,.76)) padding-box, linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 45%, rgba(142,151,255,.40)) border-box !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.3), 0 28px 56px -28px rgba(0,0,0,.8) !important; color: var(--text); } :root[data-theme="dark"] .pop::before { background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%); } :root[data-theme="dark"] .pop-item { color: var(--text); } :root[data-theme="dark"] .pop-item:hover, :root[data-theme="dark"] .pop-item.kbd-active { background: rgba(255,255,255,.07); } :root[data-theme="dark"] .pop-sep { background: rgba(255,255,255,.08); } :root[data-theme="dark"] .pop-pie { border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .pop.pop-capa .muted { color: var(--text-2); } /* 7. Ventanitas del perfil (Editar, correo, contraseña, cerrar en todos, eliminar cuenta) */ :root[data-theme="dark"] .pf-dialogo { background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%) padding-box, linear-gradient(150deg, rgba(30,33,72,.90), rgba(20,22,50,.82)) padding-box, linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 45%, rgba(142,151,255,.42)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 18px -14px rgba(0,0,0,.5), 0 40px 90px -30px rgba(0,0,0,.85); color: var(--text); } :root[data-theme="dark"] .pf-dialogo::backdrop { background: rgba(4,5,16,.55); } :root[data-theme="dark"] .pf-in { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--text); } :root[data-theme="dark"] .pf-in::placeholder { color: var(--text-3); } :root[data-theme="dark"] .pf-in:hover { border-color: rgba(255,255,255,.28); } :root[data-theme="dark"] .pf-in:focus { border-color: #b3baff; box-shadow: 0 0 0 4px rgba(142,151,255,.2); } :root[data-theme="dark"] .pf-sel option { background: #16182f; color: var(--text); } :root[data-theme="dark"] .pf-correo { background: rgba(255,255,255,.05); } :root[data-theme="dark"] .pf-error { color: #ff8a8d; } :root[data-theme="dark"] .pf-error.pf-info { color: #aab1ff; } :root[data-theme="dark"] .btn.pf-peligro { background: #e5484d; border-color: #e5484d; } :root[data-theme="dark"] .btn.pf-peligro:hover { background: #f05a5f; border-color: #f05a5f; } :root[data-theme="dark"] .btn.pf-texto-peligro { color: #ff8a8d; } :root[data-theme="dark"] .btn.pf-texto-peligro:hover { background: rgba(255,122,126,.12); color: #ff8a8d; } /* 8. Mis programas (mosaico de áreas, franja y página del área) */ :root[data-theme="dark"] .pg-fr-sec + .pg-fr-sec { border-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .pg-fr-sec b { color: var(--text); } :root[data-theme="dark"] .area-card, :root[data-theme="dark"] .area-cab-img { box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 22px 44px -26px rgba(0,0,0,.85); } :root[data-theme="dark"] .area-chip { background: rgba(142,151,255,.16); color: #dde0ff; } :root[data-theme="dark"] .area-chip.is-completada { background: rgba(69,211,154,.16); color: #7fe3b6; } :root[data-theme="dark"] .area-chip.is-bloqueada { background: rgba(255,255,255,.08); color: var(--text-3); } :root[data-theme="dark"] .area-chip.is-progreso { background: #ffe400; color: #11111a; } :root[data-theme="dark"] .area-chip.is-gold { background: linear-gradient(135deg, #f6d365, #e0a526); color: #3b2a00; } /* 9. Arreglos de la base que pidieron los ayudantes de la parte 2 (09-oct) */ /* Botón amarillo: texto oscuro sobre el amarillo (antes --negro lo volvía casi blanco) */ :root[data-theme="dark"] .btn-gold { color: #11111a; } /* Barras de avance y medalla de nivel: el color del programa, aclarado para que se vea sobre la noche */ :root[data-theme="dark"] .progress > span { background: color-mix(in srgb, var(--pc, #0400bc) 50%, #9aa2ff); } :root[data-theme="dark"] .level-badge { background: linear-gradient(135deg, color-mix(in srgb, var(--pc, #0400bc) 60%, #6c78ff), color-mix(in srgb, var(--pc, #0400bc) 40%, #1c1f3c)); } /* Cuadrados de íconos y figuras de marca: azul vivo (el --azul aclarado dejaba el amarillo encima sin contraste) */ :root[data-theme="dark"] .stat-ic, :root[data-theme="dark"] .stat-ic.gold, :root[data-theme="dark"] .stat-ic.green, :root[data-theme="dark"] .stat-ic.orange, :root[data-theme="dark"] .stat-ic.blue { background: #2a37e8; color: #ffe400; } :root[data-theme="dark"] .fg.az { background: #2a37e8; } :root[data-theme="dark"] .fg.az2 { background: #3a47f5; } /* Selector de programa de arriba: «Quedan X días» y «Venció» legibles */ :root[data-theme="dark"] .ps-acceso { color: var(--text-2); } :root[data-theme="dark"] .ps-acceso.pronto { color: #f7b55a; } :root[data-theme="dark"] .ps-acceso.vencido { color: #ff8a8d; } :root[data-theme="dark"] .ps-acceso.vencido .ps-barra i { background: #ff7a7e; } /* Tarjeta de ayuda del menú (celular): vidrio oscuro y su botón legible */ :root[data-theme="dark"] .help-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: var(--text-2); } :root[data-theme="dark"] .help-card .btn-white, :root[data-theme="dark"] .help-card .btn { background: rgba(142,151,255,.16); color: #dfe2ff; border-color: transparent; } /* Accesibilidad: sin transparencia si la persona la reduce o pide más contraste */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root[data-theme="dark"] .card, :root[data-theme="dark"] .prog-card, :root[data-theme="dark"] .acc-item, :root[data-theme="dark"] .resource, :root[data-theme="dark"] .prox-work, :root[data-theme="dark"] .pop, :root[data-theme="dark"] .pop.pop-capa, :root[data-theme="dark"] .pf-dialogo, :root[data-theme="dark"] .topbar, :root[data-theme="dark"] .sidebar { background: #16182f !important; } } /* 10. Contraste del texto (09-oct; el dueño: «el contraste con el color de las letras puede perderse»). Medido contra el fondo real de cada pantalla: el texto secundario, el terciario y el azul de texto suben de tono para quedar en 7:1 o más sobre la noche. */ :root[data-theme="dark"] { --text-2: #d6d9f3; --text-3: #c0c4e5; --azul: #b3baff; --primary: #b3baff; --primary-600: #c7ccff; --focus: #b3baff; --success: #5fe0ab; --info: #8ccaff; --danger: #ff8f92; --warning: #f9c06e; } :root[data-theme="dark"] .avatar { --av1: #4338ca; --av2: #6d32c8; } /* iniciales blancas: de 4,3 a más de 7:1 */ /* los botones y lo elegido van en azul vivo #2a37e8 (antes #3d4bff): la letra blanca pasa de 5,8 a 7,5:1 */ :root[data-theme="dark"] .area-card.is-completada .area-estado { background: #fff; color: #0b6b4c; } :root[data-theme="dark"] .skip { background: #2a37e8; color: #fff; } :root[data-theme="dark"] .partida .energia, :root[data-theme="dark"] .partida .energia * { color: #fff; } /* «Energía completa» sobre el azul vivo */ /* 10. Mis programas (recuadros de vidrio), flecha para volver y menú desplegable (09-oct) */ :root[data-theme="dark"] .prog-tile { color: var(--text); border-color: rgba(255,255,255,.12); background: radial-gradient(70% 90% at 92% 8%, color-mix(in srgb, var(--pc, #0400bc) 22%, transparent), transparent 62%), radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(30,33,72,.78) 0%, rgba(22,24,56,.68) 60%, rgba(18,20,46,.62) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 18px -14px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .prog-tile::after { background: linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 16%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(142,151,255,.22) 86%, rgba(142,151,255,.45) 100%); } :root[data-theme="dark"] .pt-etq { color: var(--text-3); } :root[data-theme="dark"] .pt-titulo { color: var(--text); } :root[data-theme="dark"] .pt-meta, :root[data-theme="dark"] .pt-link { color: var(--text-2); } :root[data-theme="dark"] .pt-meta b { color: var(--azul); } :root[data-theme="dark"] .pt-barra { background: rgba(255,255,255,.12); } :root[data-theme="dark"] .pt-barra i { background: linear-gradient(90deg, #6c78ff, #9aa2ff); } :root[data-theme="dark"] .pt-vencido { background: rgba(255,122,126,.16); color: #ffc2c4; } :root[data-theme="dark"] .badge-ribbon { color: #11111a; } :root[data-theme="dark"] .volver, :root[data-theme="dark"] .nav-desplegar { color: var(--azul); border-color: rgba(255,255,255,.14); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -10px rgba(0,0,0,.6); } @media (min-width: 901px) { :root[data-theme="dark"] .app.menu-desplegado .sidebar { background: linear-gradient(180deg, rgba(22,24,58,.95) 0%, rgba(16,18,44,.9) 100%) !important; border-right: 1px solid rgba(255,255,255,.1) !important; box-shadow: 26px 0 60px -28px rgba(0,0,0,.8) !important; } :root[data-theme="dark"] .app.menu-desplegado .nav-label { color: var(--text-3); } } /* 11. Cabecera del programa (3.ª versión) y «Sigue donde quedaste» (12-oct): accesos, avance y «A continuación» en vidrio oscuro */ :root[data-theme="dark"] .pg-pill { color: var(--azul); border-color: rgba(255,255,255,.14); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -10px rgba(0,0,0,.6); } :root[data-theme="dark"] .pg-chip, :root[data-theme="dark"] .pg-cifra { border-color: rgba(255,255,255,.14); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -10px rgba(0,0,0,.6); } :root[data-theme="dark"] .pg-titulo-grad { background-image: linear-gradient(95deg, #eef0ff 8%, #b3baff 72%, #8e97ff 100%); } :root[data-theme="dark"] a.pg-cifra:hover, :root[data-theme="dark"] a.pg-cifra:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 28px -14px rgba(0,0,0,.75); } :root[data-theme="dark"] .pg-cifra-barra { background: rgba(255,255,255,.10); } /* Próximamente y Siguiente paso, propuesta A (12-oct): tarjetas, banda de Remotos Work y oferta en vidrio oscuro */ :root[data-theme="dark"] { --pv-tit: #eef0ff; --pv-etq: #b3baff; } :root[data-theme="dark"] .pv-vidrio { border-color: rgba(255,255,255,.08); background: linear-gradient(145deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .pv-vidrio::before { display: none; } :root[data-theme="dark"] .pv-vidrio::after { background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(142,151,255,.35)); } :root[data-theme="dark"] .pvA-work { background: linear-gradient(100deg, rgba(108,120,255,.18), rgba(255,255,255,.02) 70%); } :root[data-theme="dark"] .pv-roles em, :root[data-theme="dark"] .pv-chip, :root[data-theme="dark"] .pv-ok { background: rgba(142,151,255,.18); color: #dfe2ff; box-shadow: none; } :root[data-theme="dark"] .pv-precio { color: #b3baff; } /* el examen de cada área como parada del mapa completo (12-oct) */ :root[data-theme="dark"] .mp-ex-txt { color: var(--text-2); background: rgba(18,20,82,.72); border-color: rgba(255,255,255,.14); box-shadow: 0 8px 16px -10px rgba(0,0,0,.7); } :root[data-theme="dark"] .mp-ex.is-bloq .mp-ex-med, :root[data-theme="dark"] .mp-ex.is-mal .mp-ex-med, :root[data-theme="dark"] .pmC-ex.is-ex-bloq .pmC-med { color: #c9ceff; background: rgba(255,255,255,.1); border-color: rgba(179,186,255,.4); box-shadow: none; } :root[data-theme="dark"] .mp-ex.is-listo .mp-ex-txt span, :root[data-theme="dark"] .mp-ex.is-ok .mp-ex-txt span { color: #b3baff; } /* tarjetas de Mis programas, propuesta C (12-oct): camino de áreas, riel y botón «Ver programa» en vidrio oscuro */ :root[data-theme="dark"] .pt-riel { background: rgba(255,255,255,.1); box-shadow: none; } :root[data-theme="dark"] .pt-riel i, :root[data-theme="dark"] .pt-camino::after { background: linear-gradient(90deg, #6c78ff, #b3baff); } :root[data-theme="dark"] .pt-camino::before { border-top-color: rgba(255,255,255,.25); } :root[data-theme="dark"] .pt-camino i:not(.is-hecha):not(.is-actual) { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #c9ceff; box-shadow: none; } :root[data-theme="dark"] .pt-donde b { color: #eef0ff; } :root[data-theme="dark"] .prog-tile .pt-acc .btn-soft { border-color: rgba(255,255,255,.16); background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.16), rgba(108,120,255,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -10px rgba(0,0,0,.6); } :root[data-theme="dark"] .pg-cifra-barra i { background: linear-gradient(90deg, #6c78ff, #b3baff); } :root[data-theme="dark"] .pg-sigue-portada { box-shadow: 0 18px 32px -18px rgba(0,0,0,.85); } :root[data-theme="dark"] .pg-sigue-luego { border-color: rgba(255,255,255,.12); background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px -16px rgba(0,0,0,.7); } :root[data-theme="dark"] .pg-sigue-lista li + li { border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .pg-sigue-n { color: var(--text-2); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); } :root[data-theme="dark"] .pg-sigue-lista .es-examen .pg-sigue-n { color: #0400bc; background: rgba(255,228,0,.85); border-color: rgba(255,228,0,.9); } :root[data-theme="dark"] .pg-riel { background: rgba(255,255,255,.10); box-shadow: none; } :root[data-theme="dark"] .pg-riel i { background: linear-gradient(90deg, #6c78ff, #b3baff); } /* 12. Mapa de progreso (cabecera del programa y página del mapa) */ :root[data-theme="dark"] .pg-mapa-pct, :root[data-theme="dark"] .mp-pct, :root[data-theme="dark"] .mp-actual-num b { color: #fff; } :root[data-theme="dark"] .mm-base { stroke: rgba(255,255,255,.1); } :root[data-theme="dark"] .mm-hecho, :root[data-theme="dark"] .mp-hecho { stroke: #6b76ff; } :root[data-theme="dark"] .mm-falta, :root[data-theme="dark"] .mp-falta { stroke: rgba(255,255,255,.38); } :root[data-theme="dark"] .mm-gold, :root[data-theme="dark"] .mp-gold { stroke: #f6d365; } :root[data-theme="dark"] .mm-p i, :root[data-theme="dark"] .mp-med { color: #c9ceff; border-color: rgba(255,255,255,.2); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.2), rgba(255,255,255,.05)); box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 10px 22px -12px rgba(0,0,0,.8); } :root[data-theme="dark"] .mm-p.is-hecha i, :root[data-theme="dark"] .mp-p.is-hecha .mp-med { color: #fff; border-color: rgba(255,255,255,.3); background: radial-gradient(120% 120% at 30% 18%, #9aa2ff, #4a57ff 55%, #2a37e8); } :root[data-theme="dark"] .mm-p.is-actual i, :root[data-theme="dark"] .mp-p.is-actual .mp-med { color: #11111a; border-color: #fff3a0; background: radial-gradient(120% 120% at 30% 18%, #fff8b8, #ffe400 58%, #f2c500); } :root[data-theme="dark"] .mm-p.is-gold i, :root[data-theme="dark"] .mp-p.is-gold .mp-med, :root[data-theme="dark"] .mp-fin.is-logrado .mp-med { color: #5a3d00; border-color: rgba(255,244,214,.6); background: radial-gradient(120% 120% at 30% 18%, #fff3cc, #f6d365 55%, #e0a526); } :root[data-theme="dark"] .mm-p.is-bloqueada i, :root[data-theme="dark"] .mp-p.is-bloqueada .mp-med { color: #9ea4d6; } :root[data-theme="dark"] .mm-p.is-actual small, :root[data-theme="dark"] .mp-info b { color: #fff; } :root[data-theme="dark"] .mm-p.is-gold small { color: #f6d365; } :root[data-theme="dark"] .mp-borde { stroke: rgba(0,0,0,.35); } :root[data-theme="dark"] .mp-base { stroke: rgba(255,255,255,.08); } :root[data-theme="dark"] .mp-hecho-luz { stroke: rgba(107,118,255,.25); } :root[data-theme="dark"] .mp-fin .mp-med { color: #f6d365; border-color: rgba(246,211,101,.6); background: rgba(246,211,101,.08); } :root[data-theme="dark"] .mp-chip { color: var(--text-2); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); box-shadow: none; } :root[data-theme="dark"] .mp-p.is-hecha .mp-chip { color: #7fe0b0; } :root[data-theme="dark"] .mp-p.is-actual .mp-chip { color: #11111a; background: #ffe400; border-color: #ffe400; } :root[data-theme="dark"] .mp-p.is-gold .mp-chip, :root[data-theme="dark"] .mp-fin .mp-chip { color: #f6d365; background: rgba(246,211,101,.12); border-color: rgba(246,211,101,.3); } :root[data-theme="dark"] .mp-p.is-bloqueada .mp-info b { color: var(--text-2); } :root[data-theme="dark"] .mp-lista { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); } :root[data-theme="dark"] .mp-datos li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } :root[data-theme="dark"] .mp-datos .ic { color: #b3baff; } :root[data-theme="dark"] .mp-datos b { color: #fff; } :root[data-theme="dark"] .mp-animo b { color: #ffe400; } /* [CERT] 12-oct: campana mejorada, en oscuro (el panel usa el vidrio oscuro de los desplegables) */ :root[data-theme="dark"] .icon-btn.campana { color: #dfe2ff; background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) padding-box, linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 45%, rgba(142,151,255,.4)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px -12px rgba(0,0,0,.8); } :root[data-theme="dark"] .icon-btn.campana:hover, :root[data-theme="dark"] .icon-btn.campana[aria-expanded="true"] { color: #fff; background: linear-gradient(150deg, rgba(142,151,255,.24), rgba(142,151,255,.10)) padding-box, linear-gradient(135deg, rgba(255,255,255,.3), rgba(142,151,255,.5)) border-box; } :root[data-theme="dark"] .campana-num { border-color: #0b0c1d; background: linear-gradient(135deg, #3d4bff, #2a37e8); } :root[data-theme="dark"] .cp-cab b, :root[data-theme="dark"] .cp-txt b, :root[data-theme="dark"] .cp-vacio b { color: #fff; } :root[data-theme="dark"] .cp-leidas { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #dfe2ff; } :root[data-theme="dark"] .cp-leidas:hover { background: rgba(142,151,255,.18); } :root[data-theme="dark"] .cp-grupo { color: #b3baff; text-shadow: none; } :root[data-theme="dark"] .cp-cuerpo, :root[data-theme="dark"] .cp-cab small { color: var(--text-2); } :root[data-theme="dark"] .cp-txt small { color: var(--text-3); } :root[data-theme="dark"] .cp-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .cp-item:hover { background: rgba(255,255,255,.09); box-shadow: 0 12px 24px -18px rgba(0,0,0,.9); } :root[data-theme="dark"] .cp-item.nuevo { background: linear-gradient(135deg, rgba(142,151,255,.18), rgba(255,255,255,.04)); border-color: rgba(142,151,255,.3); } :root[data-theme="dark"] .cp-ic--system { background: linear-gradient(135deg, #2a2e55, #1c1f3c); color: #b3baff; } :root[data-theme="dark"] .cp-ic--community, :root[data-theme="dark"] .cp-ic--offer { background: rgba(142,151,255,.16); color: #dfe2ff; box-shadow: inset 0 0 0 1px rgba(142,151,255,.25); } :root[data-theme="dark"] .cp-punto { background: #8d97ff; box-shadow: 0 0 0 4px rgba(142,151,255,.2); } :root[data-theme="dark"] .cp-vacio-ic { background: rgba(142,151,255,.14); color: #dfe2ff; box-shadow: inset 0 0 0 1px rgba(142,151,255,.25); } /* [CERT] 12-oct: Zona Gold (3.ª vuelta), en oscuro: el amarillo de la plataforma actual sobre la noche */ :root[data-theme="dark"] .zg-cab h2 { color: #ffe400; } :root[data-theme="dark"] .zg-aviso { color: rgba(255,228,0,.85); background: linear-gradient(135deg, rgba(255,228,0,.08), rgba(255,208,0,.03)) padding-box, linear-gradient(135deg, rgba(255,228,0,.35), rgba(255,228,0,.1)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } :root[data-theme="dark"] .zg-aviso .ic { color: #ffe400; } /* oscuro-inicio.css */ /* [CERT] Modo oscuro, parte 2 (09-oct-2026): inicio. Todo bajo :root[data-theme="dark"]; el claro no cambia. Solo colores, fondos, bordes, sombras y opacidades. Vidrio oscuro translúcido (receta de oscuro.css), sin desenfoque nuevo, sin adornos nuevos y sin filtros en las imágenes (portada, llama, panda). */ /* ---------- [CERT] Barra de arriba: racha, XP y monedas (#gami) ---------- */ :root[data-theme="dark"] .g-item.racha b { color: #ff9a52; } /* naranja de la llama, aclarado para la noche */ :root[data-theme="dark"] .g-item.coin b { color: #f4c95d; } /* dorado de las monedas */ :root[data-theme="dark"] .g-item.racha:has(.e-legendaria) b { color: var(--azul); } :root[data-theme="dark"] .g-item.racha:has(.e-apagada) b { color: var(--text-3); } :root[data-theme="dark"] .g-item.boost { background: #2a37e8; color: #fff; } /* rayo de XP (barra de arriba y nivel): el azul oscuro del pie se perdía en la noche */ :root[data-theme="dark"] #g-rayo stop:first-child { stop-color: #b3baff; } :root[data-theme="dark"] #g-rayo stop:last-child { stop-color: #2a37e8; } /* ---------- [CERT] Tarjetas del Inicio: vidrio oscuro con filo de luz ---------- */ :root[data-theme="dark"] .in3-racha, :root[data-theme="dark"] .in3-rank2, :root[data-theme="dark"] .in3-quiz, :root[data-theme="dark"] .in3-ev:not(.ticket), :root[data-theme="dark"] .in3-aviso { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 18px -14px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25), 0 26px 50px -30px rgba(0,0,0,.75) !important; } /* filo de luz: arriba a la izquierda blanco tenue, abajo a la derecha azul de marca (como el perfil) */ :root[data-theme="dark"] .in3-racha::after, :root[data-theme="dark"] .in3-rank2::after, :root[data-theme="dark"] .in3-quiz::after, :root[data-theme="dark"] .in3-ev:not(.ticket)::after, :root[data-theme="dark"] .in3-aviso::after { background: linear-gradient(var(--vidrio-luz, 135deg), rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 16%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(142,151,255,.22) 86%, rgba(142,151,255,.45) 100%); } /* ---------- [CERT] Tarjeta principal «Sigue donde lo dejaste» ---------- */ /* el blanco detrás del texto pasa a vidrio oscuro; la portada de la derecha queda tal cual (desde el 64 %, igual que en claro). El velo es un poco más firme que el blanco: sobre la noche, las letras claras de algunas portadas se transparentaban más */ :root[data-theme="dark"] .in3-mision { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.25), 0 26px 50px -30px rgba(0,0,0,.75) !important; } :root[data-theme="dark"] .in3-mision-img::after { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(90deg, rgba(24,26,62,.99) 0%, rgba(24,26,62,.97) 30%, rgba(24,26,62,.86) 44%, rgba(24,26,62,.42) 54%, rgba(24,26,62,0) 64%) !important; } @media (max-width: 640px) { /* celular: la portada arriba se funde hacia abajo en el mismo azul noche del vidrio */ :root[data-theme="dark"] .in3-mision { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgb(24,26,62) 0, rgb(24,26,62) 170px, rgba(24,26,62,.80) 300px, rgba(20,22,52,.62) 100%); } :root[data-theme="dark"] .in3-mision-img::after { background: linear-gradient(180deg, rgba(24,26,62,0) 0%, rgba(24,26,62,0) 45%, rgba(24,26,62,.85) 80%, rgb(24,26,62) 100%) !important; } } :root[data-theme="dark"] .in3-etq { color: var(--azul); background: rgba(142,151,255,.14); } :root[data-theme="dark"] .in3-barra { background: rgba(255,255,255,.12); } :root[data-theme="dark"] .in3-barra span, :root[data-theme="dark"] .rk-meta-barra i { background: linear-gradient(90deg, #4a56ff, #6c78ff 70%, #ffe400); } :root[data-theme="dark"] .in3-principal { background: #2a37e8; box-shadow: 0 14px 28px -14px rgba(0,0,0,.8); } :root[data-theme="dark"] .in3-principal:hover { background: #3a47f5; } /* ---------- [CERT] Racha: días de la semana y nivel ---------- */ :root[data-theme="dark"] .in3-semana li.dia.hoy { background: #2a37e8 !important; box-shadow: 0 8px 16px -8px rgba(0,0,0,.7) !important; } /* días sin estudiar en gris (los estudiados quedan en azul): en la noche el gris azulado se confundía con el azul */ :root[data-theme="dark"] .dia:not(.si):not(.hoy) .dia-l { color: #a6aacd; } :root[data-theme="dark"] .in3-racha > .in3-nivel { background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 14%, rgba(255,255,255,.12) 86%, transparent) top / 100% 1px no-repeat; } @media (min-width: 700px) and (max-width: 900px) { :root[data-theme="dark"] .in3-racha > .in3-nivel { background: linear-gradient(180deg, transparent, rgba(255,255,255,.12) 18%, rgba(255,255,255,.12) 82%, transparent) left / 1px 100% no-repeat; } } @media (min-width: 901px) { :root[data-theme="dark"] .in3-racha:only-child > .in3-nivel { background: linear-gradient(180deg, transparent, rgba(255,255,255,.12) 18%, rgba(255,255,255,.12) 82%, transparent) left / 1px 100% no-repeat; } } /* ---------- [CERT] Ranking: globo, escalera de puestos y meta ---------- */ :root[data-theme="dark"] .rk-globo { background: #2a37e8; } :root[data-theme="dark"] .rk-globo::after { border-top-color: #2a37e8; } @media (max-width: 480px) { :root[data-theme="dark"] .rk-globo::after { border-top-color: transparent; border-right-color: #2a37e8; } } :root[data-theme="dark"] .rk-av { background: rgba(142,151,255,.18); color: #dde0ff; box-shadow: 0 0 0 2px rgba(142,151,255,.30); } :root[data-theme="dark"] .rk-barra { background: linear-gradient(180deg, rgba(142,151,255,.18), rgba(142,151,255,.05)); } :root[data-theme="dark"] .rk-barra b { color: #c9cdff; } /* «Tú» y el #1 conservan su avatar amarillo (letras oscuras); «Tú» con su anillo azul */ :root[data-theme="dark"] .rk-col.yo .rk-av { background: var(--amarillo); color: #11111a; box-shadow: 0 0 0 3px var(--azul); } :root[data-theme="dark"] .rk-col.top1 .rk-av { background: linear-gradient(140deg, #fff27a, #ffe400); color: #11111a; box-shadow: 0 0 0 2px #e0a526; } :root[data-theme="dark"] .rk-col.yo.top1 .rk-av { box-shadow: 0 0 0 3px var(--azul); } :root[data-theme="dark"] .rk-col.yo .rk-barra, :root[data-theme="dark"] .rk-col.yo.top1 .rk-barra { background: #2a37e8; box-shadow: 0 12px 20px -12px rgba(0,0,0,.7); } :root[data-theme="dark"] .rk-col.yo .rk-barra b, :root[data-theme="dark"] .rk-col.yo .rk-barra small { color: #fff; } :root[data-theme="dark"] .rk-col.top1:not(.yo) .rk-barra { background: linear-gradient(180deg, rgba(255,228,0,.18), rgba(255,228,0,.05)); } :root[data-theme="dark"] .rk-col.top1:not(.yo) .rk-barra b { color: #ffe400; } :root[data-theme="dark"] .rk-meta-barra { background: rgba(255,255,255,.12); } /* ---------- [CERT] Pregunta del día ---------- */ /* figuras de marca de detrás: las mismas, un poco más suaves (sobre la noche el azul pesaba más que sobre el blanco) */ :root[data-theme="dark"] .pd-f1 { background: linear-gradient(140deg, rgba(0,18,253,.28), rgba(4,0,188,.12)); } :root[data-theme="dark"] .pd-f2 { background: linear-gradient(160deg, rgba(4,0,188,.22), rgba(0,18,253,.07)); } :root[data-theme="dark"] .pd-f3 { border-bottom-color: rgba(0,18,253,.12); } :root[data-theme="dark"] .pd-f4 { background: rgba(0,18,253,.13); } /* premio y casillas: velo más tupido para que la figura azul de atrás no las haga parecer «hechas» */ :root[data-theme="dark"] .pd-premio { background: linear-gradient(150deg, rgba(46,50,100,.88), rgba(34,38,82,.82)); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px -16px rgba(0,0,0,.6); } :root[data-theme="dark"] .pd-premio small { color: #aab1ff; } :root[data-theme="dark"] .pd-premio.ganado { background: linear-gradient(150deg, rgba(69,211,154,.22), rgba(69,211,154,.08)); border-color: rgba(69,211,154,.35); color: #45d39a; } /* casillas de los 7 días */ :root[data-theme="dark"] .pd-dias::before { background: rgba(255,255,255,.14); } :root[data-theme="dark"] .pd-dia { background: linear-gradient(150deg, rgba(46,50,100,.88), rgba(34,38,82,.82)); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 14px -10px rgba(0,0,0,.6); } :root[data-theme="dark"] .pd-dia.si { background: #2a37e8; border-color: transparent; color: #fff; } :root[data-theme="dark"] .pd-dia.hoy { background: linear-gradient(rgba(142,151,255,.16), rgba(142,151,255,.16)), linear-gradient(150deg, rgba(46,50,100,.88), rgba(34,38,82,.82)); border-color: #b3baff; color: var(--text); } :root[data-theme="dark"] .pd-dia.hoy::after { border-color: rgba(142,151,255,.5); } :root[data-theme="dark"] .pd-dia.cofre { background: linear-gradient(rgba(255,228,0,.13), rgba(255,228,0,.13)), linear-gradient(150deg, rgba(46,50,100,.88), rgba(34,38,82,.82)); border-color: rgba(255,228,0,.55); } :root[data-theme="dark"] .pd-dia.cofre.si { background: #ffe400; color: #0400bc; } /* cajas de respuesta: vidrio mate oscuro, borde de luz y grosor; texto casi blanco */ :root[data-theme="dark"] .pd-op { background: linear-gradient(150deg, rgba(48,52,104,.80), rgba(34,38,82,.72)) padding-box, linear-gradient(135deg, rgba(255,255,255,.34), rgba(142,151,255,.20) 45%, rgba(142,151,255,.34)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -10px 18px -14px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.25), 0 16px 30px -16px rgba(0,0,0,.6); } :root[data-theme="dark"] .pd-op::before { background: radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%); } :root[data-theme="dark"] .pd-op:hover:not(:disabled) { background: linear-gradient(150deg, rgba(60,65,128,.86), rgba(44,48,100,.78)) padding-box, linear-gradient(135deg, rgba(255,255,255,.45), rgba(142,151,255,.45) 45%, rgba(142,151,255,.62)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 18px -14px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.25), 0 20px 36px -20px rgba(0,0,0,.7); } :root[data-theme="dark"] .pd-op.ok { background: linear-gradient(150deg, rgba(69,211,154,.22), rgba(69,211,154,.10)) padding-box, linear-gradient(150deg, rgba(40,46,92,.90), rgba(30,34,74,.86)) padding-box, linear-gradient(135deg, rgba(69,211,154,.9), rgba(69,211,154,.35) 50%, rgba(69,211,154,.75)) border-box; } :root[data-theme="dark"] .pd-op.mal { background: linear-gradient(150deg, rgba(255,122,126,.20), rgba(255,122,126,.08)) padding-box, linear-gradient(150deg, rgba(40,46,92,.90), rgba(30,34,74,.86)) padding-box, linear-gradient(135deg, rgba(255,122,126,.85), rgba(255,122,126,.32) 50%, rgba(255,122,126,.7)) border-box; } :root[data-theme="dark"] .pd-l { background: linear-gradient(150deg, rgba(142,151,255,.22), rgba(142,151,255,.10)); border-color: rgba(142,151,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 8px -4px rgba(0,0,0,.5); color: #f4f5ff; } :root[data-theme="dark"] .pd-op.ok .pd-l { background: #12805c; border-color: transparent; color: #fff; } :root[data-theme="dark"] .pd-op.mal .pd-l { background: #c2272d; border-color: transparent; color: #fff; } /* mensaje y misión al responder */ :root[data-theme="dark"] .pd-msg { background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } :root[data-theme="dark"] .pd-msg.ok { background: linear-gradient(150deg, rgba(69,211,154,.18), rgba(69,211,154,.06)); border-color: rgba(69,211,154,.35); color: #c9f2df; } :root[data-theme="dark"] .pd-msg.mal { background: linear-gradient(150deg, rgba(255,122,126,.18), rgba(255,122,126,.06)); border-color: rgba(255,122,126,.35); color: #ffd5d6; } :root[data-theme="dark"] .pd-mision { background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } :root[data-theme="dark"] .pd-mision-ic { background: #2a37e8; } /* ---------- [CERT] Próximos eventos y ticket de la clase en vivo ---------- */ :root[data-theme="dark"] .in3-ev-fecha { background: rgba(142,151,255,.12); } :root[data-theme="dark"] .in3-ev-tipo.t-live { color: #ff9a9d; } :root[data-theme="dark"] .in3-ev-tipo.t-deadline { color: #f7b55a; } :root[data-theme="dark"] .in3-rec { background: rgba(142,151,255,.14); color: #aab1ff; } :root[data-theme="dark"] .in3-ev .btn-gold { color: #11111a; } /* «Unirme»: letras oscuras sobre el amarillo */ /* ticket: su borde animado se queda; el fondo blanco pasa a azul noche (opaco, para que el borde no se vea por dentro) */ :root[data-theme="dark"] .in3-ev.ticket { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%) padding-box, linear-gradient(145deg, #1e2148 0%, #191b40 60%, #16183a 100%) padding-box, conic-gradient(from var(--giro), #ffe400, #0012fd, #0400bc, #ffe400) border-box !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.25), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .in3-ev.ticket .in3-ev-fecha { background: #2a37e8; } /* ---------- [CERT] Avisos (por vencer / vencido) ---------- */ :root[data-theme="dark"] .in3-aviso.malo .in3-aviso-fig { background: #ff7a7e; } /* ---------- [CERT] Sin transparencia (reducir transparencia o más contraste): vidrio pintado opaco ---------- */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root[data-theme="dark"] .in3-racha, :root[data-theme="dark"] .in3-rank2, :root[data-theme="dark"] .in3-quiz, :root[data-theme="dark"] .in3-ev:not(.ticket), :root[data-theme="dark"] .in3-aviso { background: linear-gradient(155deg, #1c1f42 0%, #16182f 100%) !important; } } /* oscuro-juegos.css */ /* [CERT] Modo oscuro, parte 2 (09-oct-2026): juegos y misiones. Todo bajo :root[data-theme="dark"]; el claro no cambia. Lo blanco pasa a vidrio oscuro translúcido con filo de luz (misma receta que .card en oscuro.css; el borde va como anillo interior para no cambiar tamaños). Los bloques de marca (sala, máquina de la ruleta, dorso de las cartas) vuelven al azul de marca, porque en oscuro --azul es lila y el texto blanco no se leía. El Desafío del día sigue amarillo. Figuras de marca en azul vivo (#3a47f5): se ven sobre la noche y el amarillo encima se lee (≥3:1). */ /* ---------- 1. Figuras de la marca (juegos y misiones) ---------- */ :root[data-theme="dark"] :is(.juegos-dia, .juegos-grid, .partida, .mi-raiz) .fg.az { background: var(--jg-2, #3a47f5); } :root[data-theme="dark"] .reto-dia .fg.az { background: var(--jg-3, #0400bc); } /* sobre el amarillo, el azul de marca como en claro */ :root[data-theme="dark"] .figura-completa .barra { background: var(--jg-2, #3a47f5); } :root[data-theme="dark"] .figura-completa .hueco { border-color: var(--jg-2, #2a37e8); } :root[data-theme="dark"] .figura-ruleta .rodillo { background: rgba(255,255,255,.07); box-shadow: 0 0 0 2px var(--jg-chispa, #b3baff) inset; } /* ---------- 2. Botones amarillos de esta área: texto oscuro (el claro usa --negro, que en oscuro es casi blanco) ---------- */ :root[data-theme="dark"] :is(.reto-dia, .partida, .mi-raiz) .btn-gold { color: #11111a; } /* ---------- 3. Sala de juegos: bloque azul de marca con el panda ---------- */ :root[data-theme="dark"] .sala { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%), linear-gradient(125deg, color-mix(in srgb, var(--jg-3, #0400bc) 92%, transparent) 0%, color-mix(in srgb, var(--jg-2, #0012fd) 84%, transparent) 70%, color-mix(in srgb, var(--jg-1, #3d4bff) 82%, transparent) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 26px 50px -30px rgba(0,0,0,.75); } /* ---------- 4. Desafío del día (amarillo opaco: el final translúcido se volvía oliva sobre la noche) ---------- */ :root[data-theme="dark"] .reto-dia { color: #11111a; background: linear-gradient(120deg, #fffbd6 0%, #fff6a8 45%, #f9ec72 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 26px 50px -30px rgba(0,0,0,.75); } /* ---------- 5. Tarjetas de juego ---------- */ :root[data-theme="dark"] .juego { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .juego:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.10), 0 30px 54px -28px rgba(0,0,0,.8); } /* ---------- 6. Partida (pantalla de inicio, juego en curso, final y reto) ---------- */ :root[data-theme="dark"] .partida { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .partida .energia { background: var(--jg-2, #2a37e8); } :root[data-theme="dark"] .pasos i { background: rgba(255,255,255,.16); } :root[data-theme="dark"] .pasos i.ok { background: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] .pasos i.ya { background: #ffe400; } /* Opciones de respuesta: vidrio claro sobre el vidrio de la partida */ :root[data-theme="dark"] .opcion { color: var(--text); border-color: rgba(255,255,255,.12); background: linear-gradient(145deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.05) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px -20px rgba(0,0,0,.8); } :root[data-theme="dark"] .opcion:hover:not(:disabled) { border-color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] .opcion:is(:nth-child(1), :nth-child(4)) .marca { background: var(--jg-2, #3a47f5); } :root[data-theme="dark"] .opcion.correcta { border-color: #45d39a; background: rgba(69,211,154,.16); } :root[data-theme="dark"] .opcion.incorrecta { border-color: #ff7a7e; background: rgba(255,122,126,.16); } /* Final: el premio amarillo con texto oscuro */ :root[data-theme="dark"] .fin-premio { color: #11111a; } /* Desafío del día: el cuadro de texto en vidrio */ :root[data-theme="dark"] .partida.reto .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--text); } :root[data-theme="dark"] .partida.reto .input:focus { border-color: var(--jg-chispa, #b3baff); } /* ---------- 7. Memoria de conceptos ---------- */ :root[data-theme="dark"] .jx-dorso { background: linear-gradient(150deg, var(--jg-3, #0400bc) 0%, var(--jg-2, #0012fd) 62%, var(--jg-1, #5560ff) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 30px -20px rgba(0,0,0,.8); } :root[data-theme="dark"] .jx-frente { background: linear-gradient(165deg, rgba(42,46,96,.94) 0%, rgba(34,37,80,.94) 55%, rgba(30,33,72,.94) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.10), 0 16px 30px -22px rgba(0,0,0,.8); } :root[data-theme="dark"] .jx-carta:not(.hecha) .jx-tipo { color: var(--jg-chispa, #a7aeff); } /* etiqueta chica: ≥4.5:1 sobre la cara */ :root[data-theme="dark"] .jx-carta.hecha .jx-frente { background: linear-gradient(165deg, rgba(30,74,68,.94) 0%, rgba(24,58,56,.94) 100%); box-shadow: inset 0 0 0 2px rgba(69,211,154,.62), 0 16px 30px -24px rgba(0,0,0,.8); } :root[data-theme="dark"] .jx-carta.fallo .jx-frente { box-shadow: inset 0 0 0 2px rgba(255,122,126,.65), 0 16px 30px -24px rgba(0,0,0,.8); } :root[data-theme="dark"] .jx-sello { color: var(--jg-3, #0400bc); } @container (max-width: 620px) { :root[data-theme="dark"] .jx-sello { box-shadow: 0 0 0 2px #1d2046, 0 6px 12px -6px rgba(0,0,0,.6); } } @supports not (container-type: inline-size) { @media (max-width: 700px) { :root[data-theme="dark"] .jx-sello { box-shadow: 0 0 0 2px #1d2046, 0 6px 12px -6px rgba(0,0,0,.6); } } } /* ---------- 8. Ruleta de premios ---------- */ :root[data-theme="dark"] .jx-maquina { background: linear-gradient(135deg, var(--jg-3, #0400bc) 0%, var(--jg-2, #0012fd) 72%, var(--jg-2, #2a37e8) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 26px 50px -30px rgba(0,0,0,.8); } /* Rodillos: de blanco a vidrio oscuro */ :root[data-theme="dark"] .jx-rodillo { background: linear-gradient(180deg, #121546 0%, #1a1e58 32%, #1a1e58 68%, #121546 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 12px 22px -14px rgba(0,0,0,.7); } /* Símbolos: azul vivo para que el ícono amarillo se lea; la moneda con su «R» en azul de marca */ :root[data-theme="dark"] .jx-fig { background: linear-gradient(145deg, var(--jg-2, #2a37e8) 0%, var(--jg-2, #3a47f5) 100%); box-shadow: 0 10px 18px -12px rgba(0,0,0,.8); } :root[data-theme="dark"] .jx-sim-xp100 .jx-fig { background: linear-gradient(145deg, var(--jg-2, #3a47f5) 0%, var(--jg-1, #4452ff) 100%); } :root[data-theme="dark"] .jx-fig.t { background: linear-gradient(170deg, var(--jg-2, #3a47f5) 0%, var(--jg-2, #2a37e8) 45%, var(--jg-2, #2a38f0) 100%); box-shadow: none; } :root[data-theme="dark"] .jx-fig.mon { background: none; box-shadow: none; } :root[data-theme="dark"] .jx-moneda { color: var(--jg-3, #0400bc); } /* Premio ganado, premios guardados y tabla de probabilidades */ :root[data-theme="dark"] .jx-ganado, :root[data-theme="dark"] .jx-premios { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .jx-ganaste { color: #11111a; } :root[data-theme="dark"] .jx-inv li { background: linear-gradient(120deg, rgba(255,255,255,.09), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 8px 18px -14px rgba(0,0,0,.7); } :root[data-theme="dark"] .jx-tabla tbody th, :root[data-theme="dark"] .jx-tabla td { border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .jx-barra { background: rgba(255,255,255,.10); } /* ---------- 9. Misiones: cabecera (vidrio que se funde al azul de marca donde está el panda) ---------- */ :root[data-theme="dark"] .mi-cab { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(100deg, rgba(30,33,72,.74) 0%, rgba(24,27,62,.64) 44%, color-mix(in srgb, var(--jg-3, #1c2682) 66%, transparent) 64%, color-mix(in srgb, var(--jg-2, #1e2edc) 80%, transparent) 84%, var(--jg-2, #2b3bff) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .mi-globo { background: rgba(14,16,42,.90); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 24px -14px rgba(0,0,0,.7); } :root[data-theme="dark"] .mi-globo::after { border-top-color: rgba(14,16,42,.90); } :root[data-theme="dark"] .mi-dato { border-left-color: rgba(255,255,255,.12); } :root[data-theme="dark"] .mi-dato-ganado { border-top-color: rgba(255,255,255,.10); } :root[data-theme="dark"] .mi-segs i { background: rgba(255,255,255,.14); } :root[data-theme="dark"] .mi-segs i.si { background: linear-gradient(90deg, var(--jg-2, #3a47f5), var(--jg-chispa, #b3baff)); } :root[data-theme="dark"] .mi-g.mon, :root[data-theme="dark"] .mi-premio.mon, :root[data-theme="dark"] .mi-flota.mon { color: #f4c95d; } :root[data-theme="dark"] .mi-total { background: color-mix(in srgb, var(--jg-1, #8e97ff) 12%, transparent); } /* Rayo de XP (degradado SVG propio de misiones): del azul de marca al azul claro, para que se vea sobre la noche */ :root[data-theme="dark"] #mi-g-rayo stop:first-child { stop-color: var(--jg-chispa, #a7aeff); } :root[data-theme="dark"] #mi-g-rayo stop:last-child { stop-color: var(--jg-2, #3a47f5); } :root[data-theme="dark"] .mi-reloj { background: rgba(255,255,255,.06); } @media (max-width: 640px) { :root[data-theme="dark"] .mi-cab { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(205deg, var(--jg-2, #2b3bff) 0%, color-mix(in srgb, var(--jg-2, #1e2ec8) 74%, transparent) 20%, rgba(30,34,96,.70) 38%, rgba(26,29,66,.66) 56%, rgba(18,20,46,.58) 100%); } :root[data-theme="dark"] .mi-globo { background: var(--jg-2, #2a37e8); color: #fff; box-shadow: none; } :root[data-theme="dark"] .mi-globo::after { border-top-color: transparent; border-bottom-color: var(--jg-2, #2a37e8); } } /* ---------- 10. Misiones: tarjetas ---------- */ :root[data-theme="dark"] .mi-card { border-color: rgba(255,255,255,.10); background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%) padding-box, linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%) padding-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .mi-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 30px 54px -28px rgba(0,0,0,.8); } /* Lista para reclamar: el borde vivo que gira (azules claros + la estela amarilla de siempre); el fondo va opaco para que el degradado del borde no se vea a través del vidrio */ :root[data-theme="dark"] .mi-card.mi-lista { border-color: transparent; background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%) padding-box, linear-gradient(165deg, #1f2250 0%, #1a1c44 55%, #16183a 100%) padding-box, conic-gradient(from var(--mi-giro), var(--jg-2, #2a37e8) 0%, var(--jg-2, #3a47f5) 38%, var(--jg-chispa, #b3baff) 64%, #ffe400 80%, var(--jg-2, #2a37e8) 94%) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -26px rgba(0,0,0,.8); } /* Reclamada: más tranquila, con un toque verde */ :root[data-theme="dark"] .mi-card.mi-hecha { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 55%) padding-box, linear-gradient(165deg, rgba(30,33,72,.62) 0%, rgba(22,24,56,.52) 55%, rgba(24,62,56,.52) 100%) padding-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 44px -32px rgba(0,0,0,.7); } :root[data-theme="dark"] .mi-premio { background: rgba(255,255,255,.07); } :root[data-theme="dark"] .mi-barra { background: rgba(255,255,255,.10); } :root[data-theme="dark"] .mi-barra > span { background: linear-gradient(90deg, var(--jg-2, #2a37e8), var(--jg-1, #7f89ff)); } :root[data-theme="dark"] .mi-lista .mi-barra > span { background: linear-gradient(90deg, var(--jg-2, #2a37e8), var(--jg-1, #6c78ff) 70%, #ffe400); } :root[data-theme="dark"] .mi-hecha .mi-barra > span { background: linear-gradient(90deg, #1f9e70, #45d39a); } :root[data-theme="dark"] .mi-hecha .mi-num, :root[data-theme="dark"] .mi-hecha .mi-estado { color: #45d39a; } /* Figuras: los anillos de «corte» toman el color del vidrio */ :root[data-theme="dark"] .mi-fig-clase .fg.mi-c { box-shadow: 0 0 0 3px #1d2046; } :root[data-theme="dark"] .mi-siete { background: var(--jg-2, #2a37e8); box-shadow: 0 0 0 2px #1d2046; } :root[data-theme="dark"] .mi-sello { box-shadow: 0 0 0 3px #1d2046; } /* Premio que sube al reclamar: sin el halo blanco */ :root[data-theme="dark"] .mi-flota { text-shadow: 0 2px 10px rgba(0,0,0,.6); } /* ---------- 11. Misiones: modo pruebas ---------- */ :root[data-theme="dark"] .mi-sim { background: rgba(255,255,255,.04); border-color: color-mix(in srgb, var(--jg-1, #8e97ff) 30%, transparent); } :root[data-theme="dark"] .mi-sim-b { background: color-mix(in srgb, var(--jg-1, #8e97ff) 14%, transparent); color: var(--jg-papel, #dde0ff); } :root[data-theme="dark"] .mi-sim-b:hover { background: var(--jg-2, #2a37e8); color: #fff; } :root[data-theme="dark"] .mi-sim-b.fuerte { background: #ffe400; color: #11111a; } /* oscuro-tienda-logros.css */ /* [CERT] Modo oscuro, parte 2 (09-oct-2026): tienda-logros. Todo bajo :root[data-theme="dark"]; el claro no cambia. Mismo vidrio oscuro de la base (oscuro.css): translúcido, sin desenfoque, filo de luz arriba a la izquierda. Donde el claro no tiene borde, el filo va como sombra interior de 1 px (así no cambia ningún tamaño). */ /* ===================================================================== TIENDA (tienda.css, variables --tda-*) · 13-oct: diseño B «Mostrador de juego» ===================================================================== */ /* [CERT] Variables: azul aclarado para textos e íconos (los botones y fondos azules van aparte, más abajo) */ :root[data-theme="dark"] .tda { --tda-azul: #b3baff; --tda-azul2: #a7aeff; --tda-negro: #eef0ff; --tda-t2: #e4e6f8; --tda-t3: #c0c4e5; --tda-lav: #8e97ff; } /* [CERT] El vidrio de la cabecera, el inventario y las baldosas: el vidrio oscuro de la base */ :root[data-theme="dark"] .tda-vidrio { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.10), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .tda-vidrio::before { opacity: .04; } :root[data-theme="dark"] .tda-vidrio::after { background: linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 64%, rgba(142,151,255,.36) 100%); } /* [CERT] Cabecera: saldo, globo del oso y enlace */ :root[data-theme="dark"] .tdB-saldo { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%), linear-gradient(120deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.12), 0 16px 32px -24px rgba(0,0,0,.8); } :root[data-theme="dark"] .tdB-saldo-txt span { color: #f4c95d; } /* «monedas»: el dorado oscuro del claro, aclarado */ :root[data-theme="dark"] .tdB-globo { background: #2a37e8; box-shadow: 0 10px 20px -12px rgba(0,0,0,.8); } :root[data-theme="dark"] .tdB-globo::after { border-left-color: #2a37e8; } :root[data-theme="dark"] .tda-reintentar { background: rgba(142,151,255,.15); color: #dde0ff; } /* [CERT] Inventario: casillas y anillos (el centro del anillo, del color de la noche) */ :root[data-theme="dark"] .tdB-slot { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } :root[data-theme="dark"] .tdB-slot.on { background: linear-gradient(110deg, rgba(61,75,255,.26), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(142,151,255,.32); } :root[data-theme="dark"] .tdB-anillo { background: radial-gradient(closest-side, #1b1e42 76%, transparent 78% 100%), conic-gradient(var(--tda-azul2) calc(var(--p) * 1turn), rgba(255,255,255,.10) 0); } :root[data-theme="dark"] .tdB-slot[data-tda-fila="protectores"].on .tdB-anillo, :root[data-theme="dark"] .tdB-slot[data-tda-fila="comodin"].on .tdB-anillo { background: radial-gradient(closest-side, #1b1e42 76%, transparent 78% 100%), conic-gradient(var(--tda-am) 0 1turn); } /* rayo y escudo de los anillos: su azul oscuro no se veía sobre la noche */ :root[data-theme="dark"] .tdB-anillo .tda-rayo path:first-child, :root[data-theme="dark"] .tdB-anillo .tda-escudo path:first-child { fill: #b3baff; } :root[data-theme="dark"] .tdB-inv-cab .tda-hist ul { background: linear-gradient(150deg, rgba(30,33,72,.98), rgba(20,22,50,.97)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 44px -20px rgba(0,0,0,.8); } /* [CERT] Pestañas */ :root[data-theme="dark"] .tdB-tabs { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px -18px rgba(0,0,0,.8); } :root[data-theme="dark"] .tdB-tabs label:hover { color: #fff; } :root[data-theme="dark"] .tdB-tabs input:checked + label { background: #2a37e8; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 16px -8px rgba(0,0,0,.8); } /* [CERT] Baldosas: etiqueta, halo del pedestal y el botón del precio (amarillo con letras oscuras, como en el claro) */ :root[data-theme="dark"] .tdB-etq { background: rgba(142,151,255,.16); color: #dde0ff; box-shadow: none; } :root[data-theme="dark"] .tdB-pedestal::before { background: radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,0)); } :root[data-theme="dark"] .tdB-pedestal::after { background: radial-gradient(closest-side, rgba(142,151,255,.32), rgba(142,151,255,0)); } :root[data-theme="dark"] .tdB-precio { color: #11111a; } :root[data-theme="dark"] .tdB-precio:disabled { color: var(--tda-t3); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } :root[data-theme="dark"] .tdB-mas { background: rgba(17,17,26,.14); } /* [CERT] Ventanita de confirmar compra: vidrio oscuro; «Comprar» sigue amarillo con letras oscuras */ :root[data-theme="dark"] .tda-dialogo { background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), linear-gradient(150deg, rgba(30,33,72,.94), rgba(20,22,50,.90)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -30px rgba(0,0,0,.85); } :root[data-theme="dark"] .tda-dialogo::backdrop { background: rgba(4,5,16,.55); } :root[data-theme="dark"] .tda-dlg-saldo { background: rgba(255,255,255,.06); } :root[data-theme="dark"] .tda-btn { color: #11111a; } :root[data-theme="dark"] .tda-btn:disabled { color: var(--tda-t3); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } :root[data-theme="dark"] .tda-btn.tda-btn-sec { color: #dde0ff; background: rgba(142,151,255,.15); box-shadow: none; } :root[data-theme="dark"] .tda-btn.tda-btn-sec:hover:not(:disabled) { background: rgba(142,151,255,.24); } /* [CERT] Vitrina de cursos (oculta desde el 13-oct; por si se vuelve a mostrar) */ :root[data-theme="dark"] .tda-ir { background: #2a37e8; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 24px -14px rgba(0,0,0,.8); } :root[data-theme="dark"] .tda-ir:hover { background: #3a47f5; filter: none; } :root[data-theme="dark"] .tda-vitrina { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.10), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .tda-vitrina::before { background: linear-gradient(112deg, transparent 0 56%, rgba(255,255,255,.04) 56% 61%, transparent 61% 64%, rgba(255,255,255,.025) 64% 66%, transparent 66%); } :root[data-theme="dark"] .tda-candado { background: linear-gradient(110deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.09), 0 16px 30px -26px rgba(0,0,0,.8); } :root[data-theme="dark"] .tda-candado.abierto { background: linear-gradient(110deg, rgba(255,255,255,.08), rgba(255,228,0,.07)); } :root[data-theme="dark"] .tda-candado-ic { background: linear-gradient(140deg, #2330e0, #4a57ff); box-shadow: 0 10px 20px -12px rgba(0,0,0,.8); } :root[data-theme="dark"] .tda-barra { background: rgba(255,255,255,.10); } :root[data-theme="dark"] .tda-barra i { background: linear-gradient(90deg, #2a37e8, #6c78ff 75%, #ffe400); } :root[data-theme="dark"] .tda-ticket-li { filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); } :root[data-theme="dark"] .tda-ticket { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), linear-gradient(170deg, rgba(40,44,94,.80) 0%, rgba(32,35,78,.74) 58%, rgba(28,31,68,.70) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.08); } :root[data-theme="dark"] .tda-ticket::after { background: rgba(0,0,0,.30); box-shadow: inset 0 1px 2px rgba(0,0,0,.55); } :root[data-theme="dark"] .tda-ticket-tipo { color: var(--tda-t2); } /* con la vitrina bloqueada va al 74 %: así sigue legible */ :root[data-theme="dark"] .tda-ticket-pie { border-top-color: rgba(255,255,255,.16); } :root[data-theme="dark"] .tda-usd { color: #dde0ff; } :root[data-theme="dark"] .tda-cerrado { background: rgba(255,255,255,.07); color: var(--tda-t2); } /* ===================================================================== LOGROS (logros.css) · 13-oct: diseño C «Álbum por categorías» ===================================================================== */ /* [CERT] Colores del diseño en la noche: textos claros; los fondos azules van aparte, más abajo */ :root[data-theme="dark"] :is(.lg-raiz, .lg-dialogo, .lg-aviso) { --lg-azul: #b3baff; --lg-azul-b: #a7aeff; --lg-lav: #8e97ff; --lg-negro: #eef0ff; --lg-t2: #e4e6f8; --lg-t3: #c0c4e5; } /* [CERT] Foco: el anillo azul oscuro no se ve en la noche; va en azul vivo */ :root[data-theme="dark"] .lg-raiz button:focus-visible, :root[data-theme="dark"] .lg-raiz a:focus-visible, :root[data-theme="dark"] .lg-aviso button:focus-visible, :root[data-theme="dark"] .lg-aviso a:focus-visible { box-shadow: 0 0 0 6px #2a37e8 !important; } /* [CERT] Tarjeta de nivel de arriba (solo la de esta pantalla): vidrio oscuro, sin bloque azul sólido */ :root[data-theme="dark"] .lg-nivel-cab .level-card { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 18px -14px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .lg-nivel-cab .level-card::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 64%, rgba(142,151,255,.4) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } :root[data-theme="dark"] .lg-nivel-cab .level-card::before { opacity: .04; } :root[data-theme="dark"] .lg-nivel-cab .level-card h3 { color: #b3baff; } :root[data-theme="dark"] .lg-nivel-cab .progress { background: rgba(255,255,255,.12); } :root[data-theme="dark"] .lg-nivel-cab .progress > span { background: color-mix(in srgb, var(--pc, #2a37e8) 50%, #fff); } :root[data-theme="dark"] .lg-nivel-cab .level-badge:not(.rango) { background: radial-gradient(110% 80% at 20% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); color: #eef0ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -10px 18px -14px rgba(0,0,0,.6), 0 0 0 1.5px rgba(142,151,255,.35), 0 14px 28px -16px rgba(0,0,0,.8); } :root[data-theme="dark"] .lg-nivel-cab .level-badge small { background: #1c1f3c; color: #eef0ff; border-color: rgba(142,151,255,.35); } /* [CERT] El vidrio del diseño (cabecera, índice, filtro, páginas del álbum y vacíos): el vidrio oscuro de la base */ :root[data-theme="dark"] :is(.lg-cab, .lg-al-chip, .lg-filtros, .lg-al-panel, .lg-vacio) { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.10), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] :is(.lg-cab, .lg-al-chip, .lg-filtros, .lg-al-panel, .lg-vacio, .lg-d-caja, .lg-a-caja)::before { opacity: .04; } :root[data-theme="dark"] :is(.lg-cab, .lg-al-chip, .lg-filtros, .lg-al-panel, .lg-vacio, .lg-d-caja, .lg-a-caja)::after { background: linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 64%, rgba(142,151,255,.36) 100%); } :root[data-theme="dark"] .lg-cab { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(110deg, rgba(30,33,72,.74) 0%, rgba(24,27,62,.64) 45%, rgba(26,32,100,.58) 75%, rgba(0,18,253,.30) 100%); } @media (hover: hover) { :root[data-theme="dark"] .lg-al-chip:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.18), 0 30px 54px -28px rgba(0,0,0,.8); } } /* [CERT] Anillo total, aros de las categorías y lentes: el centro, del color de la noche */ :root[data-theme="dark"] .lg-anillo-graf::before { background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.02) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -8px 14px -10px rgba(0,0,0,.6), 0 10px 22px -14px rgba(0,0,0,.7); } :root[data-theme="dark"] .lg-anillo-fondo { stroke: rgba(255,255,255,.10); } :root[data-theme="dark"] .lg-anillo-val { stroke: #5c69ff; } :root[data-theme="dark"] .lg-al-chip-aro { background: conic-gradient(#5c69ff calc(var(--p, 0) * 1%), rgba(255,255,255,.10) 0); } :root[data-theme="dark"] .lg-al-chip-aro::before { background: radial-gradient(circle at 34% 26%, #2a2e58 0%, #1b1e42 100%); box-shadow: 0 1px 2px rgba(0,0,0,.4); } :root[data-theme="dark"] .lg-al-ic { color: #dde0ff; background: radial-gradient(110% 80% at 20% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 14px -10px rgba(0,0,0,.6), 0 0 0 1.5px rgba(142,151,255,.3), 0 10px 20px -14px rgba(0,0,0,.7); } :root[data-theme="dark"] .lg-al-barra { background: rgba(255,255,255,.10); box-shadow: none; } :root[data-theme="dark"] .lg-al-barra i { background: linear-gradient(90deg, #2a37e8 0%, #5c69ff 70%, #b3baff 100%); } :root[data-theme="dark"] .lg-med-aro::before { background: conic-gradient(#8e97ff 0%, #5c69ff calc(var(--p, 0) * 1%), rgba(255,255,255,.10) 0); } /* [CERT] Filtro en cápsula */ :root[data-theme="dark"] .lg-filtros button { color: var(--text-2); } :root[data-theme="dark"] .lg-filtros button[aria-pressed="true"] { background: #2a37e8; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 24px -14px rgba(0,0,0,.8); } @media (hover: hover) { :root[data-theme="dark"] .lg-filtros button[aria-pressed="false"]:hover { background: rgba(255,255,255,.08); color: #fff; } } :root[data-theme="dark"] .lg-f-n { color: #dde0ff; background: rgba(142,151,255,.16); } :root[data-theme="dark"] .lg-filtros button[aria-pressed="true"] .lg-f-n { color: #11111a; } /* [CERT] Fichas, etiquetas y candado */ @media (hover: hover) { :root[data-theme="dark"] .lg-al-ficha:hover { background: radial-gradient(100% 80% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 28px -22px rgba(0,0,0,.7); } } :root[data-theme="dark"] .lg-al-ficha.lg-pend .lg-al-nom { color: var(--text-2); } :root[data-theme="dark"] :is(.lg-al-tag, .lg-al-ok) { color: #11111a; box-shadow: 0 0 0 2px #1b1e42, 0 4px 10px -4px rgba(0,0,0,.7); } :root[data-theme="dark"] .lg-al-nada { background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } :root[data-theme="dark"] .lg-candado { background: #2a2e58; color: #d6d9f3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 10px -4px rgba(0,0,0,.7); } :root[data-theme="dark"] .lg-prog-barra { background: rgba(255,255,255,.10); } :root[data-theme="dark"] .lg-prog-barra i { background: linear-gradient(90deg, #2a37e8 0%, #5c69ff 80%, #b3baff 100%); } :root[data-theme="dark"] .lg-sk { background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04)); background-size: 200% 100%; } /* [CERT] Panel de detalle y aviso «¡Logro desbloqueado!»: vidrio oscuro; los botones amarillos con letras oscuras */ :root[data-theme="dark"] .lg-dialogo::backdrop, :root[data-theme="dark"] .lg-aviso::backdrop { background: rgba(4,5,16,.6); } :root[data-theme="dark"] :is(.lg-d-caja, .lg-a-caja) { background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), linear-gradient(165deg, rgba(30,33,72,.95), rgba(20,22,50,.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.85); } :root[data-theme="dark"] :is(.lg-d-cerrar, .lg-a-cerrar) { background: rgba(255,255,255,.07); color: #dde0ff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } @media (hover: hover) { :root[data-theme="dark"] :is(.lg-d-cerrar, .lg-a-cerrar):hover { background: rgba(255,255,255,.13); } } :root[data-theme="dark"] :is(.lg-d-cat, .lg-a-cat) { color: #dde0ff; background: rgba(142,151,255,.16); box-shadow: none; } :root[data-theme="dark"] .lg-d-estado.on { background: rgba(142,151,255,.16); color: #dde0ff; } :root[data-theme="dark"] .lg-d-estado.off { background: rgba(255,255,255,.07); color: var(--text-2); } :root[data-theme="dark"] .lg-d-prog { background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.08); } :root[data-theme="dark"] .lg-d-acciones .btn-soft { background: rgba(142,151,255,.15); color: #dde0ff; } :root[data-theme="dark"] :is(.lg-a-ok, .lg-d-acciones .btn-gold) { color: #11111a; } /* oscuro-programas.css */ /* [CERT] Modo oscuro, parte 2 (09-oct-2026): programas. Todo bajo :root[data-theme="dark"]; el claro no cambia. Pantallas: Mis programas, Programa (temario), Lección, Examen y Biblioteca (recursos). Mismo vidrio oscuro de la base (translúcido, sin desenfoque, filo de luz arriba a la izquierda); azul vivo #2a37e8 en botones y cosas elegidas; azul aclarado #b3baff en textos, íconos y barras de avance. Sin adornos nuevos. */ /* ---------- 1. Vidrio oscuro: piezas que en claro son blancas (tarjeta de programa, áreas del temario, material de la lección). Receta del dueño. ---------- */ :root[data-theme="dark"] .prog-card, :root[data-theme="dark"] .acc-item, :root[data-theme="dark"] .resource { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); border-color: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .prog-card { border: 1px solid rgba(255,255,255,.10); } /* en claro también tiene filo de 1px */ /* ---------- 2. Mis programas ---------- */ /* Barras de avance: el color del programa (#0400BC) casi no se ve sobre la noche; se usa su versión aclarada */ :root[data-theme="dark"] :is([data-ruta="programas"], [data-ruta="programa"], [data-ruta="leccion"], [data-ruta="examen"]) .progress > span { background: #b3baff; } :root[data-theme="dark"] :is([data-ruta="programas"], [data-ruta="programa"], [data-ruta="leccion"], [data-ruta="examen"]) [style*="--pc"] .progress > span { background: color-mix(in srgb, var(--pc) 45%, #fff); } :root[data-theme="dark"] [data-ruta] :is(.course-head, .player-bar) .progress > span { background: #fff; } /* el reproductor, como en claro */ /* Botón blanco (Continuar, Avísame cuando abra, Volver al programa): en la noche, azul vivo con letras blancas */ :root[data-theme="dark"] :is([data-ruta="programas"], [data-ruta="programa"], [data-ruta="examen"]) .btn-white { background: #2a37e8; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -12px rgba(0,0,0,.7); } :root[data-theme="dark"] :is([data-ruta="programas"], [data-ruta="programa"], [data-ruta="examen"]) .btn-white:hover { background: #3a47f5; } /* «Próximamente» y la oferta conservan su fondo oscuro con degradado (le gusta al dueño); solo un filo de luz para separarlas de la noche */ :root[data-theme="dark"] [data-ruta="programas"] .offer { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.10), 0 26px 50px -30px rgba(0,0,0,.75); } /* Franja «Remotos Work»: en claro es un velo blanco; en la noche, vidrio oscuro con un toque azul a la izquierda */ :root[data-theme="dark"] .prox-work { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(100deg, rgba(61,75,255,.20) 0%, rgba(30,33,72,.74) 45%, rgba(22,24,56,.62) 75%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .prox-work .prox-ic { background: linear-gradient(140deg, #2a37e8, #0400bc); } /* el cuadrado azul se perdía en la noche */ :root[data-theme="dark"] .prox-badge { background: rgba(142,151,255,.16); color: #b8beff; } /* ---------- 3. Programa: cabecera ---------- */ /* Con colores de programa claros (naranja de Especialización, turquesa de Empleabilidad) las letras blancas no se leían: en la noche el color se oscurece solo lo necesario (luminosidad máx. 52 %). El azul de la Certificación no cambia. */ @supports (color: oklch(from red l c h)) { :root[data-theme="dark"] .course-head { background: linear-gradient(135deg, oklch(from var(--pc) min(l, .52) c h), color-mix(in srgb, oklch(from var(--pc) min(l, .52) c h) 45%, #0b1020)); } :root[data-theme="dark"] .prog-cover { background: linear-gradient(135deg, oklch(from var(--pc) min(l, .52) c h), color-mix(in srgb, oklch(from var(--pc) min(l, .52) c h) 50%, #0b1020)); } } :root[data-theme="dark"] .course-head .chip { background: rgba(11,12,29,.30); color: #fff; } /* como la etiqueta de la portada */ :root[data-theme="dark"] .course-head .btn-ghost { color: #fff; } :root[data-theme="dark"] .course-head .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; } :root[data-theme="dark"] :is(.course-head .crumbs, .course-head .crumbs a) { color: rgba(255,255,255,.9); } /* ---------- 4. Programa: temario por áreas y módulos ---------- */ :root[data-theme="dark"] .acc-head:hover { background: rgba(255,255,255,.04); } :root[data-theme="dark"] .acc-item.locked .acc-num { background: rgba(255,255,255,.08); color: var(--text-2); } /* Zona Gold: el mismo vidrio con el tinte dorado que ya tiene en claro */ :root[data-theme="dark"] .acc-item.gold { background: linear-gradient(180deg, rgba(244,201,93,.10) 0%, rgba(244,201,93,0) 140px), radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); border-color: rgba(244,201,93,.38); } :root[data-theme="dark"] .module { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.09); } :root[data-theme="dark"] .module-head { background: rgba(255,255,255,.05); } :root[data-theme="dark"] .lesson-row { border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .lesson-row:hover { background: rgba(255,255,255,.05); } :root[data-theme="dark"] .lesson-row.locked:hover { background: transparent; } :root[data-theme="dark"] .lesson-row .lr-ic { background: rgba(255,255,255,.07); } :root[data-theme="dark"] .lesson-row.done .lr-ic { background: var(--success-soft); color: var(--success); } :root[data-theme="dark"] .lesson-row.current { background: rgba(142,151,255,.11); box-shadow: inset 3px 0 0 #b3baff; } :root[data-theme="dark"] .lesson-row.current .lr-ic { background: #2a37e8; color: #fff; } /* blanco sobre #b3baff no se leía */ :root[data-theme="dark"] .exam-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); } :root[data-theme="dark"] .exam-card.passed { background: rgba(69,211,154,.10); border-color: rgba(69,211,154,.42); } :root[data-theme="dark"] .exam-card.passed .li-ic { background: #1d9a6c; color: #fff; } /* el verde claro con ícono blanco no se leía */ /* Columna de la derecha: fechas de «Próximas clases» como vidrio */ :root[data-theme="dark"] [data-ruta="programa"] .event-date { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } /* ---------- 5. Lección: reproductor, lectura, acciones, material y comentarios ---------- */ :root[data-theme="dark"] .player { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .play-btn { background: #2a37e8; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 30px rgba(0,0,0,.45); } :root[data-theme="dark"] .play-btn:hover { background: #3a47f5; } :root[data-theme="dark"] .reading-hero { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, color-mix(in srgb, var(--pc, #2a37e8) 26%, rgba(30,33,72,.74)) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); border-color: color-mix(in srgb, var(--pc, #2a37e8) 40%, rgba(255,255,255,.12)); } :root[data-theme="dark"] .lesson-actions { border-bottom-color: rgba(255,255,255,.08); } /* Botón verde (Marcar como completada, Enviar examen): verde esmeralda para que las letras blancas se lean */ :root[data-theme="dark"] :is([data-ruta="leccion"], [data-ruta="examen"]) .btn-success { background: #12805c; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } :root[data-theme="dark"] :is([data-ruta="leccion"], [data-ruta="examen"]) .btn-success:hover { background: #128560; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); } :root[data-theme="dark"] .article blockquote { background: rgba(255,255,255,.05); border-left-color: #b3baff; } :root[data-theme="dark"] .article code { background: rgba(255,255,255,.08); } :root[data-theme="dark"] .resource:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20); } :root[data-theme="dark"] .comment + .comment { border-top-color: rgba(255,255,255,.08); } :root[data-theme="dark"] .comment .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--text); } :root[data-theme="dark"] .comment .input::placeholder { color: var(--text-3); } :root[data-theme="dark"] .comment .input:focus { border-color: #b3baff; box-shadow: 0 0 0 3px rgba(142,151,255,.22); } :root[data-theme="dark"] .syllabus-head { border-bottom-color: rgba(255,255,255,.08); } /* ---------- 6. Examen: portada, preguntas, temporizador y resultado ---------- */ /* Íconos de la portada: el azul de marca se volvía celeste claro y el ícono amarillo/azul no se leía */ :root[data-theme="dark"] [data-ruta="examen"] .stat-ic { background: #2a37e8; color: #ffe400; } :root[data-theme="dark"] [data-ruta="examen"] .stat:nth-child(2) .stat-ic, :root[data-theme="dark"] [data-ruta="examen"] .stat:nth-child(4) .stat-ic { background: #ffe400; color: #0400bc; } :root[data-theme="dark"] [data-ruta="examen"] .stat:nth-child(3) .stat-ic { background: #2a37e8; color: #fff; } :root[data-theme="dark"] .timer { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); } :root[data-theme="dark"] .timer.low { background: var(--danger-soft); color: var(--danger); border-color: transparent; } :root[data-theme="dark"] .q-option { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); } :root[data-theme="dark"] .q-option:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.26); } :root[data-theme="dark"] .q-letter { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--text-2); } :root[data-theme="dark"] .q-option[aria-checked="true"] { background: rgba(61,75,255,.20); border-color: #6c78ff; } :root[data-theme="dark"] .q-option[aria-checked="true"] .q-letter { background: #2a37e8; color: #fff; border-color: transparent; } :root[data-theme="dark"] .q-option.correct { background: var(--success-soft); border-color: var(--success); } :root[data-theme="dark"] .q-option.wrong { background: var(--danger-soft); border-color: var(--danger); } :root[data-theme="dark"] .q-dot { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: var(--text-2); } :root[data-theme="dark"] .q-dot.answered { background: rgba(142,151,255,.18); color: #dde0ff; border-color: transparent; } /* Resultado: en claro el degradado termina en blanco; en la noche se desvanece hacia el fondo */ :root[data-theme="dark"] .result-hero.pass { background: linear-gradient(180deg, rgba(69,211,154,.13), rgba(69,211,154,0) 70%); } :root[data-theme="dark"] .result-hero.fail { background: linear-gradient(180deg, rgba(255,122,126,.13), rgba(255,122,126,0) 70%); } :root[data-theme="dark"] [data-ruta="examen"] .result-hero .ring .ring-val { stroke: color-mix(in srgb, var(--pc, #2a37e8) 45%, #fff); } /* ---------- 7. Biblioteca: filtro y tarjetas ---------- */ :root[data-theme="dark"] :is(.select[data-filter="rpid"], .input[data-filter="rq"]) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--text); } :root[data-theme="dark"] :is(.select[data-filter="rpid"], .input[data-filter="rq"]):hover { border-color: rgba(255,255,255,.28); } :root[data-theme="dark"] :is(.select[data-filter="rpid"], .input[data-filter="rq"]):focus { border-color: #b3baff; box-shadow: 0 0 0 3px rgba(142,151,255,.22); } :root[data-theme="dark"] .input[data-filter="rq"]::placeholder { color: var(--text-3); } :root[data-theme="dark"] .select[data-filter="rpid"] option { background: #16182f; color: var(--text); } :root[data-theme="dark"] .res-card.card.hover:hover { border-color: rgba(255,255,255,.20) !important; } /* [CERT] 14-oct · Actividad del módulo (contrato 0.28.0): la fila del camino (.ar2-act, area-camino.css) y lo nuevo de su pantalla (#/entrega-modulo/...: .en-sub, .en-enlace). El resto de la pantalla usa el oscuro de .en- que ya está en area-camino.css. */ :root[data-theme="dark"] .ar2-act, :root[data-theme="dark"] .ar2-act:hover { color: #eef0ff; } :root[data-theme="dark"] .ar2-act { background: rgba(255,255,255,.04); border-color: rgba(179,186,255,.3); } :root[data-theme="dark"] .ar2-act:hover { background: rgba(179,186,255,.1); border-color: rgba(179,186,255,.5); } :root[data-theme="dark"] .ar2-act.is-hecho { border-color: rgba(179,186,255,.22); } :root[data-theme="dark"] .ar2-act-ic { color: #b3baff; background: rgba(179,186,255,.14); } :root[data-theme="dark"] .ar2-act.is-pendiente .ar2-act-est { color: #b3baff; background: rgba(179,186,255,.12); } :root[data-theme="dark"] .ar2-act-ir { color: #b3baff; } :root[data-theme="dark"] .en-sub { color: #b4bbcc; } :root[data-theme="dark"] .en-enlace { color: #b3baff; } /* oscuro-pantallas.css */ /* [CERT] Modo oscuro, parte 2 (09-oct-2026): pantallas. Todo bajo :root[data-theme="dark"]; el claro no cambia. */ /* [CERT] Área: calendario, certificados, ranking, notificaciones, ayuda, comunidad y resultados del buscador de arriba. Solo colores, fondos, bordes y sombras. Vidrio oscuro translúcido sin desenfoque, con filo de luz arriba a la izquierda. */ /* ---------- Buscador de arriba: resultados ---------- El desplegable vive dentro de la barra de vidrio y ahí el navegador no puede difuminar: con el velo translúcido se leían las letras de la página de atrás. Como en claro (material «grueso»), va opaco; el vidrio se nota en el borde de luz. */ :root[data-theme="dark"] #qres .pop { background: linear-gradient(150deg, #1e2148, #141632) padding-box, linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 45%, rgba(142,151,255,.40)) border-box !important; } :root[data-theme="dark"] #qres .pop .muted { color: var(--text-2); } /* el tipo de resultado se lee también sobre la opción marcada */ /* ---------- Calendario ---------- */ /* Cada evento: capa de vidrio clara sobre la tarjeta (en claro es la caja blanca); el filo izquierdo sigue en azul aclarado */ :root[data-theme="dark"] .cal-event { background: linear-gradient(145deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%); border-color: rgba(255,255,255,.09); border-left-color: var(--primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } :root[data-theme="dark"] .cal-event .event-date { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } /* Mini calendario: los días eran botones grises del sistema; ahora vidrio tenue y el día de hoy en azul vivo con número blanco */ :root[data-theme="dark"] .minical-grid button.d { background: rgba(255,255,255,.06); border-style: solid; border-color: rgba(255,255,255,.14); } :root[data-theme="dark"] .minical-grid button.d:hover { background: rgba(255,255,255,.12); color: var(--text); } :root[data-theme="dark"] .minical-grid button.d.today { background: #2a37e8; border-color: #2a37e8; color: #fff; } :root[data-theme="dark"] .minical-grid button.d.today:hover { background: #3a47f5; border-color: #3a47f5; } /* ---------- Certificados ---------- */ /* El diploma era un bloque sólido: ahora el mismo vidrio oscuro de las tarjetas (fondo, borde y sombra de la base) */ :root[data-theme="dark"] .diploma { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); border-color: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 18px -14px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25), 0 26px 50px -30px rgba(0,0,0,.75); } /* Arte del diploma: el mismo toque del color del programa, translúcido; los dos marcos se aclaran para que se vean en la noche */ :root[data-theme="dark"] .diploma-art { background: linear-gradient(135deg, color-mix(in srgb, var(--pc, #2a37e8) 22%, transparent), rgba(255,255,255,.015)); border-bottom-color: rgba(255,255,255,.10); } :root[data-theme="dark"] .diploma-art::before { border-color: color-mix(in srgb, color-mix(in srgb, var(--pc, #2a37e8) 50%, #fff) 40%, transparent); } :root[data-theme="dark"] .diploma-art::after { border-color: color-mix(in srgb, color-mix(in srgb, var(--pc, #2a37e8) 50%, #fff) 26%, transparent); } /* Bloqueado: el arte queda atenuado (como en claro), pero la frase de arriba sigue legible */ :root[data-theme="dark"] .diploma.locked .eyebrow { color: var(--text-2); } :root[data-theme="dark"] .diploma .code { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--text-2); } /* Barra del requisito: el azul del programa (#0400BC) no se veía sobre la noche; va en el azul brillante de la noche (#6C78FF) */ :root[data-theme="dark"] .diploma .progress > span { background: var(--azul-brillante, #6c78ff); } /* ---------- Ranking ---------- */ /* «Tu posición»: azul vivo con texto blanco (el azul aclarado no daba contraste con letras blancas) */ :root[data-theme="dark"] .me-sticky { background: #2a37e8; color: #fff; } :root[data-theme="dark"] .me-sticky .avatar { background: rgba(255,255,255,.12); } :root[data-theme="dark"] .me-sticky .btn-white { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); color: #fff; } :root[data-theme="dark"] .me-sticky .btn-white:hover { background: rgba(255,255,255,.18); } /* Podio: oro y bronce quedan igual; la plata baja un tono para no ser un bloque casi blanco */ :root[data-theme="dark"] .podium-col.p2 .podium-base { background: linear-gradient(180deg, #c3cad7, #8b94a7); } /* Tabla: cabecera y puestos translúcidos; la etiqueta «Tú» con letra más clara sobre tu fila */ :root[data-theme="dark"] .rank-table th { background: rgba(255,255,255,.04); } :root[data-theme="dark"] .rank-pos { background: rgba(255,255,255,.07); } :root[data-theme="dark"] .rank-table .chip-primary { background: rgba(142,151,255,.22); color: #dfe2ff; } /* Tarjeta de nivel (al costado): la barra con el mismo azul brillante de la noche */ :root[data-theme="dark"] .lesson-layout .level-card .progress > span { background: var(--azul-brillante, #6c78ff); } /* ---------- Notificaciones ---------- */ /* Leídas: el tinte del tipo de aviso (logro, clase, sistema, comunidad, oferta) más suave, como en claro, y el texto sigue legible */ :root[data-theme="dark"] .notif.n-achievement { background: rgba(244,201,93,.08); } :root[data-theme="dark"] .notif.n-class { background: rgba(255,122,126,.08); } :root[data-theme="dark"] .notif.n-system { background: rgba(115,188,255,.08); } :root[data-theme="dark"] .notif.n-community { background: rgba(69,211,154,.08); } :root[data-theme="dark"] .notif.n-offer { background: rgba(142,151,255,.08); } /* No leídas: un velo azul suave (en claro, lila); va después para ganarle al tinte del tipo. El ícono de cada aviso en vidrio tenue */ :root[data-theme="dark"] .notif.unread { background: rgba(142,151,255,.08); } :root[data-theme="dark"] .notif .li-ic { background: rgba(255,255,255,.06); } /* ---------- Ayuda ---------- */ /* Íconos de contacto: el cuadrado azul de marca con el ícono amarillo (como en claro); el azul aclarado no dejaba ver el amarillo */ :root[data-theme="dark"] .g-3 > .card > .stat-ic { background: #2a37e8; } /* ---------- Comunidad ---------- */ /* Tema fijado: en claro lleva un tinte lila; en oscuro el vidrio general lo tapaba. Vuelve como un velo azul suave */ :root[data-theme="dark"] .thread.pinned { background: linear-gradient(rgba(142,151,255,.10), rgba(142,151,255,.10)), radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%) !important; border-color: rgba(142,151,255,.26) !important; } /* Al pasar el ratón por un tema, el vidrio se aclara apenas (en claro también cambia de fondo) */ :root[data-theme="dark"] .thread.card:not(.pinned):hover { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(38,42,88,.80) 0%, rgba(28,31,68,.68) 60%, rgba(22,24,54,.62) 100%) !important; } /* Formulario «Nuevo tema»: campos de vidrio (en claro son blancos) */ :root[data-theme="dark"] #nt-title, :root[data-theme="dark"] #nt-body { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--text); } :root[data-theme="dark"] #nt-title::placeholder, :root[data-theme="dark"] #nt-body::placeholder { color: var(--text-3); } /* area-camino.css */ /* [CERT] 12-oct · Camino del área (página #/area/...), la propuesta C que eligió el dueño («me encanta al 100 % la C»). Cada módulo es una estación del camino, como en el mapa de progreso: la línea va en azul hasta la estación donde vas; un puntito por clase; solo la estación actual llega abierta. Liquid glass (receta del campus): velo blanco en degradado, filo de luz de 2 px con reflejo azul abajo a la derecha, brillo arriba a la izquierda, grosor por dentro y sombra azulada. Sin backdrop-filter: se ven las formas del fondo. Funciones en app.js: caminoArea y montarCaminoArea (clases .ar2-). */ .ar2-camino { --ar2-col: 56px; --ar2-gap: 10px; --ar2-centro: 30px; --ar2-extra: 38px; --ar2-noche: #121452; --ar2-texto: #4a5268; --ar2-azul: #0400bc; --ar2-brillante: #0012fd; --ar2-lavanda: #6c78ff; display: grid; gap: 14px; font-family: var(--font, "Poppins", system-ui, sans-serif); } .ar2-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ar2-gap); } /* ---------- estación: el círculo sobre la línea y la tarjeta de vidrio al lado ---------- */ .ar2-est { position: relative; display: grid; grid-template-columns: var(--ar2-col) minmax(0, 1fr); column-gap: 12px; align-items: start; } .ar2-est.is-actual { margin-top: var(--ar2-extra); } /* aire para «¡Aquí vas!» */ /* la línea hasta la estación siguiente: un carril de vidrio con puntitos (pendiente) o una línea azul (hecha) */ .ar2-via { position: absolute; z-index: 0; left: calc(var(--ar2-col) / 2 - 7px); width: 14px; top: var(--ar2-centro); bottom: calc(-1 * (var(--ar2-gap) + var(--ar2-centro))); border-radius: 7px; pointer-events: none; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(4,0,188,.05); } .ar2-est.antes-actual .ar2-via { bottom: calc(-1 * (var(--ar2-gap) + var(--ar2-extra) + var(--ar2-centro))); } .ar2-via::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 6px; margin-left: -3px; background: radial-gradient(circle at 3px 3px, rgba(4,0,188,.34) 2.4px, transparent 2.9px) 0 4px / 6px 12px repeat-y; } .ar2-via.is-llena::after { top: 0; bottom: 0; width: 5px; margin-left: -2.5px; border-radius: 3px; background: var(--ar2-brillante); } /* el círculo (número, ✓ o candado), como los del mapa */ .ar2-med { position: relative; z-index: 1; grid-column: 1; grid-row: 1; justify-self: center; width: 44px; height: 44px; margin-top: calc(var(--ar2-centro) - 22px); box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ar2-azul); font: 400 23px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; border: 1.5px solid rgba(255,255,255,.95); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.98), rgba(255,255,255,.6) 62%, rgba(255,255,255,.45)); box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -6px rgba(4,0,188,.28), 0 10px 20px -12px rgba(4,0,188,.6); transition: transform .2s; } .ar2-med b { font-weight: 400; padding-top: 2px; } .ar2-est:not(.ar2-meta) > .ar2-med:hover { transform: scale(1.06); } .ar2-est.is-hecha > .ar2-med { color: #fff; border-color: rgba(255,255,255,.55); background: radial-gradient(120% 120% at 30% 18%, #6b76ff, var(--ar2-brillante) 55%, var(--ar2-azul)); box-shadow: inset 0 2px 1px rgba(255,255,255,.5), 0 10px 22px -10px rgba(0,18,253,.8); } .ar2-est.is-actual > .ar2-med { width: 50px; height: 50px; margin-top: calc(var(--ar2-centro) - 25px); font-size: 27px; border: 2.5px solid var(--ar2-brillante); box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -6px rgba(4,0,188,.28), 0 12px 24px -12px rgba(4,0,188,.7); } .ar2-est.is-bloqueada > .ar2-med { color: var(--ar2-lavanda); border: 1.5px dashed rgba(108,120,255,.62); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.78), rgba(238,240,255,.5) 62%, rgba(226,229,255,.4)); box-shadow: none; } /* ---------- la tarjeta de vidrio ---------- */ .ar2-tarjeta { position: relative; isolation: isolate; grid-column: 2; min-width: 0; border-radius: 20px; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.46), rgba(255,255,255,.14)); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 6px rgba(4,0,188,.05), 0 16px 32px -22px rgba(4,0,188,.5); } .ar2-tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .ar2-est.abierta .ar2-tarjeta { box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } /* cabecera de la estación: nombre · puntitos · 3/6 · 52 min · flecha (todo es un botón) */ .ar2-h { margin: 0; font: inherit; } .ar2-boton { -webkit-appearance: none; appearance: none; width: 100%; min-height: calc(var(--ar2-centro) * 2); margin: 0; border: 0; border-radius: 20px; background: transparent; display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 18px; padding: 8px 14px 8px 20px; font: inherit; color: var(--ar2-noche); text-align: left; cursor: pointer; transition: background .2s; } .ar2-boton:hover { background: rgba(255,255,255,.28); } .ar2-boton:focus { outline: none; } .ar2-boton:focus-visible { outline: 2px solid var(--ar2-brillante); outline-offset: 2px; } .ar2-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; line-height: 1.35; } .ar2-est.is-bloqueada .ar2-nombre { font-weight: 500; } .ar2-linea { display: flex; align-items: center; gap: 14px; } .ar2-puntos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; width: 126px; } .ar2-puntos i { width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(108,120,255,.62); background: rgba(255,255,255,.8); } .ar2-puntos i.is-hecha { border-color: rgba(255,255,255,.9); background: radial-gradient(120% 120% at 30% 20%, #6b76ff, var(--ar2-brillante) 60%, var(--ar2-azul)); } .ar2-puntos i.is-actual { width: 11px; height: 11px; border: 2px solid #fff; background: #ffe400; box-shadow: 0 0 0 1px rgba(196,160,0,.55); } .ar2-num { min-width: 96px; text-align: right; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--ar2-texto); font-variant-numeric: tabular-nums; } .ar2-chev { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ar2-azul); background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -9px rgba(4,0,188,.45); transition: transform .25s; } .ar2-est.abierta .ar2-chev { transform: rotate(180deg); } /* «¡Aquí vas!» con el panda del mapa, parado sobre la tarjeta de la estación actual */ .ar2-aqui { position: absolute; z-index: 2; left: 12px; bottom: calc(100% - 7px); display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 2px; pointer-events: none; } .ar2-globo { margin-top: 3px; padding: 4px 11px; border-radius: 12px 12px 12px 4px; background: #ffe400; color: #11111a; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; box-shadow: 0 8px 16px -10px rgba(0,0,0,.45); } .ar2-panda { display: block; width: 52px; height: 52px; max-width: none; } /* ---------- las clases de la estación abierta: una línea cada una ---------- */ .ar2-det { padding: 0 14px 12px 14px; } .ar2-det[hidden] { display: none; } .ar2-clases { list-style: none; margin: 0; padding: 8px 0 0; display: grid; gap: 2px; border-top: 1px solid rgba(4,0,188,.08); } .ar2-clase { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 40px; padding: 5px 10px 5px 6px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; color: var(--ar2-noche); text-decoration: none; transition: background .2s; } a.ar2-clase:hover { background: rgba(255,255,255,.55); text-decoration: none; } a.ar2-clase:focus { outline: none; } a.ar2-clase:focus-visible { outline: 2px solid var(--ar2-brillante); outline-offset: 0; } .ar2-ci { width: 26px; height: 26px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; color: var(--ar2-azul); background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 3px 8px -4px rgba(4,0,188,.4); } .ar2-ct { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ar2-cm { white-space: nowrap; font-size: 12px; color: var(--ar2-texto); font-variant-numeric: tabular-nums; } .ar2-clase.is-hecha .ar2-ci { color: #fff; border-color: rgba(255,255,255,.6); background: radial-gradient(120% 120% at 30% 20%, #6b76ff, var(--ar2-brillante) 60%, var(--ar2-azul)); } .ar2-clase.is-actual { grid-template-columns: 26px minmax(0, 1fr) auto auto; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 8px 18px -12px rgba(4,0,188,.5); font-weight: 600; } .ar2-clase.is-actual .ar2-ci { color: #11111a; background: #ffe400; border: 2px solid #fff; box-shadow: 0 3px 8px -4px rgba(150,110,0,.6); } .ar2-clase.is-actual:hover { background: rgba(255,255,255,.8); } .ar2-seguir { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px -10px rgba(4,0,188,.8); } .ar2-clase.is-bloqueada { color: var(--ar2-texto); cursor: not-allowed; } .ar2-clase.is-bloqueada .ar2-ci { color: var(--ar2-lavanda); background: rgba(238,240,255,.6); border: 1px dashed rgba(108,120,255,.55); box-shadow: none; } /* ---------- la meta: el examen final del área ---------- */ .ar2-meta > .ar2-med { border-radius: 14px; cursor: default; color: var(--ar2-azul); } .ar2-meta.is-ex-ok > .ar2-med, .ar2-meta.is-ex-listo > .ar2-med { color: #fff; border-color: rgba(255,255,255,.55); background: radial-gradient(120% 120% at 30% 18%, #6b76ff, var(--ar2-brillante) 55%, var(--ar2-azul)); box-shadow: inset 0 2px 1px rgba(255,255,255,.5), 0 10px 22px -10px rgba(0,18,253,.8); } .ar2-meta.is-ex-mal > .ar2-med { border: 1.5px solid rgba(108,120,255,.7); } .ar2-meta.is-ex-bloq > .ar2-med { color: var(--ar2-lavanda); border: 1.5px dashed rgba(108,120,255,.62); box-shadow: none; background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.78), rgba(238,240,255,.5) 62%, rgba(226,229,255,.4)); } .ar2-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: calc(var(--ar2-centro) * 2); padding: 8px 14px 8px 20px; box-sizing: border-box; } .ar2-ex-txt { flex: 1 1 220px; display: grid; gap: 1px; margin: 0; min-width: 0; } .ar2-ex-txt b { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ar2-noche); } .ar2-ex-txt span { font-size: 12.5px; line-height: 1.35; color: var(--ar2-texto); } .ar2-meta.is-ex-ok .ar2-ex-txt span, .ar2-meta.is-ex-listo .ar2-ex-txt span { color: var(--ar2-azul); font-weight: 600; } .ar2-ex-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -12px rgba(4,0,188,.8); } .ar2-ex-btn:hover { text-decoration: none; color: #fff; filter: brightness(1.08); } .ar2-ex-btn:focus-visible { outline: 2px solid var(--ar2-brillante); outline-offset: 2px; } .ar2-ex-nota { font-size: 12.5px; font-weight: 600; color: var(--ar2-texto); } /* área cerrada: el aviso, en el mismo vidrio */ .ar2-aviso { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; color: var(--ar2-texto); background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.46), rgba(255,255,255,.14)); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 1px #fff, 0 12px 26px -20px rgba(4,0,188,.5); } .ar2-aviso .ic { flex: none; margin-top: 2px; color: var(--ar2-lavanda); } .ar2-aviso b { color: var(--ar2-noche); } .ar2-aviso.is-gold .ic { color: #8a6200; } /* ---------- celular: el camino sigue vertical, pegado a la izquierda ---------- */ @media (max-width: 640px) { .ar2-camino { --ar2-col: 38px; --ar2-gap: 8px; --ar2-centro: 30px; --ar2-extra: 34px; } .ar2-est { column-gap: 8px; } .ar2-med { width: 34px; height: 34px; margin-top: calc(var(--ar2-centro) - 17px); font-size: 19px; } .ar2-med .ic { width: 16px; height: 16px; } .ar2-est.is-actual > .ar2-med { width: 38px; height: 38px; margin-top: calc(var(--ar2-centro) - 19px); font-size: 21px; border-width: 2px; } .ar2-via { width: 12px; left: calc(var(--ar2-col) / 2 - 6px); } .ar2-tarjeta, .ar2-boton { border-radius: 18px; } .ar2-boton { grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "nombre chev" "linea chev"; gap: 5px 8px; padding: 10px 10px 10px 14px; } .ar2-nombre { grid-area: nombre; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; } .ar2-linea { grid-area: linea; gap: 10px; } .ar2-puntos { width: auto; justify-content: flex-start; gap: 4px; } .ar2-num { min-width: 0; text-align: left; font-size: 12px; } .ar2-chev { grid-area: chev; width: 28px; height: 28px; } .ar2-aqui { left: 6px; } .ar2-globo { font-size: 11.5px; padding: 3px 9px; } .ar2-panda { width: 44px; height: 44px; } .ar2-det { padding: 0 8px 10px 8px; } .ar2-clase { column-gap: 10px; min-height: 44px; padding: 6px 8px 6px 4px; font-size: 13px; } .ar2-ct { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ar2-clase.is-actual { grid-template-columns: 26px minmax(0, 1fr) auto; } .ar2-clase.is-actual .ar2-cm { display: none; } .ar2-seguir { height: 30px; padding: 0 11px; } .ar2-ex { padding: 10px 10px 10px 14px; } .ar2-ex-txt { flex-basis: 140px; } .ar2-ex-txt b { font-size: 14px; } } /* accesibilidad: sin movimiento si la persona lo pide; sin transparencia con alto contraste */ @media (prefers-reduced-motion: reduce) { .ar2-med, .ar2-chev, .ar2-boton, .ar2-clase { transition: none; } .ar2-est:not(.ar2-meta) > .ar2-med:hover { transform: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .ar2-tarjeta, .ar2-aviso { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } .ar2-via { background: #fff; } } /* modo oscuro (el dueño trabaja en claro; aquí solo se asegura que se lea) */ :root[data-theme="dark"] .ar2-camino { --ar2-noche: #eef0ff; --ar2-texto: #b4bbcc; --ar2-azul: #b3baff; --ar2-lavanda: #b3baff; } :root[data-theme="dark"] .ar2-tarjeta, :root[data-theme="dark"] .ar2-aviso { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 32px -22px rgba(0,0,0,.6); } :root[data-theme="dark"] .ar2-tarjeta::after { opacity: .25; } :root[data-theme="dark"] .ar2-via { background: rgba(255,255,255,.08); box-shadow: none; } :root[data-theme="dark"] .ar2-via::after { background: radial-gradient(circle at 3px 3px, rgba(179,186,255,.5) 2.4px, transparent 2.9px) 0 4px / 6px 12px repeat-y; } :root[data-theme="dark"] .ar2-via.is-llena::after { background: #6c78ff; } :root[data-theme="dark"] .ar2-est:not(.is-hecha):not(.is-ex-ok):not(.is-ex-listo) > .ar2-med, :root[data-theme="dark"] .ar2-chev, :root[data-theme="dark"] .ar2-clase:not(.is-hecha):not(.is-actual) .ar2-ci { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); box-shadow: none; } :root[data-theme="dark"] .ar2-clase.is-actual, :root[data-theme="dark"] .ar2-boton:hover, :root[data-theme="dark"] a.ar2-clase:hover { background: rgba(255,255,255,.07); box-shadow: none; } /* los puntitos pendientes, huecos como en claro (rellenos de blanco parecían «más hechos» que las clases vistas) */ :root[data-theme="dark"] .ar2-puntos i:not(.is-hecha):not(.is-actual) { background: transparent; border-color: rgba(179,186,255,.55); } /* ---------- 12-oct · Desplegables (el dueño: «se puede mejorar los desplegables»): mismo diseño, mejor al usarlos ---------- Se abren y se cierran con suavidad (la altura crece desde 0 con grid-template-rows), las clases entran una tras otra, la flecha de la estación abierta se pinta de azul, las cerradas se levantan un poco al pasar el mouse y cada clase muestra «Repasar» o «Ver» al pasar por encima. */ .ar2-det { display: grid; grid-template-rows: 0fr; opacity: 0; padding: 0; transition: grid-template-rows .34s cubic-bezier(.2,.8,.2,1), opacity .24s ease; } .ar2-est.abierta .ar2-det { grid-template-rows: 1fr; opacity: 1; } .ar2-det > .ar2-clases { min-height: 0; overflow: hidden; margin: 0 10px 10px; padding: 8px 4px 4px; } .ar2-est.entrando .ar2-clases > li { animation: ar2-entra .4s cubic-bezier(.2,.8,.2,1) both; } .ar2-est.entrando .ar2-clases > li:nth-child(2) { animation-delay: .035s; } .ar2-est.entrando .ar2-clases > li:nth-child(3) { animation-delay: .07s; } .ar2-est.entrando .ar2-clases > li:nth-child(4) { animation-delay: .105s; } .ar2-est.entrando .ar2-clases > li:nth-child(5) { animation-delay: .14s; } .ar2-est.entrando .ar2-clases > li:nth-child(6) { animation-delay: .175s; } .ar2-est.entrando .ar2-clases > li:nth-child(7) { animation-delay: .21s; } .ar2-est.entrando .ar2-clases > li:nth-child(n+8) { animation-delay: .245s; } @keyframes ar2-entra { from { opacity: 0; transform: translateY(-6px); } } /* la flecha dice si está abierta: azul de marca al abrir */ .ar2-chev { transition: transform .3s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, box-shadow .2s; } .ar2-est.abierta .ar2-chev { color: #fff; border-color: rgba(255,255,255,.45); background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px -10px rgba(4,0,188,.8); } .ar2-boton:active .ar2-chev { transform: scale(.92); } .ar2-est.abierta .ar2-boton:active .ar2-chev { transform: rotate(180deg) scale(.92); } /* las estaciones cerradas se levantan un poco al pasar el mouse (invitan a abrirlas) */ .ar2-tarjeta { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; } .ar2-est:not(.abierta):not(.ar2-meta) .ar2-tarjeta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 4px 10px rgba(4,0,188,.07), 0 26px 46px -26px rgba(4,0,188,.6); } /* «Repasar» o «Ver», solo al pasar por la clase (sin agregar texto fijo) */ .ar2-clase { grid-template-columns: 26px minmax(0, 1fr) auto auto; } .ar2-ir { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ar2-azul); background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 6px 12px -8px rgba(4,0,188,.45); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; white-space: nowrap; } a.ar2-clase:hover .ar2-ir, a.ar2-clase:focus-visible .ar2-ir { opacity: 1; transform: none; } a.ar2-clase:hover .ar2-ci { transform: scale(1.08); } .ar2-ci { transition: transform .18s; } /* el panda cambia de pose según cómo vas (y espera en la meta cuando toca el examen o se completó el área) */ .ar2-est.con-panda { margin-top: var(--ar2-extra); } .ar2-panda { width: 60px; height: 60px; transform-origin: 50% 100%; } .ar2-aqui.is-empieza .ar2-panda { animation: ar2-estira 3.4s ease-in-out infinite; } .ar2-aqui.is-camina .ar2-panda, .ar2-aqui.is-mitad .ar2-panda { animation: ar2-paso 1.6s ease-in-out infinite; } .ar2-aqui.is-ultimo .ar2-panda, .ar2-aqui.is-examen .ar2-panda { animation: ar2-salta 1.9s ease-in-out infinite; } .ar2-aqui.is-completa .ar2-panda { animation: ar2-celebra 2.4s ease-in-out infinite; } @keyframes ar2-estira { 50% { transform: scaleY(1.04) rotate(-2deg); } } @keyframes ar2-paso { 50% { transform: translateY(-2px); } } @keyframes ar2-salta { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } } @keyframes ar2-celebra { 0%, 100% { transform: none; } 25% { transform: translateY(-4px) rotate(-3deg); } 50% { transform: none; } 75% { transform: translateY(-3px) rotate(3deg); } } @media (max-width: 640px) { .ar2-det > .ar2-clases { margin: 0 6px 8px; padding: 8px 2px 2px; } .ar2-ir { display: none; } /* en el celular no hay «pasar el mouse» */ .ar2-clase { grid-template-columns: 26px minmax(0, 1fr) auto; } .ar2-panda { width: 48px; height: 48px; } } @media (prefers-reduced-motion: reduce) { .ar2-det, .ar2-chev, .ar2-tarjeta, .ar2-ir, .ar2-ci { transition: none; } .ar2-est.entrando .ar2-clases > li, .ar2-panda { animation: none !important; } .ar2-est:not(.abierta):not(.ar2-meta) .ar2-tarjeta:hover { transform: none; } } :root[data-theme="dark"] .ar2-ir { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #b3baff; box-shadow: none; } :root[data-theme="dark"] .ar2-est:not(.abierta):not(.ar2-meta) .ar2-tarjeta:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 40px -24px rgba(0,0,0,.7); } /* ---------- 12-oct (3.ª vuelta) · Lo de adentro al abrir: TARJETAS (el dueño: «se ve plano, como una lista de texto») ---------- Cada clase es una tarjeta de vidrio: número grande en Bebas Neue, ícono del tipo (✓ si la viste, candado si se abre después), título en dos líneas y minutos. La que te toca va destacada y ocupa dos columnas. */ .ar2-det > .ar2-clases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 0; padding: 10px 4px 6px; } .ar2-clases > li { min-width: 0; display: flex; } .ar2-clases > li:has(.ar2-clase.is-actual) { grid-column: span 2; } .ar2-clases .ar2-clase { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 8px; width: 100%; min-height: 122px; padding: 12px 12px 10px; border-radius: 16px; text-decoration: none; color: var(--ar2-noche); font-size: 13.5px; font-weight: 500; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.72), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.22)); border: 1px solid rgba(255,255,255,.88); box-shadow: inset 0 1px 1px #fff, inset 0 -10px 18px -14px rgba(4,0,188,.22), 0 10px 22px -16px rgba(4,0,188,.45); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; } a.ar2-clase:hover { transform: translateY(-2px); background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.35)); box-shadow: inset 0 1px 1px #fff, inset 0 -10px 18px -14px rgba(4,0,188,.22), 0 18px 30px -18px rgba(4,0,188,.55); } .ar2-tc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ar2-tc-num { font: 400 30px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; letter-spacing: .02em; color: var(--ar2-azul); } .ar2-tc-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ar2-azul); background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 4px 10px -6px rgba(4,0,188,.5); } .ar2-tc-tit { font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ar2-tc-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; } .ar2-tc-min { font-size: 12px; font-weight: 500; color: var(--ar2-texto); } .ar2-tc-pie .ar2-ir { padding: 2px 9px; } .ar2-clase.is-hecha .ar2-tc-ic { color: #fff; border-color: rgba(255,255,255,.6); background: radial-gradient(120% 120% at 30% 20%, #6b76ff, var(--ar2-brillante) 60%, var(--ar2-azul)); } .ar2-clase.is-hecha .ar2-tc-num { color: rgba(4,0,188,.5); } .ar2-clases .ar2-clase.is-actual { border: 2px solid rgba(0,18,253,.5); font-weight: 600; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%), linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.55)); box-shadow: inset 0 1px 1px #fff, inset 0 -12px 20px -14px rgba(4,0,188,.25), 0 18px 34px -18px rgba(4,0,188,.6); } .ar2-clase.is-actual .ar2-tc-ic { color: #11111a; background: #ffe400; border: 2px solid #fff; } .ar2-clase.is-actual .ar2-tc-tit { font-size: 15px; } .ar2-clases .ar2-clase.is-bloqueada { cursor: not-allowed; color: var(--ar2-texto); background: linear-gradient(160deg, rgba(255,255,255,.38), rgba(255,255,255,.1)); border: 1px dashed rgba(108,120,255,.45); box-shadow: none; } .ar2-clase.is-bloqueada .ar2-tc-num { color: var(--ar2-lavanda); } .ar2-clase.is-bloqueada .ar2-tc-ic { color: var(--ar2-lavanda); background: rgba(238,240,255,.6); border: 1px dashed rgba(108,120,255,.55); box-shadow: none; } @media (max-width: 1100px) { .ar2-det > .ar2-clases { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ar2-det > .ar2-clases { gap: 8px; padding: 8px 2px 4px; } .ar2-clases > li:has(.ar2-clase.is-actual) { grid-column: 1 / -1; } .ar2-clases .ar2-clase { min-height: 112px; padding: 10px; } .ar2-tc-num { font-size: 26px; } .ar2-tc-tit { font-size: 13px; } } /* 12-oct: el camino va SIN panda (el dueño: «el oso sigue sin gustarme nada»); la estación actual queda con su número y su aro azul */ /* 12-oct (4.ª vuelta, el dueño: «siento que son demasiado grandes»): tarjetas más compactas, 4 por fila en pantallas anchas */ .ar2-det > .ar2-clases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ar2-clases .ar2-clase { min-height: 86px; padding: 9px 10px 8px; gap: 5px; border-radius: 14px; } .ar2-tc-num { font-size: 22px; } .ar2-tc-ic { width: 22px; height: 22px; } .ar2-tc-ic svg { width: 12px; height: 12px; } .ar2-tc-tit { font-size: 12.5px; } .ar2-clase.is-actual .ar2-tc-tit { font-size: 13.5px; } .ar2-tc-pie { min-height: 24px; } .ar2-tc-pie .ar2-seguir { height: 26px; padding: 0 11px; font-size: 12px; } .ar2-tc-min { font-size: 11.5px; } @media (max-width: 1100px) { .ar2-det > .ar2-clases { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .ar2-det > .ar2-clases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .ar2-clases .ar2-clase { min-height: 80px; padding: 8px 9px 7px; } .ar2-tc-num { font-size: 20px; } .ar2-tc-tit { font-size: 12px; } } :root[data-theme="dark"] .ar2-clases .ar2-clase { color: #eef0ff; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow: none; } :root[data-theme="dark"] .ar2-clases .ar2-clase.is-actual { border-color: rgba(140,151,255,.7); background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); } :root[data-theme="dark"] .ar2-clases .ar2-clase.is-bloqueada { border-color: rgba(179,186,255,.3); background: transparent; } :root[data-theme="dark"] .ar2-tc-ic { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #b3baff; box-shadow: none; } :root[data-theme="dark"] .ar2-tc-num { color: #b3baff; } /* ---------- 12-oct · Agenda en vivo del área (contrato 0.19.0 de Julieth) ---------- Arriba del camino: las próximas sesiones en vivo del área, en el mismo vidrio. Cada sesión lleva el día como hoja de calendario (día de la semana en la franja azul, número en Bebas Neue, mes), el título, la hora y cuánto falta; «Entrar» se activa 15 min antes. Un área solo en vivo muestra solo esta agenda. Funciones en app.js: agendaArea, ar2EvEstado, ar2EvAccion. */ .ar2-vivo { position: relative; isolation: isolate; border-radius: 20px; padding: 14px 16px; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.46), rgba(255,255,255,.14)); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 6px rgba(4,0,188,.05), 0 16px 32px -22px rgba(4,0,188,.5); } .ar2-vivo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .ar2-vivo-cab { display: flex; align-items: center; gap: 12px; } .ar2-vivo-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 18px -10px rgba(4,0,188,.8); } .ar2-vivo.is-gold .ar2-vivo-ic { background: linear-gradient(160deg, #e2b000, #b08600 60%, #8a6a00); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 18px -10px rgba(138,106,0,.85); } .ar2-vivo-txt { flex: 1 1 auto; min-width: 0; } .ar2-vivo-txt h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ar2-noche); } .ar2-vivo-txt p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ar2-texto); } .ar2-vivo-cal { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ar2-azul); text-decoration: none; white-space: nowrap; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -9px rgba(4,0,188,.45); transition: background .2s, transform .2s; } .ar2-vivo-cal:hover { text-decoration: none; background: #fff; transform: translateY(-1px); } .ar2-vivo-cal:focus-visible, .ar2-ev-btn:focus-visible { outline: 2px solid var(--ar2-brillante); outline-offset: 2px; } .ar2-vivo-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .ar2-ev { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; grid-template-areas: "dia info falta acc"; align-items: center; column-gap: 14px; padding: 8px 10px 8px 8px; border-radius: 16px; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.72), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.22)); border: 1px solid rgba(255,255,255,.88); box-shadow: inset 0 1px 1px #fff, inset 0 -10px 18px -14px rgba(4,0,188,.2), 0 10px 22px -18px rgba(4,0,188,.45); } .ar2-ev[hidden] { display: none; } .ar2-ev.is-ahora, .ar2-ev.is-abre { border: 2px solid rgba(0,18,253,.45); background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%), linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.55)); } /* el día, como una hoja de calendario */ .ar2-ev-dia { grid-area: dia; display: flex; flex-direction: column; align-items: stretch; width: 54px; border-radius: 12px; overflow: hidden; text-align: center; line-height: 1; background: #fff; box-shadow: 0 0 0 1px rgba(4,0,188,.06), 0 8px 16px -12px rgba(4,0,188,.6); } .ar2-ev-dia span:first-child { padding: 4px 0 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); } .ar2-vivo.is-gold .ar2-ev-dia span:first-child { background: linear-gradient(160deg, #e2b000, #b08600); } .ar2-ev-dia b { padding-top: 5px; font: 400 27px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; color: var(--ar2-noche); } .ar2-ev-dia span:last-child { padding: 1px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ar2-texto); } .ar2-ev-info { grid-area: info; min-width: 0; display: grid; gap: 3px; } .ar2-ev-tit { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ar2-noche); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ar2-ev-cuando { font-size: 12.5px; line-height: 1.35; color: var(--ar2-texto); font-variant-numeric: tabular-nums; } /* cuánto falta: azul suave; amarillo cuando ya se puede entrar, con un punto que late mientras está en vivo */ .ar2-ev-falta { grid-area: falta; justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ar2-azul); background: rgba(108,120,255,.13); } .ar2-ev.is-ahora .ar2-ev-falta, .ar2-ev.is-abre .ar2-ev-falta { color: #11111a; background: #ffe400; box-shadow: 0 6px 12px -8px rgba(150,110,0,.7); } .ar2-ev-falta i { width: 8px; height: 8px; border-radius: 50%; background: var(--ar2-noche); animation: ar2-late 1.6s ease-out infinite; } @keyframes ar2-late { 0% { box-shadow: 0 0 0 0 rgba(18,20,82,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(18,20,82,0); } } .ar2-ev-acc { grid-area: acc; justify-self: end; display: flex; } .ar2-ev-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; color: #fff; text-decoration: none; background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -12px rgba(4,0,188,.8); transition: filter .2s, transform .2s; } a.ar2-ev-btn:hover { color: #fff; text-decoration: none; filter: brightness(1.08); transform: translateY(-1px); } .ar2-ev-btn.is-pronto { color: var(--ar2-lavanda); background: rgba(255,255,255,.5); border: 1px dashed rgba(108,120,255,.55); box-shadow: none; cursor: default; } .ar2-ev-nota { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--ar2-texto); } .ar2-ev-nota .ic { color: var(--ar2-lavanda); } @media (max-width: 640px) { .ar2-vivo { padding: 12px; border-radius: 18px; } .ar2-vivo-ic { width: 36px; height: 36px; border-radius: 12px; } .ar2-vivo-txt h2 { font-size: 15px; } .ar2-vivo-cal { width: 36px; height: 36px; padding: 0; justify-content: center; } .ar2-vivo-cal span { display: none; } /* en el celular, solo el ícono (el enlace dice «Ver el calendario») */ .ar2-ev { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "dia info info" "dia falta acc"; row-gap: 8px; column-gap: 12px; padding: 8px; align-items: start; } .ar2-ev-dia { width: 48px; align-self: center; } .ar2-ev-dia b { font-size: 24px; } .ar2-ev-falta { justify-self: start; align-self: center; } .ar2-ev-tit { font-size: 13.5px; } .ar2-ev-btn { height: 32px; padding: 0 13px; } } @media (prefers-reduced-motion: reduce) { .ar2-ev-falta i { animation: none; } .ar2-vivo-cal, .ar2-ev-btn { transition: none; } .ar2-vivo-cal:hover, a.ar2-ev-btn:hover { transform: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .ar2-vivo, .ar2-ev { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } :root[data-theme="dark"] .ar2-vivo { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 32px -22px rgba(0,0,0,.6); } :root[data-theme="dark"] .ar2-vivo::after { opacity: .25; } :root[data-theme="dark"] .ar2-ev { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow: none; } :root[data-theme="dark"] .ar2-ev.is-ahora, :root[data-theme="dark"] .ar2-ev.is-abre { border-color: rgba(140,151,255,.7); background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); } :root[data-theme="dark"] .ar2-ev-dia { background: rgba(255,255,255,.1); box-shadow: none; } :root[data-theme="dark"] .ar2-ev-falta { color: #b3baff; background: rgba(179,186,255,.12); } :root[data-theme="dark"] .ar2-ev.is-ahora .ar2-ev-falta, :root[data-theme="dark"] .ar2-ev.is-abre .ar2-ev-falta { color: #11111a; background: #ffe400; } :root[data-theme="dark"] .ar2-ev-falta i { background: #121452; } /* el punto que late va oscuro sobre el amarillo también en modo oscuro */ /* ---------- 12-oct · Zona Gold en el camino, con el estilo aprobado en Mis programas (3.ª vuelta, styles.css) ---------- El aviso de la Zona Gold cerrada es el mismo .zg-aviso dorado de Mis programas (aquí sin su margen); los candados de las estaciones cerradas de un área Gold van en dorado oscuro, como el candado de su portada. */ .ar2-camino .zg-aviso { margin: 0; } .ar2-camino.is-oro .ar2-est.is-bloqueada > .ar2-med, .ar2-camino.is-oro .ar2-meta.is-ex-bloq > .ar2-med { color: #b08600; border-color: rgba(176,134,0,.6); background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.9), rgba(255,248,205,.6) 62%, rgba(255,236,150,.4)); } .ar2-camino.is-oro .ar2-clase.is-bloqueada .ar2-tc-ic { color: #b08600; border-color: rgba(176,134,0,.5); background: rgba(255,248,205,.6); } :root[data-theme="dark"] .ar2-camino.is-oro .ar2-est.is-bloqueada > .ar2-med, :root[data-theme="dark"] .ar2-camino.is-oro .ar2-meta.is-ex-bloq > .ar2-med { color: #ffd23f; border-color: rgba(255,210,63,.45); background: rgba(255,210,63,.08); } /* ---------- 12-oct · Proyecto del área (contrato 0.18.0): la tarjeta al final del camino ---------- Ícono, «Proyecto del área», el estado («Por entregar» suave / «Entregado el …» en azul) y el botón. Lleva a #/entrega/... */ .ar2-proy { position: relative; isolation: isolate; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: "ic txt est ir"; align-items: center; column-gap: 14px; padding: 12px 14px; border-radius: 20px; color: var(--ar2-noche); text-decoration: none; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.46), rgba(255,255,255,.14)); border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 6px rgba(4,0,188,.05), 0 16px 32px -22px rgba(4,0,188,.5); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; } .ar2-proy:hover { text-decoration: none; color: var(--ar2-noche); transform: translateY(-2px); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 4px 10px rgba(4,0,188,.07), 0 26px 46px -26px rgba(4,0,188,.6); } .ar2-proy:focus { outline: none; } .ar2-proy:focus-visible { outline: 2px solid var(--ar2-brillante); outline-offset: 2px; } .ar2-proy-ic { grid-area: ic; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--ar2-lavanda), var(--ar2-azul)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 18px -10px rgba(4,0,188,.8); } .ar2-proy-txt { grid-area: txt; min-width: 0; display: grid; gap: 2px; } .ar2-proy-txt b { font-size: 14.5px; font-weight: 600; line-height: 1.35; } .ar2-proy-txt span { font-size: 12.5px; line-height: 1.4; color: var(--ar2-texto); } .ar2-proy-est { grid-area: est; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .ar2-proy-est:empty { display: none; } .ar2-proy.is-pendiente .ar2-proy-est { color: var(--ar2-azul); background: rgba(108,120,255,.13); } .ar2-proy.is-hecho .ar2-proy-est { color: #fff; background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); } .ar2-proy-ir { grid-area: ir; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; color: #fff; background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -12px rgba(4,0,188,.8); } .ar2-proy.is-hecho .ar2-proy-ir { color: var(--ar2-azul); background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 6px 12px -8px rgba(4,0,188,.45); } /* ---------- [CERT] 14-oct · Actividad del módulo (contrato 0.28.0): fila discreta al final de las clases de cada módulo ---------- Ícono pequeño, «Actividad del módulo», el estado («Por entregar» suave / «Entregada el …» en azul) y «Entregar» / «Ver». Lleva a #/entrega-modulo/... (app.js: actividadModulo, montarActividades). Su modo oscuro está en oscuro-programas.css. */ .ar2-act { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "ic txt est ir"; align-items: center; column-gap: 10px; min-height: 44px; box-sizing: border-box; margin: 12px 0 2px; padding: 7px 12px 7px 8px; border-radius: 14px; color: var(--ar2-noche); text-decoration: none; background: rgba(108,120,255,.06); border: 1px dashed rgba(108,120,255,.4); transition: background .2s, border-color .2s; } .ar2-act:hover { text-decoration: none; color: var(--ar2-noche); background: rgba(108,120,255,.12); border-color: rgba(108,120,255,.6); } .ar2-act:focus { outline: none; } .ar2-act:focus-visible { outline: 2px solid var(--ar2-brillante); outline-offset: 2px; } .ar2-act.is-hecho { border-style: solid; border-color: rgba(108,120,255,.3); } .ar2-act-ic { grid-area: ic; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--ar2-azul); background: rgba(108,120,255,.14); } .ar2-act-txt { grid-area: txt; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; } .ar2-act-est { grid-area: est; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .ar2-act-est:empty { display: none; } .ar2-act.is-pendiente .ar2-act-est { color: var(--ar2-azul); background: rgba(108,120,255,.13); } .ar2-act.is-hecho .ar2-act-est { color: #fff; background: linear-gradient(160deg, var(--ar2-brillante), var(--ar2-azul)); } .ar2-act-ir { grid-area: ir; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ar2-azul); white-space: nowrap; } /* ---------- 12-oct · Pantalla de entrega del proyecto (#/entrega/:<área>) ---------- Cabecera con el estado; si ya entregó, su entrega (fechas, notas y «Abrir mi carpeta»); el paso a paso de Julieth en tarjetas numeradas; y abajo, la lista «Antes de enviar, revisa que» al lado del formulario. Funciones en app.js: ROUTES.entrega, montarEntrega. */ .en-cab { display: flex; align-items: center; gap: 16px; margin-top: 6px; padding: 18px 20px; } .en-cab-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #6c78ff, #0400bc); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 22px -12px rgba(4,0,188,.8); } .en-cab-txt { flex: 1 1 auto; min-width: 0; } .en-etq { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6c78ff; } .en-cab .page-title { margin: 0; } .en-estado { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .en-estado.is-pendiente { color: #0400bc; background: rgba(108,120,255,.14); } .en-estado.is-hecho { color: #fff; background: linear-gradient(160deg, #0012fd, #0400bc); box-shadow: 0 8px 16px -10px rgba(4,0,188,.8); } .en-hecha, .en-paso, .en-revisa, .en-form { position: relative; border-radius: 20px; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.16)); border: 1px solid rgba(255,255,255,.82); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.2), 0 16px 32px -24px rgba(4,0,188,.5); } .en-hecha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; padding: 16px 20px; } .en-hecha-txt { flex: 1 1 280px; min-width: 0; display: grid; gap: 3px; } .en-hecha-txt b { font-size: 15px; color: #121452; } .en-hecha-txt span { font-size: 12.5px; color: #4a5268; } .en-notas { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #121452; white-space: pre-line; overflow-wrap: anywhere; } .en-h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.3; color: #121452; } .en-pasos { margin-top: 24px; } .en-pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .en-paso { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; } .en-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 400 21px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; padding-top: 2px; box-sizing: border-box; background: radial-gradient(120% 120% at 30% 18%, #6b76ff, #0012fd 55%, #0400bc); box-shadow: inset 0 2px 1px rgba(255,255,255,.4), 0 8px 16px -10px rgba(0,18,253,.8); } .en-paso h3 { margin: 3px 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #121452; } .en-paso p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #4a5268; } .en-envio { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; } .en-envio.sin-revisa { grid-template-columns: minmax(0, 1fr); } .en-revisa { padding: 18px 20px; } .en-revisa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .en-revisa li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: #121452; } .en-revisa li .ic { flex: none; margin-top: 1px; color: #0012fd; } .en-form { display: grid; gap: 6px; padding: 18px 20px 20px; } .en-campo { margin-top: 6px; font-size: 13px; font-weight: 600; color: #121452; } .en-campo span { font-weight: 400; color: #4a5268; } .en-input { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(108,120,255,.38); background: rgba(255,255,255,.88); font: inherit; font-size: 14px; line-height: 1.45; color: #121452; transition: border-color .2s, box-shadow .2s; } .en-input::placeholder { color: #8a90a6; } .en-input:focus { outline: none; border-color: #0012fd; box-shadow: 0 0 0 3px rgba(0,18,253,.16); } .en-input[aria-invalid="true"] { border-color: var(--danger, #c2272d); box-shadow: 0 0 0 3px rgba(194,39,45,.12); } textarea.en-input { min-height: 96px; resize: vertical; } .en-ayuda { margin: 1px 0 0; font-size: 12px; line-height: 1.4; color: #4a5268; } .en-cuenta { text-align: right; font-variant-numeric: tabular-nums; } .en-confirma { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; cursor: pointer; font-size: 13.5px; line-height: 1.45; color: #121452; background: rgba(108,120,255,.09); border: 1px solid rgba(108,120,255,.18); } .en-confirma input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0012fd; cursor: pointer; } .en-error { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--danger, #c2272d); background: var(--danger-soft, #fdeaea); } .en-error[hidden] { display: none; } .en-enviar { justify-self: start; margin-top: 10px; } .en-enviar[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; } /* [CERT] 14-oct · actividad del módulo (#/entrega-modulo/...): el área bajo el título, el enlace entregado y «Actualizar enlace» */ .en-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: #4a5268; } .en-enlace { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.45; color: #0012fd; overflow-wrap: anywhere; } .en-enlace .ic { flex: none; margin-top: 2px; } .en-enlace span { min-width: 0; } .en-cambiar { flex: none; } @media (max-width: 1100px) { .en-pasos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .en-envio { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .ar2-proy { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ic txt ir" "ic est ir"; row-gap: 6px; column-gap: 12px; padding: 10px 12px; border-radius: 18px; } .ar2-proy-ic { width: 36px; height: 36px; border-radius: 12px; align-self: center; } .ar2-proy-txt span { display: none; } .ar2-proy-est { justify-self: start; } .ar2-proy-ir { height: 32px; padding: 0 12px; } .ar2-act { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ic txt ir" "ic est ir"; row-gap: 3px; padding: 7px 10px 7px 8px; } /* 14-oct: el estado bajo el nombre */ .ar2-act-est { justify-self: start; } .en-cambiar { flex: 1 1 100%; justify-content: center; } .en-cab { flex-wrap: wrap; gap: 12px; padding: 14px 16px; } .en-cab-ic { width: 44px; height: 44px; border-radius: 14px; } .en-estado { order: 3; } .en-pasos-lista { grid-template-columns: minmax(0, 1fr); gap: 10px; } .en-paso { padding: 12px; } .en-revisa, .en-form, .en-hecha { padding: 14px 16px; } .en-enviar { justify-self: stretch; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .ar2-proy, .en-input { transition: none; } .ar2-proy:hover { transform: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .ar2-proy, .en-hecha, .en-paso, .en-revisa, .en-form { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } :root[data-theme="dark"] .ar2-proy, :root[data-theme="dark"] .en-hecha, :root[data-theme="dark"] .en-paso, :root[data-theme="dark"] .en-revisa, :root[data-theme="dark"] .en-form { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow: none; } :root[data-theme="dark"] .ar2-proy, :root[data-theme="dark"] .ar2-proy:hover { color: #eef0ff; } :root[data-theme="dark"] .ar2-proy.is-pendiente .ar2-proy-est, :root[data-theme="dark"] .en-estado.is-pendiente { color: #b3baff; background: rgba(179,186,255,.12); } :root[data-theme="dark"] .ar2-proy.is-hecho .ar2-proy-ir { color: #b3baff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); box-shadow: none; } :root[data-theme="dark"] .en-hecha-txt b, :root[data-theme="dark"] .en-notas, :root[data-theme="dark"] .en-h2, :root[data-theme="dark"] .en-paso h3, :root[data-theme="dark"] .en-revisa li, :root[data-theme="dark"] .en-campo, :root[data-theme="dark"] .en-confirma { color: #eef0ff; } :root[data-theme="dark"] .en-hecha-txt span, :root[data-theme="dark"] .en-paso p, :root[data-theme="dark"] .en-ayuda, :root[data-theme="dark"] .en-campo span { color: #b4bbcc; } :root[data-theme="dark"] .en-revisa li .ic { color: #b3baff; } :root[data-theme="dark"] .en-input { color: #eef0ff; background: rgba(255,255,255,.06); border-color: rgba(179,186,255,.3); } :root[data-theme="dark"] .en-input::placeholder { color: #8a90a6; } :root[data-theme="dark"] .en-confirma { background: rgba(179,186,255,.08); border-color: rgba(179,186,255,.18); } :root[data-theme="dark"] .ar2-vivo-cal { color: #b3baff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); box-shadow: none; } :root[data-theme="dark"] .ar2-ev-btn.is-pronto { color: #b3baff; background: transparent; border-color: rgba(179,186,255,.4); } /* calendario.css */ /* Campus Remotos Academy — Calendario (calendario.js). Claro siempre; el oscuro va al final bajo :root[data-theme="dark"]. */ /* Propuesta A · «Mes completo»: el mes en cuadrícula de vidrio, el panel del día a la derecha y, en el celular, la hoja inferior. */ /* ---------- Tonos ---------- */ [data-ruta="calendario"] .cal-a, .cal-capa { --c-az: #0400bc; --c-lav: #6c78ff; --c-tx: var(--text, #11111a); --c-tx2: var(--text-2, #3a3d55); --c-tx3: var(--text-3, #5d6078); } .cal-a .t-live, .cal-capa .t-live { --t: #c2185b; --tt: #c2185b; } .cal-a .t-mentoring, .cal-capa .t-mentoring { --t: #0400bc; --tt: #0400bc; } .cal-a .t-exam, .cal-capa .t-exam { --t: #6c78ff; --tt: #4b55cf; } .cal-a .t-deadline, .cal-capa .t-deadline { --t: #8a6d00; --tt: #8a6d00; } .cal-pt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t, #6c78ff); } /* ---------- Encabezado y filtros ---------- */ [data-ruta="calendario"] .cal-a .page-head { margin-bottom: 18px; } [data-ruta="calendario"] .cal-a .cal-todas { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px; gap: 8px; } .cal-filtros { margin: 0 0 16px; } .cal-filtros .seg { display: inline-flex; flex-wrap: nowrap; max-width: 100%; } .cal-filtros .seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; font-size: 13.5px; } .cal-filtros .seg button[aria-pressed="true"] .cal-pt { box-shadow: 0 0 0 2px #fff; } /* ---------- Mes + panel ---------- */ .cal-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 22px; align-items: start; } @media (max-width: 1099px) { .cal-cuerpo { grid-template-columns: minmax(0, 1fr); } } [data-ruta="calendario"] .card.cal-mes { padding: 18px 16px 16px; } .cal-mes-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 14px; } .cal-mes-tx { min-width: 0; } .cal-mes-tit { margin: 0; font: 400 40px/1 var(--font-display, "Bebas Neue", Impact, sans-serif); letter-spacing: .03em; color: var(--c-az); } .cal-mes-tit span { margin-left: 4px; color: var(--c-lav); } .cal-zona { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 500 12px/1.3 var(--font-2, sans-serif); color: var(--c-tx3); } .cal-zona .ic { color: var(--c-lav); } .cal-mes > .cal-zona { justify-content: center; margin: 12px 4px 2px; } .cal-nav { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px; border-radius: 14px; background: rgba(255,255,255,.78); border: 1.5px solid rgba(4,0,188,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px -12px rgba(4,0,188,.4); } .cal-nav .icon-btn { width: 44px; height: 44px; border-radius: 10px; color: var(--c-az); } .cal-nav .icon-btn:hover:not(:disabled) { background: rgba(4,0,188,.07); color: var(--c-az); } .cal-nav .icon-btn:disabled { color: var(--c-tx3); opacity: .35; cursor: default; } .cal-hoy { height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--c-az); font: 600 13.5px/1 var(--font); cursor: pointer; } .cal-hoy:hover { background: rgba(4,0,188,.07); } .cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .cal-sem { margin-bottom: 6px; } .cal-sem span { padding: 2px 0 4px; text-align: center; font: 600 12px/1 var(--font-2, sans-serif); letter-spacing: .1em; color: var(--c-tx3); } /* Día: celda de vidrio; dentro, el número y las píldoras de sus eventos */ .cal-dia { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; min-height: 96px; padding: 7px 6px; border: 0; border-radius: 14px; background: transparent; color: var(--c-tx); font: inherit; text-align: left; cursor: pointer; transition: background .18s, box-shadow .18s, transform .18s; } .cal-dia-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .cal-num { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 5px; border-radius: 99px; font: 600 14px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--c-tx2); } .cal-dia.pasado .cal-num { color: var(--c-tx3); font-weight: 500; opacity: .75; } .cal-dia.fuera { opacity: .5; } .cal-dia.hoy .cal-num { color: var(--c-az); font-weight: 700; box-shadow: inset 0 0 0 2px var(--c-az); } .cal-dia.sel .cal-num { color: var(--c-az); font-weight: 700; } .cal-hoy-tx { font: 700 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--c-az); } .cal-puntos { display: none; } .cal-pills { display: grid; gap: 4px; min-width: 0; } .cal-pill { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; row-gap: 1px; min-width: 0; padding: 5px 7px 6px; border-radius: 9px; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.56)); box-shadow: inset 0 1px 0 #fff, 0 6px 12px -10px rgba(4,0,188,.5); transition: background .15s, box-shadow .15s; } .cal-pill .cal-pt { width: 7px; height: 7px; } .cal-pill b { font: 600 11.5px/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--c-tx); } .cal-pill > span { grid-column: 1 / -1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 11.5px/1.3 var(--font); color: var(--c-tx2); } .cal-pills.uno .cal-pill > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; } .cal-pill:hover { background: #fff; } .cal-pill.abierto { background: #fff; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 38%, transparent), 0 8px 16px -10px rgba(4,0,188,.55); } .cal-mas { padding: 0 4px; font: 600 11px/1.2 var(--font); color: var(--c-az); } /* Panel del día (computadora): fecha grande, sus eventos y el detalle del elegido */ [data-ruta="calendario"] .cal-cuerpo > .card.cal-panel { position: sticky; top: calc(var(--topbar-h, 64px) + 18px); padding: 0; } .cal-panel-in { position: relative; max-height: calc(100vh - var(--topbar-h, 64px) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 20px 20px 22px; } .cal-dia-cab { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding-bottom: 14px; } .cal-dia-cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(4,0,188,.16), rgba(4,0,188,0) 85%); } .cal-big { flex: none; padding-top: 6px; font: 400 64px/.8 var(--font-display, "Bebas Neue", Impact, sans-serif); letter-spacing: .01em; color: var(--c-az); } .cal-dia-cab-tx { display: grid; gap: 4px; min-width: 0; } .cal-dia-cab-tx b { font: 700 18px/1.15 var(--font); color: var(--c-tx); } .cal-dia-cab-tx small { font: 500 13px/1.3 var(--font-2, sans-serif); color: var(--c-tx3); } .cal-cuenta { align-self: flex-start; margin-left: auto; padding-top: 4px; font: 600 12px/1 var(--font-2, sans-serif); color: var(--c-tx3); white-space: nowrap; } .cal-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .cal-item { position: relative; margin: 0 -10px; padding: 0 10px; border-radius: 16px; } .cal-item.abierto { padding-bottom: 14px; background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 26px -22px rgba(4,0,188,.55); } .cal-item-cab { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 50px; padding: 10px 0; border: 0; background: none; color: var(--c-tx); font: inherit; text-align: left; cursor: pointer; } .cal-item-cab > .ic { color: var(--c-tx3); } .cal-item-h { font: 600 13px/1.4 var(--font); font-variant-numeric: tabular-nums; color: var(--c-tx2); } .cal-item-tit { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14.5px/1.4 var(--font); } .cal-item.abierto .cal-item-cab { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding-top: 14px; } .cal-item.abierto .cal-item-cab > .ic { grid-column: 2; grid-row: 1; } .cal-item.abierto .cal-item-tit { grid-column: 1 / -1; white-space: normal; font-size: 17px; line-height: 1.3; } .cal-det-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; } .cal-det-tipo { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1.2 var(--font); color: var(--tt, var(--c-tx2)); } .cal-rel { padding: 5px 9px; border-radius: 99px; background: rgba(4,0,188,.07); font: 600 11.5px/1 var(--font); color: var(--c-az); white-space: nowrap; } .cal-rel.vivo { background: rgba(194,24,91,.09); color: #c2185b; } .cal-det-tit { margin: 10px 0 0; font: 600 19px/1.3 var(--font); color: var(--c-tx); } .cal-det-hora { margin: 2px 0 0; font: 400 34px/1 var(--font-display, "Bebas Neue", Impact, sans-serif); letter-spacing: .02em; color: var(--c-az); } .cal-det-hora small { margin-left: 10px; font: 500 13px/1 var(--font); letter-spacing: 0; color: var(--c-tx3); } .cal-det-hora small.pre { margin: 0 8px 0 0; } .cal-det-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 12px 0 16px; font-size: 13px; line-height: 1.45; } .cal-det-dl dt { font-weight: 500; color: var(--c-tx3); } .cal-det-dl dd { margin: 0; font-weight: 500; color: var(--c-tx); } .cal-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cal-acc .btn { height: 44px; padding: 0 16px; border-radius: 12px; font-size: 13.5px; } .cal-acc .cal-asistir, .cal-acc .cal-ok { flex: 1 1 auto; } .cal-acc .cal-agregar { flex: 1 1 100%; gap: 8px; } .cal-ok { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 13.5px/1 var(--font); color: var(--success, #12805c); } .cal-fin { margin: 0; font-size: 13px; color: var(--c-tx3); } .cal-vacio { display: grid; justify-items: start; gap: 12px; padding: 6px 0 2px; } .cal-vacio > .ic { color: var(--c-lav); } .cal-vacio p { display: grid; gap: 4px; margin: 0; } .cal-vacio b { font: 600 15.5px/1.3 var(--font); color: var(--c-tx); } .cal-vacio p span { font-size: 13.5px; color: var(--c-tx3); } .cal-vacio .btn { height: 44px; border-radius: 12px; gap: 8px; } /* Día elegido en el celular: tarjetas que abren la hoja inferior */ .cal-diasel .cal-dia-cab { margin: 0 2px 12px; } .cal-diasel .cal-big { font-size: 50px; } .cal-diasel .cal-lista { gap: 10px; } .cal-tarjeta { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 14px 12px 14px 14px; border: 0; border-radius: 20px; background: var(--surface, #fff); color: var(--c-tx); font: inherit; text-align: left; cursor: pointer; } .cal-tarjeta > .ic { color: var(--c-tx3); } .cal-tj-hora b { display: block; font: 400 26px/1 var(--font-display, "Bebas Neue", Impact, sans-serif); letter-spacing: .02em; color: var(--c-az); } .cal-tj-hora small { display: block; margin-top: 4px; font: 500 12px/1 var(--font); color: var(--c-tx3); } .cal-tj-tx { display: grid; gap: 3px; min-width: 0; } .cal-tj-tit { font: 600 15px/1.3 var(--font); color: var(--c-tx); } .cal-tj-meta { font: 500 12.5px/1.3 var(--font); color: var(--c-tx3); } .cal-tj-ok { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-weight: 600; color: var(--success, #12805c); } /* ---------- Vidrio (solo en claro): la receta de las pantallas ---------- */ :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.16) 60%, rgba(255,255,255,.08) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -10px 18px -16px rgba(4,0,188,.2), 0 10px 20px -18px rgba(4,0,188,.35); } :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia.fuera, :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia.pasado:not(.con) { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.04)); box-shadow: inset 0 1px 1px rgba(255,255,255,.6); } :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia:hover { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.26) 100%); } :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia.hoy:not(.sel) { background: radial-gradient(110% 80% at 0% 0%, rgba(108,120,255,.16), rgba(108,120,255,0) 70%), linear-gradient(145deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.14) 100%); } :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia.sel, :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-tarjeta { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia.sel { background-color: rgba(255,255,255,.34); transform: translateY(-2px); box-shadow: inset 0 1px 1px #fff, inset 0 0 24px rgba(255,255,255,.4), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.08), 0 22px 36px -20px rgba(4,0,188,.55); } /* filo de luz de 2 px: blanco arriba a la izquierda → tenue → reflejo azul abajo a la derecha */ :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia::after, :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-tarjeta::after, :root:not([data-theme="dark"]) .cal-capa .cal-pop::after, :root:not([data-theme="dark"]) .cal-capa .cal-hoja::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia::after { padding: 1.5px; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.55) 16%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(0,18,253,.12) 86%, rgba(0,18,253,.22) 100%); } :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia.sel::after { padding: 2px; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); } /* grano mate al 7 % */ :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-tarjeta::before, :root:not([data-theme="dark"]) .cal-capa .cal-pop::before, :root:not([data-theme="dark"]) .cal-capa .cal-hoja::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } /* ---------- Capa propia: menús y hoja inferior ---------- */ .cal-capa { position: fixed; top: 0; left: 0; z-index: 85; } .cal-pop { position: fixed; isolation: isolate; padding: 8px; border-radius: 18px; background: var(--surface, #fff); box-shadow: 0 24px 48px -20px rgba(4,0,188,.45); animation: calPop .14s ease-out both; } .cal-pop.arriba { animation-name: calPopArriba; } :root:not([data-theme="dark"]) .cal-capa .cal-pop { background: linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,255,255,.40)); -webkit-backdrop-filter: blur(4px) saturate(160%); backdrop-filter: blur(4px) saturate(160%); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } .cal-pop-tit { margin: 0; padding: 8px 10px; font: 600 11.5px/1.2 var(--font-2, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: var(--c-tx3); } .cal-pop-ops { display: grid; gap: 2px; } .cal-op { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 12px; color: var(--c-tx); text-decoration: none; } .cal-op:hover, .cal-op:focus { text-decoration: none; } .cal-op:focus-visible { background: rgba(255,255,255,.78); } @media (hover: hover) { .cal-op:hover { background: rgba(255,255,255,.78); } } .cal-op-ic { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(4,0,188,.08); color: var(--c-az); } .cal-op-txt { display: grid; gap: 2px; min-width: 0; } .cal-op-txt b { font: 600 14px/1.25 var(--font); } .cal-op-txt small { font: 500 12px/1.3 var(--font); color: var(--c-tx3); } .cal-pop.cal-pop-abajo { top: auto; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; padding: 10px; border-radius: 22px; animation-name: calSubeMenu; } .cal-pop-abajo .cal-op { min-height: 56px; } .cal-hoja-cont { position: fixed; inset: 0; } .cal-velo.cal-velo-menu { position: fixed; } .cal-velo { position: absolute; inset: 0; background: rgba(241,242,250,.55); touch-action: none; animation: calFundido .2s ease both; } .cal-hoja { position: absolute; left: 0; right: 0; bottom: 0; isolation: isolate; border-radius: 26px 26px 0 0; background: var(--surface, #fff); box-shadow: 0 -24px 60px -28px rgba(4,0,188,.55); animation: calSube .28s cubic-bezier(.2,.8,.2,1) both; } :root:not([data-theme="dark"]) .cal-capa .cal-hoja { background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.40)); -webkit-backdrop-filter: blur(4px) saturate(160%); backdrop-filter: blur(4px) saturate(160%); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 -24px 60px -28px rgba(4,0,188,.55); } .cal-hoja-in { max-height: min(86vh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); } .cal-hoja-cab { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; } .cal-hoja-cab .cal-dia-cab { flex: 1; min-width: 0; } .cal-hoja-cab .cal-big { font-size: 54px; } .cal-hoja-x { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.6); color: var(--c-tx2); } .cal-hoja .cal-acc .btn, .cal-hoja .cal-acc .cal-ok { height: 44px; } .cal-hoja-cont.quieta .cal-velo, .cal-hoja-cont.quieta .cal-hoja { animation: none; } @keyframes calSube { from { transform: translateY(100%); } to { transform: none; } } @keyframes calFundido { from { opacity: 0; } to { opacity: 1; } } @keyframes calPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes calPopArriba { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes calSubeMenu { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cal-velo, .cal-hoja, .cal-pop { animation: none !important; } .cal-dia { transition: none; } :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia.sel { transform: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-dia.sel, :root:not([data-theme="dark"]) [data-ruta="calendario"] .cal-tarjeta, :root:not([data-theme="dark"]) .cal-capa .cal-pop, :root:not([data-theme="dark"]) .cal-capa .cal-hoja { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* ---------- Celular ---------- */ @media (max-width: 720px) { [data-ruta="calendario"] .cal-a .page-head { gap: 14px; margin-bottom: 14px; } [data-ruta="calendario"] .cal-a .cal-todas { width: 100%; height: 44px; } .cal-filtros { margin: 0 -16px 12px; padding: 2px 16px 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .cal-filtros::-webkit-scrollbar { display: none; } .cal-filtros .seg button { min-height: 44px; padding: 0 14px; } .cal-cuerpo { gap: 22px; } [data-ruta="calendario"] .card.cal-mes { padding: 14px 10px 12px; border-radius: 22px; } .cal-mes-cab { margin: 0 4px 10px; } .cal-mes-tit { font-size: 32px; } .cal-nav .icon-btn { width: 44px; height: 44px; } .cal-hoy { height: 44px; } .cal-sem, .cal-dias { gap: 4px; } .cal-dia { align-items: center; justify-content: flex-start; gap: 4px; min-height: 52px; padding: 6px 2px 5px; border-radius: 12px; } .cal-dia-top { justify-content: center; } .cal-num { min-width: 30px; height: 30px; font-size: 14.5px; } .cal-puntos { display: flex; justify-content: center; gap: 3px; height: 6px; } .cal-puntos .cal-pt { width: 6px; height: 6px; } } /* ---------- Oscuro ---------- */ :root[data-theme="dark"] [data-ruta="calendario"] .cal-a, :root[data-theme="dark"] .cal-capa { --c-az: #b3baff; --c-lav: #8f99ff; } :root[data-theme="dark"] .cal-a .t-live, :root[data-theme="dark"] .cal-capa .t-live { --t: #ff6fa3; --tt: #ff8db6; } :root[data-theme="dark"] .cal-a .t-mentoring, :root[data-theme="dark"] .cal-capa .t-mentoring { --t: #8f99ff; --tt: #b3baff; } :root[data-theme="dark"] .cal-a .t-exam, :root[data-theme="dark"] .cal-capa .t-exam { --t: #a5adff; --tt: #c3c8ff; } :root[data-theme="dark"] .cal-a .t-deadline, :root[data-theme="dark"] .cal-capa .t-deadline { --t: #e3c35a; --tt: #ecd27e; } :root[data-theme="dark"] .cal-nav { background: rgba(255,255,255,.06); border-color: rgba(179,186,255,.22); box-shadow: none; } :root[data-theme="dark"] [data-ruta="calendario"] .cal-dia { background: rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } :root[data-theme="dark"] [data-ruta="calendario"] .cal-dia:hover { background: rgba(255,255,255,.08); } :root[data-theme="dark"] [data-ruta="calendario"] .cal-dia.sel { background: rgba(179,186,255,.14); box-shadow: inset 0 0 0 1px rgba(179,186,255,.28); } :root[data-theme="dark"] [data-ruta="calendario"] .cal-pill { background: rgba(255,255,255,.08); box-shadow: none; } :root[data-theme="dark"] [data-ruta="calendario"] .cal-pill.abierto { background: rgba(255,255,255,.16); } :root[data-theme="dark"] [data-ruta="calendario"] .cal-item.abierto, :root[data-theme="dark"] [data-ruta="calendario"] .cal-tarjeta { background: rgba(255,255,255,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } :root[data-theme="dark"] .cal-capa .cal-pop, :root[data-theme="dark"] .cal-capa .cal-hoja { background: rgba(20,24,40,.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.8); } :root[data-theme="dark"] .cal-capa .cal-pop { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } /* [CERT] 14-oct · vidrio esmerilado: sin él se leía el texto de las tarjetas detrás del menú */ :root[data-theme="dark"] .cal-velo { background: rgba(8,10,18,.55); } :root[data-theme="dark"] .cal-op:focus-visible { background: rgba(255,255,255,.07); } @media (hover: hover) { :root[data-theme="dark"] .cal-op:hover { background: rgba(255,255,255,.07); } } :root[data-theme="dark"] .cal-op-ic, :root[data-theme="dark"] .cal-rel { background: rgba(179,186,255,.12); } :root[data-theme="dark"] .cal-hoja-x { background: rgba(255,255,255,.06); } /* [CERT] 13-oct · sin descargas: Google y Outlook con varios eventos abren la lista «uno por uno» */ button.cal-op { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .cal-op-ir { margin-left: auto; display: grid; place-items: center; color: var(--c-tx3); } .cal-pop-tit:has(.cal-pop-volver) { display: flex; align-items: center; gap: 8px; } .cal-pop-volver { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0 -6px -4px; border: 0; border-radius: 10px; background: rgba(4,0,188,.08); color: var(--c-az); cursor: pointer; } .cal-pop-volver:focus-visible { outline: 3px solid var(--c-az); outline-offset: 2px; } .cal-pop-nota { margin: 0 10px 6px; font: 500 12.5px/1.4 var(--font); color: var(--c-tx3); } .cal-op.hecha .cal-op-ic { background: var(--c-az); color: #fff; } .cal-op.hecha .cal-op-txt small::after { content: " · abierto"; } .cal-pop .cal-pop-ops { max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; } /* la lista uno por uno puede ser larga */ /* leccion.css */ /* [CERT] 12-oct · Página de la clase (#/leccion/...), rehecha porque al dueño «no me gusta nada cómo está estructurado». Arriba el video sin el título repetido; debajo el título una vez, con su tipo, minutos y «Clase N de M»; una sola acción principal en azul; el contenido en pestañas (Resumen · Material · Preguntas); a la derecha «En este módulo». Liquid glass del campus (velo blanco en degradado, filo de luz, brillo arriba a la izquierda, grosor por dentro, sombra azulada; sin backdrop-filter). */ .lc { --lc-azul: #0400bc; --lc-brillante: #0012fd; --lc-lavanda: #6c78ff; --lc-noche: #121452; --lc-texto: #4a5268; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .lc-main { min-width: 0; display: grid; gap: 16px; } .lc-lado { position: sticky; top: 84px; min-width: 0; } /* el video y la tarjeta de lectura, con esquinas como el resto */ .lc .player, .lc .reading-hero { border-radius: 22px; } .lc .player { box-shadow: 0 30px 60px -32px rgba(4,0,188,.7); } /* título una sola vez, con sus datos en pastillas de vidrio */ .lc-cab { display: grid; gap: 10px; } .lc-meta { display: flex; flex-wrap: wrap; gap: 8px; } .lc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--lc-azul); background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -10px rgba(4,0,188,.45); } .lc-chip.is-ok { color: #fff; border-color: rgba(255,255,255,.4); background: linear-gradient(160deg, var(--lc-brillante), var(--lc-azul)); } .lc-titulo { margin: 0; font: 700 clamp(22px, 2.4vw, 30px)/1.2 "Poppins", system-ui, sans-serif; letter-spacing: -.01em; color: var(--lc-noche); } /* acciones: anterior (círculo), la principal en azul y la siguiente clase a la derecha */ .lc-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lc-ant { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--lc-azul); text-decoration: none; background: radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.98), rgba(255,255,255,.6) 62%, rgba(255,255,255,.45)); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -6px rgba(4,0,188,.25), 0 10px 20px -12px rgba(4,0,188,.55); transition: transform .2s; } .lc-ant:hover { transform: translateX(-2px); } .lc-principal { min-height: 46px; padding: 0 22px; border-radius: 14px; gap: 10px; font-size: 14.5px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 26px -14px rgba(4,0,188,.85); } .lc-p-txt { display: grid; text-align: left; line-height: 1.2; min-width: 0; } .lc-p-txt small { font-size: 11px; font-weight: 600; opacity: .85; } .lc-p-txt b { font-size: 14px; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-sig { margin-left: auto; min-width: 0; max-width: 340px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; text-decoration: none; color: var(--lc-noche); background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.24)); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 1px #fff, 0 10px 22px -16px rgba(4,0,188,.5); transition: transform .2s; } a.lc-sig:hover { transform: translateX(2px); color: var(--lc-noche); text-decoration: none; } .lc-sig-t { display: grid; min-width: 0; line-height: 1.25; } .lc-sig-t small { font-size: 11px; font-weight: 600; color: var(--lc-texto); } .lc-sig-t b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-sig.is-bloq { opacity: .72; cursor: not-allowed; color: var(--lc-texto); } .lc-sig .ic { flex: none; color: var(--lc-azul); } /* pestañas: el mismo selector del campus (cápsula de vidrio, la elegida en azul de marca) */ .lc-tabs { justify-self: start; max-width: 100%; overflow-x: auto; } .lc-tabs .lc-tab { border: 0; background: transparent; padding: 8px 15px; border-radius: 9px; font: 600 13px/1 "Poppins", system-ui, sans-serif; color: var(--lc-texto); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; } .lc-tabs .lc-tab:hover { background: rgba(4,0,188,.07); color: var(--lc-azul); } .lc-tabs .lc-tab[aria-selected="true"] { background: var(--lc-azul); color: #fff; box-shadow: 0 6px 14px -8px rgba(4,0,188,.75); } .lc-tabs .lc-tab:focus-visible { outline: 2px solid var(--lc-brillante); outline-offset: 2px; } /* el panel de la pestaña: una sola tarjeta de vidrio */ .lc-panel { padding: 20px 22px; border-radius: 20px; outline: none; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.16)); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.22), 0 24px 50px -30px rgba(4,0,188,.55); } .lc-panel[hidden] { display: none; } .lc-panel:focus-visible { outline: 2px solid var(--lc-brillante); outline-offset: 3px; } .lc-panel .article { font-size: 15px; line-height: 1.7; color: var(--lc-noche); } .lc-panel .article > :first-child { margin-top: 0; } .lc-panel .article > :last-child { margin-bottom: 0; } .lc-panel .resource { background: rgba(255,255,255,.7); } .lc-vacio { margin: 0; color: var(--lc-texto); font-size: 14px; } /* «En este módulo»: tarjeta de vidrio con el avance, la lista legible y el examen en una fila */ .lc-mod { border-radius: 22px; overflow: hidden; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.52), rgba(255,255,255,.18)); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.22), 0 30px 60px -30px rgba(4,0,188,.6); } .lc-mod-cab { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; padding: 16px 18px 12px; } .lc-mod-cab::-webkit-details-marker { display: none; } .lc-mod-cab:focus-visible { outline: 2px solid var(--lc-brillante); outline-offset: -3px; border-radius: 20px; } .lc-mod-eti { grid-column: 1; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lc-texto); } .lc-mod-nom { grid-column: 1; font-size: 15px; line-height: 1.3; color: var(--lc-noche); } .lc-mod-av { grid-column: 1; display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--lc-texto); white-space: nowrap; } .lc-mod-barra { flex: 1; height: 5px; border-radius: 3px; background: rgba(4,0,188,.1); overflow: hidden; } .lc-mod-barra i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--lc-brillante), var(--lc-lavanda)); } .lc-mod-chev { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--lc-azul); background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.95); transition: transform .25s; } .lc-mod[open] .lc-mod-chev { transform: rotate(180deg); } .lc-mod-lista { list-style: none; margin: 0; padding: 2px 10px 10px; display: grid; gap: 2px; max-height: min(52vh, 460px); overflow: auto; border-top: 1px solid rgba(4,0,188,.07); } .lc-m-fila { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--lc-noche); transition: background .2s; } a.lc-m-fila:hover { background: rgba(255,255,255,.62); text-decoration: none; color: var(--lc-noche); } a.lc-m-fila:focus-visible { outline: 2px solid var(--lc-brillante); outline-offset: -2px; } .lc-m-num { font: 400 20px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .02em; color: var(--lc-azul); } .lc-m-tit { font-size: 13px; font-weight: 500; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lc-m-dato { font-size: 11.5px; color: var(--lc-texto); white-space: nowrap; display: inline-flex; } .lc-m-fila.is-hecha .lc-m-num { color: rgba(4,0,188,.42); } .lc-m-fila.is-hecha .lc-m-dato { color: var(--lc-brillante); } .lc-m-fila.is-aqui { background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1.5px rgba(0,18,253,.45), 0 8px 18px -12px rgba(4,0,188,.5); } .lc-m-fila.is-aqui .lc-m-tit { font-weight: 700; } .lc-m-fila.is-bloqueada { color: var(--lc-texto); cursor: not-allowed; } .lc-m-fila.is-bloqueada .lc-m-num { color: #b3baff; } .lc-m-fila.is-bloqueada .lc-m-dato { color: var(--lc-lavanda); } .lc-m-ex { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 10px 10px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--lc-noche); background: rgba(255,255,255,.55); border: 1px dashed rgba(108,120,255,.5); } a.lc-m-ex:hover { background: rgba(255,255,255,.8); text-decoration: none; color: var(--lc-noche); } .lc-m-ex-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--lc-azul); background: rgba(238,240,255,.85); } .lc-m-ex-t { display: grid; min-width: 0; line-height: 1.3; } .lc-m-ex-t b { font-size: 13px; } .lc-m-ex-t small { font-size: 11.5px; color: var(--lc-texto); } .lc-m-ex.is-ex-listo, .lc-m-ex.is-ex-mal { border-style: solid; border-color: rgba(0,18,253,.4); } .lc-m-ex.is-ex-ok .lc-m-ex-ic { color: #fff; background: linear-gradient(160deg, var(--lc-brillante), var(--lc-azul)); } .lc-m-ex > .ic { color: var(--lc-azul); } .lc-mod-ver { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-top: 1px solid rgba(4,0,188,.08); font-size: 13px; font-weight: 600; color: var(--lc-azul); text-decoration: none; } .lc-mod-ver:hover { background: rgba(255,255,255,.5); text-decoration: none; } /* tableta y celular: una columna; «En este módulo» va abajo y llega plegado */ @media (max-width: 1024px) { .lc { grid-template-columns: minmax(0, 1fr); } .lc-lado { position: static; } .lc-mod-lista { max-height: none; } } @media (max-width: 640px) { .lc-main { gap: 14px; } .lc .player, .lc .reading-hero { border-radius: 18px; } .lc-principal { flex: 1 1 auto; justify-content: center; } .lc-sig { margin-left: 0; flex: 1 1 100%; max-width: none; } .lc-tabs .lc-tab { padding: 8px 11px; font-size: 12.5px; } .lc-panel { padding: 16px; } .lc-panel .article { font-size: 14.5px; } } @media (prefers-reduced-motion: reduce) { .lc-ant, .lc-sig, .lc-mod-chev, .lc-tabs .lc-tab { transition: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .lc-panel, .lc-mod, .lc-sig { background: #fff; } } /* modo oscuro (el dueño trabaja en claro; aquí solo se asegura que se lea y combine) */ :root[data-theme="dark"] .lc { --lc-noche: #eef0ff; --lc-texto: #c0c4e5; --lc-azul: #b3baff; --lc-lavanda: #b3baff; } :root[data-theme="dark"] .lc-panel, :root[data-theme="dark"] .lc-mod, :root[data-theme="dark"] .lc-sig { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow: 0 20px 40px -26px rgba(0,0,0,.7); } :root[data-theme="dark"] .lc-chip, :root[data-theme="dark"] .lc-ant, :root[data-theme="dark"] .lc-mod-chev { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); box-shadow: none; } :root[data-theme="dark"] .lc-chip.is-ok { background: #2a37e8; color: #fff; } :root[data-theme="dark"] .lc-tabs .lc-tab[aria-selected="true"] { background: #2a37e8; color: #fff; } :root[data-theme="dark"] .lc-m-fila.is-aqui { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(140,151,255,.6); } :root[data-theme="dark"] a.lc-m-fila:hover, :root[data-theme="dark"] a.lc-m-ex:hover, :root[data-theme="dark"] .lc-mod-ver:hover { background: rgba(255,255,255,.06); } :root[data-theme="dark"] .lc-m-ex { background: rgba(255,255,255,.05); border-color: rgba(179,186,255,.35); } :root[data-theme="dark"] .lc-m-ex-ic { background: rgba(255,255,255,.1); } :root[data-theme="dark"] .lc-panel .resource { background: rgba(255,255,255,.06); } :root[data-theme="dark"] .lc-mod-barra { background: rgba(255,255,255,.12); } /* 12-oct · contrato 0.21.0: «Visto X de Y» bajo las acciones y la espera de 5 minutos entre clases */ .lc-avance { display: grid; gap: 6px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.24)); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 1px #fff, 0 10px 22px -16px rgba(4,0,188,.45); } .lc-avance[hidden] { display: none; } .lc-av-nota { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--lc-texto); } .lc-av-nota b { color: var(--lc-azul); font-variant-numeric: tabular-nums; } .lc-principal:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } :root[data-theme="dark"] .lc-avance { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow: none; } /* ===================== 12-oct · Página del examen «Plano técnico» (propuesta B que eligió el dueño) + popup del resultado ===================== Mismo vidrio del camino y de la clase (sin backdrop-filter). Funciones en app.js: exB, exPopup y sus ayudantes (ex*). */ .exB-hoja, .exB-lado, .exB-res, .exB-fila { --ex-noche: #121452; --ex-texto: #4a5268; --ex-azul: #0400bc; --ex-brillante: #0012fd; --ex-lavanda: #6c78ff; position: relative; isolation: isolate; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.66), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.16)); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 24px -16px rgba(4,0,188,.22), 0 2px 6px rgba(4,0,188,.05), 0 18px 36px -24px rgba(4,0,188,.5); } [class^="exB-"], [class^="exP"], .ex-aviso { --ex-noche: #121452; --ex-texto: #4a5268; --ex-azul: #0400bc; --ex-brillante: #0012fd; --ex-lavanda: #6c78ff; } /* botones */ .exB-cta { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; font: 600 15px/1 var(--font, "Poppins", system-ui, sans-serif); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; background: linear-gradient(160deg, var(--ex-brillante), var(--ex-azul)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 22px -12px rgba(4,0,188,.85); transition: filter .2s, transform .2s; } .exB-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; text-decoration: none; } .exB-cta[disabled] { opacity: .55; cursor: wait; transform: none; } .exB-sec { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; font: 600 14.5px/1 var(--font, "Poppins", system-ui, sans-serif); color: var(--ex-azul); cursor: pointer; text-decoration: none; white-space: nowrap; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 8px 16px -12px rgba(4,0,188,.45); } .exB-sec:hover { background: #fff; text-decoration: none; color: var(--ex-azul); } .exB-sec[disabled] { opacity: .45; cursor: not-allowed; } .exB-cta:focus-visible, .exB-sec:focus-visible { outline: 2px solid var(--ex-brillante); outline-offset: 3px; } /* el reloj en anillo: el arco se acorta con el tiempo (--resto) y se pone rojo en el último minuto */ .exB-reloj { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; flex: none; font: 700 15px/1 var(--font, "Poppins", system-ui, sans-serif); font-variant-numeric: tabular-nums; color: var(--ex-noche); background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 8px 16px -12px rgba(4,0,188,.5); } .exB-reloj svg { width: 30px; height: 30px; } .exB-reloj .rl-fondo { fill: none; stroke: rgba(108,120,255,.2); stroke-width: 4; } .exB-reloj .rl-arco { fill: none; stroke: #0012fd; stroke-width: 4; stroke-linecap: round; stroke-dasharray: calc(var(--resto, 1) * 100) 100; transition: stroke-dasharray .9s linear; } .exB-reloj.low { color: #c2272d; background: #fdeaea; } .exB-reloj.low .rl-arco { stroke: #c2272d; } .ex-aviso { display: flex; gap: 10px; align-items: flex-start; max-width: 1120px; margin: 0 auto 12px; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.45; color: #11111a; background: #fff7c2; border: 1px solid #ffe400; box-shadow: 0 10px 22px -16px rgba(150,110,0,.6); } .ex-aviso .ic { flex: none; margin-top: 2px; color: #8a6a00; } /* inicio: la cabecera de la página del área (.area-cab) con la ficha técnica del examen */ .exB-cab { max-width: 1120px; margin-left: auto; margin-right: auto; } .exB-cab > .area-cab-img { align-self: start; } /* 16:9 por su ancho: si se estira al alto de la ficha, se ensancha y la tapa */ .exB-info { display: flex; flex-direction: column; } .exB-etq { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ex-lavanda); } .exB-tit { margin: 0 0 12px; font: 400 40px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; letter-spacing: .01em; color: var(--ex-noche); } .exB-ficha { margin: 0 0 14px; } .exB-ficha div { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(4,0,188,.22); } .exB-cab .exB-ficha div { padding: 7px 0; } .exB-ficha dt { font-size: 13px; color: var(--ex-texto); } .exB-ficha dd { margin: 0 0 0 auto; font: 400 23px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; color: var(--ex-azul); text-align: right; } .exB-aviso { display: flex; gap: 6px; align-items: center; margin: 0 0 12px; padding: 7px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #11111a; background: #ffe400; } .exB-nota { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--ex-texto); } .exB-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .exB-info .exB-acc { margin-top: auto; } /* pregunta: la hoja de plano (cuadrícula y esquinas marcadas) y, al lado, el reloj y el mapa P-01…P-NN */ .exB-run { max-width: 1120px; margin: 6px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; } .exB-hoja { padding: 26px 30px 24px; border-radius: 22px; background: linear-gradient(rgba(4,0,188,.045) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(4,0,188,.045) 1px, transparent 1px) 0 0 / 26px 26px, radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); } .exB-hoja::before, .exB-hoja::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid rgba(4,0,188,.35); pointer-events: none; } .exB-hoja::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; } .exB-hoja::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; } .exB-hoja-cab { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; } .exB-n { font: 400 32px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; color: var(--ex-azul); letter-spacing: .02em; } .exB-de { font-size: 13px; color: var(--ex-texto); } .exB-tag { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ex-azul); background: rgba(108,120,255,.14); } .exB-q { margin: 0 0 18px; font-size: 21px; font-weight: 700; line-height: 1.38; color: var(--ex-noche); } .exB-ops { display: grid; gap: 10px; } .exB-op { -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 9px 14px 9px 10px; border-radius: 14px; text-align: left; font: inherit; font-size: 15px; line-height: 1.4; color: var(--ex-noche); cursor: pointer; background: rgba(255,255,255,.82); border: 1.5px solid rgba(4,0,188,.16); transition: border-color .15s, background .15s; } button.exB-op:hover { border-color: rgba(0,18,253,.45); background: #fff; } .exB-op:focus-visible { outline: 2px solid var(--ex-brillante); outline-offset: 2px; } .exB-op[aria-checked="true"] { border: 2px solid var(--ex-brillante); background: #fff; box-shadow: 0 10px 22px -16px rgba(0,18,253,.8); } .exB-letra { width: 36px; height: 36px; display: grid; place-items: center; border: 1.5px solid rgba(4,0,188,.35); border-radius: 8px; font: 400 21px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; color: var(--ex-azul); } .exB-op[aria-checked="true"] .exB-letra { color: #fff; background: var(--ex-azul); border-color: var(--ex-azul); } .exB-marca { display: grid; place-items: center; color: var(--ex-brillante); opacity: 0; } .exB-op[aria-checked="true"] .exB-marca { opacity: 1; } .exB-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; } .exB-lado { position: sticky; top: 92px; display: grid; gap: 12px; padding: 16px; border-radius: 20px; } .exB-lado .exB-reloj { justify-self: start; } .exB-lado-t { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ex-texto); } .exB-mapa { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .exB-mapa button { -webkit-appearance: none; appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 36px; padding: 0 10px; border: 1.5px dashed rgba(4,0,188,.3); border-radius: 10px; background: transparent; font: 400 18px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; color: var(--ex-azul); cursor: pointer; } .exB-mapa button.is-hecha { border-style: solid; border-color: rgba(0,18,253,.35); background: rgba(0,18,253,.08); } .exB-mapa button.is-actual { border: 2px solid var(--ex-brillante); background: #fff; } .exB-mapa button:focus-visible { outline: 2px solid var(--ex-brillante); outline-offset: 2px; } .exB-mapa i { display: grid; place-items: center; color: var(--ex-brillante); } /* resultado: la cabecera con el sello y la revisión en filas que se abren de a una */ .exB-res { max-width: 1120px; margin: 6px auto 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px 32px; border-radius: 22px; background: linear-gradient(rgba(4,0,188,.04) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(4,0,188,.04) 1px, transparent 1px) 0 0 / 26px 26px, radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 52%), linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); } .exB-sello { position: relative; width: 196px; height: 196px; display: grid; place-items: center; margin: 0 auto; transform: rotate(-9deg); } .exB-sello svg { position: absolute; inset: 0; width: 100%; height: 100%; } .exB-s1 { fill: none; stroke: var(--ex-azul); stroke-width: 3.5; } .exB-s2 { fill: rgba(0,18,253,.06); stroke: var(--ex-azul); stroke-width: 1.5; stroke-dasharray: 4 3; } .exB-stxt { font: 700 12.5px var(--font, "Poppins", sans-serif); letter-spacing: .16em; fill: var(--ex-azul); } .is-mal .exB-s1, .is-mal .exB-s2 { stroke: var(--ex-lavanda); } .is-mal .exB-stxt { fill: var(--ex-lavanda); } .is-mal .exB-s2 { fill: rgba(108,120,255,.08); } .exB-sello b { position: relative; font: 400 52px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; color: var(--ex-azul); } .is-mal .exB-sello b { color: var(--ex-lavanda); } .exB-sello small { font-size: 26px; } /* 14-oct · el dueño: el sello del examen, VERDE si aprobaste y ROJO si no. Son el verde y el rojo del campus (--success y --danger, que ya cambian solos en modo oscuro). Va en la cabecera del resultado y en la ventanita, con su tinta y la estampa de la fecha. */ .exB-res.is-ok, .exP.is-ok { --ex-sello-c: var(--success, #12805c); --ex-sello-f: rgba(18,128,92,.08); --ex-sello-t: rgba(18,128,92,.45); } .exB-res.is-mal, .exP.is-mal { --ex-sello-c: var(--danger, #c2272d); --ex-sello-f: rgba(194,39,45,.07); --ex-sello-t: rgba(194,39,45,.4); } .is-ok .exB-s1, .is-ok .exB-s2, .is-mal .exB-s1, .is-mal .exB-s2 { stroke: var(--ex-sello-c); } .is-ok .exB-s2, .is-mal .exB-s2 { fill: var(--ex-sello-f); } .is-ok .exB-stxt, .is-mal .exB-stxt { fill: var(--ex-sello-c); } .is-ok .exB-sello b, .is-mal .exB-sello b { color: var(--ex-sello-c); } .exB-res-txt h1 { margin: 0 0 8px; font: 400 44px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; color: var(--ex-noche); } .exB-res-p { margin: 0 0 8px; max-width: 54ch; font-size: 14px; line-height: 1.5; color: var(--ex-texto); } .exB-res .exB-ficha { max-width: 420px; } .exB-rev { max-width: 1120px; margin: 16px auto 0; } .exB-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--ex-noche); } .exB-h2 span { font-size: 13px; font-weight: 400; color: var(--ex-texto); } .exB-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .exB-fila { border-radius: 16px; } .exB-fbtn { -webkit-appearance: none; appearance: none; width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-radius: 16px; background: transparent; text-align: left; font: inherit; color: var(--ex-noche); cursor: pointer; } .exB-fbtn:hover { background: rgba(255,255,255,.5); } .exB-fbtn:focus-visible { outline: 2px solid var(--ex-brillante); outline-offset: 2px; } .exB-ft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; } .exB-est { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .exB-fila.is-bien .exB-est { color: #118146; background: #e7f7ee; } .exB-fila.is-mal .exB-est { color: #c2272d; background: #fdecec; } .exB-fila.is-nada .exB-est { color: #4a5268; background: rgba(238,240,255,.9); } .exB-fila.is-abierta { box-shadow: inset 0 1px 1px #fff, 0 22px 40px -26px rgba(4,0,188,.6); } .exB-det { padding: 2px 18px 18px; } .exB-pista { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 13px; color: var(--ex-texto); } /* opciones en la revisión: verde = bien, rojo = mal, azul = tu respuesta sin veredicto (varias respuestas mal) */ .exB-op.is-rev { cursor: default; } .exB-op.is-bien { border-color: #18a058; background: #e7f7ee; } .exB-op.is-bien .exB-letra { color: #fff; background: #18a058; border-color: #18a058; } .exB-op.is-bien .exB-marca { color: #118146; opacity: 1; } .exB-op.is-mal { border-color: #e0525a; background: #fdecec; } .exB-op.is-mal .exB-letra { color: #fff; background: #e0525a; border-color: #e0525a; } .exB-op.is-mal .exB-marca { color: #c2272d; opacity: 1; } .exB-op.is-mia { border-color: rgba(0,18,253,.45); background: rgba(0,18,253,.06); } /* ---------- el POPUP del resultado (ventanita de vidrio del Perfil) con el sello que CAE como en el Pasaporte ---------- */ .pf-dialogo.ex-pop { width: min(420px, calc(100vw - 32px)); overflow: hidden; } .exP { --ex-sello: 176px; padding: 24px 24px 24px; text-align: center; } .exP-espacio { position: relative; display: grid; place-items: center; height: calc(var(--ex-sello) + 26px); margin: 0 auto 4px; } .exP-espacio > * { grid-area: 1 / 1; } .exP .exB-sello { width: var(--ex-sello); height: var(--ex-sello); filter: drop-shadow(0 8px 14px rgba(11,36,84,.25)); backface-visibility: hidden; } .exP-tinta { width: var(--ex-sello); height: var(--ex-sello); border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(0,18,253,.5) 0 38%, rgba(255,255,255,0) 70%); } .exP.is-mal .exP-tinta { background: radial-gradient(circle, rgba(108,120,255,.45) 0 38%, rgba(255,255,255,0) 70%); } .exP-chispas { position: relative; width: var(--ex-sello); height: var(--ex-sello); pointer-events: none; } .exP-chispas i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ffe400; opacity: 0; } .exP-chispas i:nth-child(even) { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #0012fd; } .exP-chispas i:nth-child(1) { --x: 0; --y: -1; } .exP-chispas i:nth-child(2) { --x: .59; --y: -.81; } .exP-chispas i:nth-child(3) { --x: .95; --y: -.31; } .exP-chispas i:nth-child(4) { --x: .95; --y: .31; } .exP-chispas i:nth-child(5) { --x: .59; --y: .81; } .exP-chispas i:nth-child(6) { --x: 0; --y: 1; } .exP-chispas i:nth-child(7) { --x: -.59; --y: .81; } .exP-chispas i:nth-child(8) { --x: -.95; --y: .31; } .exP-chispas i:nth-child(9) { --x: -.95; --y: -.31; } .exP-chispas i:nth-child(10) { --x: -.59; --y: -.81; } .exP-estampa { align-self: end; justify-self: end; margin: 0 2px 0 0; padding: 4px 10px 5px; border: 2px solid #0400bc; border-radius: 7px; transform: rotate(-9deg); opacity: .92; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 3.5px #0400bc; background: rgba(255,255,255,.72); color: #0400bc; font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; line-height: 1.1; text-align: center; } .exP.is-mal .exP-estampa { color: #6c78ff; border-color: #6c78ff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 3.5px #6c78ff; } /* 14-oct · la tinta y la estampa con el color del sello (verde si aprobaste, rojo si no) */ .exP.is-ok .exP-tinta, .exP.is-mal .exP-tinta { background: radial-gradient(circle, var(--ex-sello-t) 0 38%, rgba(255,255,255,0) 70%); } .exP.is-ok .exP-estampa, .exP.is-mal .exP-estampa { color: var(--ex-sello-c); border-color: var(--ex-sello-c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 3.5px var(--ex-sello-c); } .exP-estampa small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .18em; } .exP-estampa strong { display: block; margin: 2px 0; font-size: 15px; font-weight: 800; letter-spacing: .04em; } .exP-t { margin: 6px 0 6px; font: 400 40px/1 var(--font-display, "Bebas Neue"), Impact, sans-serif; letter-spacing: .01em; color: var(--ex-noche); } .exP-p { margin: 0 auto 12px; max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--ex-texto); } .exP-cuenta { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 18px; padding: 0; } .exP-cuenta li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.95); } .exP-cuenta .is-bien { color: #118146; } .exP-cuenta .is-mal { color: #c2272d; } .exP-cuenta .is-nada { color: var(--ex-texto); } .exP-acc { display: grid; gap: 10px; } .exP-acc .exB-cta, .exP-acc .exB-sec { width: 100%; } /* la animación del Pasaporte (libro.css: lb-sello-cae, lb-tinta-expande, lb-chispa, lb-estampa-golpe y lb-sacudir) */ .ex-cae .exP .exB-sello { animation: ex-sello-cae 1s both; } .ex-cae .exP-tinta { animation: ex-tinta-expande .9s ease-out .46s both; } .ex-cae .exP-chispas i { animation: ex-chispa .75s cubic-bezier(.2, .8, .3, 1) .46s both; } .ex-cae .exP-estampa { animation: ex-estampa-golpe .5s cubic-bezier(.2, .9, .3, 1.2) .95s both; } .ex-cae .exP { animation: ex-sacudir .4s ease-out .46s; } @keyframes ex-sello-cae { 0% { opacity: 0; transform: translateY(-240px) scale(1.4) rotate(-26deg); animation-timing-function: cubic-bezier(.55, 0, .9, .45); } 10% { opacity: 1; } 46% { opacity: 1; transform: translateY(0) scale(1.4) rotate(-9deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } 58% { transform: translateY(0) scale(.9) rotate(-9deg); animation-timing-function: ease-out; } 74% { transform: scale(1.05) rotate(-9deg); } 100% { opacity: 1; transform: scale(1) rotate(-9deg); } } @keyframes ex-tinta-expande { 0% { opacity: 0; transform: scale(.5); } 2% { opacity: .75; transform: scale(.52); } 100% { opacity: 0; transform: scale(1.75); } } @keyframes ex-chispa { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 2% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--x) * 130px), calc(var(--y) * 130px)) scale(.3); } } @keyframes ex-estampa-golpe { 0% { opacity: 0; transform: rotate(-9deg) scale(1.7); } 55% { opacity: .92; transform: rotate(-9deg) scale(.94); } 100% { opacity: .92; transform: rotate(-9deg) scale(1); } } @keyframes ex-sacudir { 0% { transform: translate(0, 0); } 18% { transform: translate(-4px, 2px) rotate(-.5deg); } 36% { transform: translate(4px, -1px) rotate(.4deg); } 54% { transform: translate(-2px, 1px) rotate(-.2deg); } 72% { transform: translate(1px, 0); } 100% { transform: none; } } /* ---------- celular ---------- */ @media (max-width: 820px) { .exB-run, .exB-res { grid-template-columns: minmax(0, 1fr); } .exB-lado { position: static; order: -1; } .exB-mapa { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .exB-tit, .exB-res-txt h1 { font-size: 34px; } .exB-hoja { padding: 20px 16px 18px; border-radius: 20px; } .exB-q { font-size: 18px; } .exB-op { min-height: 54px; font-size: 14.5px; gap: 10px; } .exB-res { text-align: center; padding: 22px 18px; } .exB-res .exB-ficha { margin-left: auto; margin-right: auto; } .exB-res .exB-acc { justify-content: center; } .exB-fbtn { grid-template-columns: 50px minmax(0, 1fr); } .exB-est { grid-column: 2; justify-self: start; } .exP { --ex-sello: 150px; padding: 20px 18px 20px; } .exP-t { font-size: 34px; } } @media (prefers-reduced-motion: reduce) { .exB-reloj .rl-arco, .exB-op, .exB-cta { transition: none; } } /* modo oscuro: que se lea (el dueño trabaja en claro) */ :root[data-theme="dark"] .exB-hoja, :root[data-theme="dark"] .exB-lado, :root[data-theme="dark"] .exB-res, :root[data-theme="dark"] .exB-fila { --ex-noche: #eef0ff; --ex-texto: #b4bbcc; --ex-azul: #b3baff; --ex-lavanda: #b3baff; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow: 0 16px 32px -22px rgba(0,0,0,.6); } :root[data-theme="dark"] .exB-op, :root[data-theme="dark"] .exB-sec, :root[data-theme="dark"] .exB-reloj, :root[data-theme="dark"] .exP-cuenta li { color: #eef0ff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); box-shadow: none; } :root[data-theme="dark"] .exB-tit, :root[data-theme="dark"] .exB-ficha dd, :root[data-theme="dark"] .exP-t { color: #eef0ff; } :root[data-theme="dark"] .exP-estampa { background: rgba(18,20,82,.75); } /* [PROTECCION] 14-oct: marca de agua sobre el video (no recibe clics) y sin seleccion/arrastre en el campus */ .lc-marca { position: absolute; right: 14px; top: 12px; z-index: 2; pointer-events: none; user-select: none; font: 600 12px/1.2 system-ui, sans-serif; color: rgba(255,255,255,.42); text-shadow: 0 1px 3px rgba(0,0,0,.6); } body { -webkit-user-select: none; user-select: none; } body input, body textarea, body [contenteditable="true"] { -webkit-user-select: text; user-select: text; } img, video { -webkit-user-drag: none; } /* juegos-sala.css */ /* Campus Remotos Academy — Sala de juegos y partidas (rediseño 12-oct). Va al final: manda sobre styles.css y juegos-extra.css. Claro siempre. */ /* Propuesta C · «Plano técnico»: vidrio claro y dibujos de línea fina con marcas de medida, el mismo lenguaje de las portadas de las áreas. Logos: app.js figura() (SVG en línea). Energía: medidorEnergia() (regla de 5 marcas). Sin amarillo salvo el botón de jugar. */ /* ---------- Vidrio (receta aprobada, solo en claro): velo, brillo, filo de luz de 2 px, grosor, sombra y grano mate ---------- */ :root:not([data-theme="dark"]) [data-ruta="juegos"] :is(.sala.pl-cab, .reto-dia.pl-ticket, .juego, .partida.pl-hoja, .pl-hoja .opcion, .pl-hoja .fin-premio, .pl-salir) { position: relative; isolation: isolate; border: 0; color: #11111a; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px color-mix(in srgb, var(--jg-3, #0400bc) 24%, transparent), 0 2px 8px color-mix(in srgb, var(--jg-3, #0400bc) 7%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } :root:not([data-theme="dark"]) [data-ruta="juegos"] :is(.sala.pl-cab, .reto-dia.pl-ticket, .juego, .partida.pl-hoja, .pl-hoja .opcion, .pl-hoja .fin-premio, .pl-salir)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :root:not([data-theme="dark"]) [data-ruta="juegos"] :is(.sala.pl-cab, .reto-dia.pl-ticket, .juego, .partida.pl-hoja, .pl-hoja .opcion, .pl-hoja .fin-premio, .pl-salir)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, color-mix(in srgb, var(--jg-2, #0012fd) 22%, transparent) 84%, color-mix(in srgb, var(--jg-2, #0012fd) 42%, transparent) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* ---------- Raya de medida bajo los títulos (la firma de las portadas «Plano técnico») ---------- */ .pl-medida { width: max-content; max-width: 100%; } .pl-raya { display: block; height: 10px; margin: 8px 0 0; border-left: 1px solid var(--jg-1, #6c78ff); border-right: 1px solid var(--jg-1, #6c78ff); background: linear-gradient(var(--jg-1, #6c78ff), var(--jg-1, #6c78ff)) center / 100% 1px no-repeat; } /* ---------- Logos: plano de línea sobre cuadrícula tenue ---------- */ [data-ruta="juegos"] .figura.pl-logo { position: relative; isolation: isolate; display: block; flex: none; width: 168px; height: 112px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--jg-papel, #eef0ff) 78%, transparent), color-mix(in srgb, var(--jg-papel, #eef0ff) 30%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 20%, transparent); } [data-ruta="juegos"] .figura.pl-logo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--jg-1, #6c78ff) 20%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--jg-1, #6c78ff) 20%, transparent) 1px, transparent 1px), linear-gradient(to right, color-mix(in srgb, var(--jg-1, #6c78ff) 9%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--jg-1, #6c78ff) 9%, transparent) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px; background-position: center; -webkit-mask-image: radial-gradient(75% 85% at 50% 50%, #000 35%, rgba(0,0,0,.2) 100%); mask-image: radial-gradient(75% 85% at 50% 50%, #000 35%, rgba(0,0,0,.2) 100%); } [data-ruta="juegos"] .figura.pl-logo svg { position: relative; display: block; width: 100%; height: 100%; padding: 8px; box-sizing: border-box; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; } .pl-logo .pl-l1 { stroke: var(--jg-3, #0400bc); stroke-width: 2.3; } .pl-logo .pl-l2 { stroke: var(--jg-1, #6c78ff); stroke-width: 1.8; } .pl-logo .pl-l3 { stroke: var(--jg-chispa, #b3baff); stroke-width: 1.2; } .pl-logo .pl-grueso { stroke-width: 2.8; } .pl-logo .pl-mango { stroke: var(--jg-3, #0400bc); stroke-width: 4.6; } .pl-logo .pl-txt { stroke: var(--jg-chispa, #b3baff); stroke-width: 3.4; } .pl-logo .pl-txt-bl { stroke: #fff; stroke-width: 2.6; } .pl-logo .pl-cota { stroke: var(--jg-1, #6c78ff); stroke-width: .9; stroke-linecap: butt; } .pl-logo .pl-ext { stroke: var(--jg-1, #6c78ff); stroke-width: .8; stroke-dasharray: 2 2; stroke-linecap: butt; opacity: .7; } .pl-logo .pl-eje { stroke: var(--jg-1, #6c78ff); stroke-width: .8; stroke-dasharray: 7 2.5 1.2 2.5; stroke-linecap: butt; opacity: .7; } .pl-logo .pl-guia { stroke: var(--jg-1, #6c78ff); stroke-width: 1.7; stroke-dasharray: 0 3.6; } .pl-logo .pl-hueco { stroke: var(--jg-2, #0012fd); stroke-width: 1.4; stroke-dasharray: 3 2.2; fill: color-mix(in srgb, var(--jg-tx, #0012fd) 6%, transparent); } .pl-logo .pl-papel { fill: rgba(255,255,255,.88); } .pl-logo .pl-vidrio { fill: rgba(255,255,255,.62); } .pl-logo .pl-lleno { fill: var(--jg-3, #0400bc); stroke: none; } .pl-logo .pl-acento { fill: var(--jg-tx, #0012fd); } .pl-logo .pl-suave { fill: color-mix(in srgb, var(--jg-tx, #0012fd) 14%, transparent); stroke: none; } .pl-logo .pl-lav { fill: var(--jg-tx, #6c78ff); stroke: none; opacity: .55; } /* ---------- Energía: regla de 5 marcas que se llenan en azul ---------- */ [data-ruta="juegos"] .energia.pl-energia { display: inline-flex; align-items: center; gap: 12px; padding: 0; border-radius: 0; background: none; box-shadow: none; } .pl-energia-ic { display: grid; place-items: center; color: var(--jg-3, #0400bc); } .pl-regla { --seg: 30px; display: grid; grid-template-columns: repeat(5, var(--seg)) 1px; width: calc(var(--seg) * 5 + 1px); height: 22px; background: linear-gradient(var(--jg-1, #6c78ff), var(--jg-1, #6c78ff)) left bottom / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--jg-1, #6c78ff) 0 1px, transparent 1px var(--seg)) left top / 100% 100% no-repeat, repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) / 2), color-mix(in srgb, var(--jg-1, #6c78ff) 60%, transparent) calc(var(--seg) / 2) calc(var(--seg) / 2 + 1px), transparent calc(var(--seg) / 2 + 1px) var(--seg)) left bottom / 100% 6px no-repeat; } .pl-regla i { display: block; margin: 4px 4px 8px 5px; border-radius: 3px; background: color-mix(in srgb, var(--jg-1, #6c78ff) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 34%, transparent); } .pl-regla i.llena { background: linear-gradient(180deg, var(--jg-2, #0012fd), var(--jg-3, #0400bc)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px color-mix(in srgb, var(--jg-3, #0400bc) 70%, transparent); } [data-ruta="juegos"] .pl-energia .energia-txt { margin: 0; font: 500 12px/1.3 var(--font); color: var(--text-2); text-align: left; } [data-ruta="juegos"] .pl-energia .energia-txt b { display: block; font-size: 14px; font-weight: 700; color: var(--jg-3, #0400bc); } /* ---------- Cabecera de la sala ---------- */ [data-ruta="juegos"] .sala.pl-cab { min-height: 0; gap: 24px; padding: 30px clamp(22px, 4vw, 48px); border-radius: 28px; } [data-ruta="juegos"] .sala.pl-cab .sala-txt { max-width: 560px; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .sala.pl-cab .sala-titulo { margin: 0; color: var(--jg-3, #0400bc); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .sala.pl-cab .sala-txt p { margin: 16px 0 20px; color: var(--text-2); font-size: 15px; line-height: 1.55; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .sala-link { color: var(--jg-tx, #0012fd); font-weight: 700; } .sala-oso { flex: none; display: grid; place-items: center; } .sala-oso .sala-panda { position: relative; z-index: 1; } /* ---------- Desafío del día: ticket de vidrio con su plano en el talón ---------- */ [data-ruta="juegos"] .juegos-dia { margin-top: 18px; } [data-ruta="juegos"] .reto-dia.pl-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 24px; padding: 12px 22px 12px 12px; border-radius: 22px; text-decoration: none; transition: transform .18s; } [data-ruta="juegos"] .reto-dia.pl-ticket:hover { filter: none; transform: translateY(-2px); } .pl-talon { position: relative; display: block; padding-right: 20px; } .pl-talon::after { content: ""; position: absolute; right: 0; top: -12px; bottom: -12px; border-right: 2px dashed color-mix(in srgb, var(--jg-1, #6c78ff) 42%, transparent); } [data-ruta="juegos"] .reto-dia .figura.pl-logo { width: 120px; height: 80px; } [data-ruta="juegos"] .pl-ticket .reto-cuerpo { gap: 6px; } [data-ruta="juegos"] .pl-ticket .reto-etq { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--jg-3, #0400bc) 74%, transparent); } [data-ruta="juegos"] .pl-ticket .reto-cuerpo b { font-size: 17px; font-weight: 600; line-height: 1.4; color: #11111a; } [data-ruta="juegos"] .pl-ticket .btn { min-height: 46px; gap: 8px; white-space: nowrap; } [data-ruta="juegos"] .reto-dia.pl-ticket:focus-visible { outline: 3px solid var(--jg-2, #0012fd); outline-offset: 3px; } /* ---------- Juegos: tarjetas de vidrio con su plano arriba ---------- */ [data-ruta="juegos"] .juegos-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; margin-top: 18px; } [data-ruta="juegos"] .juego { gap: 0; padding: 10px 10px 14px; border-radius: 22px; transition: transform .18s, box-shadow .18s; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .juego:hover { transform: translateY(-3px); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px color-mix(in srgb, var(--jg-3, #0400bc) 28%, transparent), 0 2px 8px color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent), 0 36px 64px -30px color-mix(in srgb, var(--jg-3, #0400bc) 72%, transparent); } [data-ruta="juegos"] .juego:focus-visible { outline: 3px solid var(--jg-2, #0012fd); outline-offset: 3px; } [data-ruta="juegos"] .juego .figura.pl-logo { width: 100%; height: 124px; } [data-ruta="juegos"] .juego-cuerpo { gap: 5px; margin: 14px 6px 14px; } [data-ruta="juegos"] .juego-cuerpo b { font-size: 17px; font-weight: 600; line-height: 1.3; color: #11111a; } [data-ruta="juegos"] .juego-cuerpo span { font-size: 13px; line-height: 1.5; color: var(--text-2); } [data-ruta="juegos"] .juego-pie { margin: auto 6px 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--jg-1, #6c78ff) 38%, transparent); flex-direction: column; align-items: flex-start; gap: 6px; } [data-ruta="juegos"] .juego-premio { color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .juego-costo { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); } [data-ruta="juegos"] .juego-costo .ic { color: var(--jg-tx, #6c78ff); } /* ---------- Partida: hoja de vidrio con cuadrícula tenue ---------- */ [data-ruta="juegos"] .partida.pl-hoja { max-width: 780px; padding: 24px clamp(18px, 4vw, 40px) 30px; border-radius: 28px; gap: 14px; } [data-ruta="juegos"] .pl-cuadricula { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(to right, color-mix(in srgb, var(--jg-1, #6c78ff) 12%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--jg-1, #6c78ff) 12%, transparent) 1px, transparent 1px), linear-gradient(to right, color-mix(in srgb, var(--jg-1, #6c78ff) 5.5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--jg-1, #6c78ff) 5.5%, transparent) 1px, transparent 1px); background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(130% 110% at 90% 0%, #000 25%, rgba(0,0,0,.18) 100%); mask-image: radial-gradient(130% 110% at 90% 0%, #000 25%, rgba(0,0,0,.18) 100%); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pl-hoja .partida-titulo { color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .pl-hoja .partida-titulo { font-size: clamp(40px, 5vw, 54px); line-height: .95; } [data-ruta="juegos"] .pl-hoja .btn { min-height: 46px; gap: 8px; } /* inicio: texto a la izquierda y el plano del juego a la derecha */ [data-ruta="juegos"] .partida.pl-intro { grid-template-columns: minmax(0, 1fr) 264px; grid-template-areas: "volver volver" "tit fig" "txt fig" "ener fig" "btn fig"; justify-items: start; align-items: start; text-align: left; column-gap: 34px; row-gap: 14px; } .pl-intro > .volver { grid-area: volver; margin: 0; } [data-ruta="juegos"] .pl-intro > .figura.pl-logo { grid-area: fig; align-self: center; width: 100%; height: 190px; } .pl-intro > .pl-medida { grid-area: tit; } .pl-intro > p { grid-area: txt; margin: 0; font-size: 15px; line-height: 1.55; } .pl-intro > .energia { grid-area: ener; } .pl-intro > .btn, .pl-intro > .aviso-energia { grid-area: btn; margin: 6px 0 0; } /* pregunta: salir, puntos, avance como regla, enunciado y opciones de vidrio con letras */ [data-ruta="juegos"] .pl-juego .partida-top { align-items: center; } [data-ruta="juegos"] .pl-salir { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 44px; margin: 0; padding: 0 16px 0 12px; border-radius: 999px; font: 600 14px/1 var(--font); color: var(--jg-3, #0400bc); text-decoration: none; } [data-ruta="juegos"] .pl-salir:hover { transform: none; } [data-ruta="juegos"] .pl-juego .aciertos { gap: 6px; font: 400 28px/1 var(--font-display); letter-spacing: .02em; color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .pl-juego .aciertos .ic { color: var(--jg-tx, #6c78ff); } .pl-num { margin: 8px 0 0; font: 600 11.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--jg-3, #0400bc) 74%, transparent); } .pl-avance { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: linear-gradient(var(--jg-1, #6c78ff), var(--jg-1, #6c78ff)) left bottom / 100% 1px no-repeat; } .pl-avance i { position: relative; height: 22px; border-left: 1px solid var(--jg-1, #6c78ff); background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--jg-1, #6c78ff) 55%, transparent) calc(25% - 1px) 25%) left bottom / 100% 6px no-repeat; } .pl-avance i:last-child { border-right: 1px solid var(--jg-1, #6c78ff); } .pl-avance i::before { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 9px; border-radius: 3px; } .pl-avance i.ok::before { background: linear-gradient(180deg, var(--jg-2, #0012fd), var(--jg-3, #0400bc)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--jg-3, #0400bc) 70%, transparent); } .pl-avance i.ya::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--jg-1, #6c78ff) 60%, transparent) 0 3px, color-mix(in srgb, var(--jg-1, #6c78ff) 16%, transparent) 3px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 70%, transparent); } [data-ruta="juegos"] .pl-juego .enunciado { margin: 14px 0 6px; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.4; color: #11111a; } [data-ruta="juegos"] .pl-hoja .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } [data-ruta="juegos"] .pl-hoja .opcion { min-height: 70px; gap: 14px; padding: 12px 16px 12px 12px; border: 0; border-radius: 18px; font: 600 15px/1.35 var(--font); color: #11111a; cursor: pointer; transition: transform .15s, opacity .15s; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pl-hoja .opcion { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 22px rgba(255,255,255,.3), inset 0 -12px 20px -14px color-mix(in srgb, var(--jg-3, #0400bc) 22%, transparent), 0 2px 6px color-mix(in srgb, var(--jg-3, #0400bc) 6%, transparent), 0 18px 34px -22px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .pl-hoja .opcion:hover:not(:disabled) { border: 0; transform: translateY(-2px); } [data-ruta="juegos"] .pl-hoja .opcion:focus-visible { outline: 3px solid var(--jg-2, #0012fd); outline-offset: 3px; } .pl-letra { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding-top: 2px; border-radius: 11px; font: 400 23px/1 var(--font-display); color: var(--jg-3, #0400bc); background: color-mix(in srgb, var(--jg-papel, #eef0ff) 90%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 38%, transparent); transition: background .15s, color .15s; } .pl-hoja .opcion:hover:not(:disabled) .pl-letra { background: color-mix(in srgb, var(--jg-chispa, #b3baff) 50%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .pl-hoja .opcion:disabled { cursor: default; } [data-ruta="juegos"] .pl-hoja .opcion:disabled:not(.correcta):not(.incorrecta) { opacity: .55; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pl-hoja .opcion.correcta { background: linear-gradient(150deg, rgba(228,245,237,.94), rgba(204,235,220,.66)); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pl-hoja .opcion.correcta::after { background: linear-gradient(135deg, rgba(18,128,92,.85), rgba(18,128,92,.3) 50%, rgba(18,128,92,.7)); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pl-hoja .opcion.incorrecta { background: linear-gradient(150deg, rgba(252,233,234,.94), rgba(247,210,212,.66)); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pl-hoja .opcion.incorrecta::after { background: linear-gradient(135deg, rgba(194,39,45,.8), rgba(194,39,45,.28) 50%, rgba(194,39,45,.65)); } .pl-hoja .opcion.correcta .pl-letra { background: #12805c; color: #fff; box-shadow: none; } .pl-hoja .opcion.incorrecta .pl-letra { background: #c2272d; color: #fff; box-shadow: none; } [data-ruta="juegos"] .pl-hoja .partida-pie { min-height: 54px; padding-top: 4px; } [data-ruta="juegos"] .pl-hoja .partida-pie .bien { color: #12805c; } [data-ruta="juegos"] .pl-hoja .partida-pie .mal { display: inline-flex; align-items: center; gap: 6px; color: #c2272d; } [data-ruta="juegos"] .pl-hoja .partida-pie .mal b { color: #11111a; } /* final: el oso, el resultado grande y el premio en una pastilla de vidrio */ [data-ruta="juegos"] .partida.pl-fin { justify-items: center; text-align: center; } .pl-oso-fin { display: grid; place-items: center; } .pl-fin .pl-medida { margin: 0 auto; } [data-ruta="juegos"] .pl-fin .fin-cifra { color: var(--text-2); } [data-ruta="juegos"] .pl-fin .fin-cifra b { font-size: 64px; color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .pl-hoja .fin-premio { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; color: var(--jg-3, #0400bc); font-weight: 700; } .pl-fin-acciones { gap: 10px; justify-content: center; } /* desafío del día (pantalla propia) */ [data-ruta="juegos"] .partida.reto.pl-hoja { text-align: left; justify-items: stretch; } .pl-reto > .volver { justify-self: start; margin: 0; } [data-ruta="juegos"] .pl-reto > .figura.pl-logo { width: 100%; height: 130px; } [data-ruta="juegos"] .pl-reto .reto-texto { max-width: none; font-size: 20px; } /* las otras pantallas de juegos-extra.js solo cambian su logo y su energía */ [data-ruta="juegos"] .partida:not(.pl-hoja) > .figura.pl-logo { width: 180px; height: 120px; } /* ---------- Celular ---------- */ @media (max-width: 760px) { [data-ruta="juegos"] .sala.pl-cab { padding: 24px 20px 0; gap: 0; } [data-ruta="juegos"] .sala.pl-cab .sala-txt { max-width: none; } [data-ruta="juegos"] .sala.pl-cab .sala-txt p { margin: 14px 0 18px; } .sala-oso { align-self: flex-end; margin: 4px -4px 0 0; } [data-ruta="juegos"] .sala-oso .sala-panda { width: 128px; height: 128px; margin-top: 0; } [data-ruta="juegos"] .reto-dia.pl-ticket { grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; padding: 12px; } [data-ruta="juegos"] .reto-dia .figura.pl-logo { width: 88px; height: 68px; } [data-ruta="juegos"] .reto-dia .figura.pl-logo svg { padding: 4px; } .pl-talon { padding-right: 14px; } .pl-talon::after { top: -12px; bottom: -6px; } [data-ruta="juegos"] .pl-ticket .reto-cuerpo b { font-size: 15px; } [data-ruta="juegos"] .pl-ticket .btn { grid-column: 1 / -1; width: 100%; justify-content: center; margin-top: 14px; } [data-ruta="juegos"] .partida.pl-intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "volver" "fig" "tit" "txt" "ener" "btn"; } [data-ruta="juegos"] .pl-intro > .figura.pl-logo { height: 150px; } [data-ruta="juegos"] .pl-hoja .opciones { grid-template-columns: minmax(0, 1fr); gap: 10px; } [data-ruta="juegos"] .pl-hoja .opcion { min-height: 60px; } [data-ruta="juegos"] .pl-juego .aciertos { font-size: 24px; } } @media (max-width: 560px) { [data-ruta="juegos"] .juegos-grid { gap: 12px; } [data-ruta="juegos"] .juego { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "fig cuerpo" "fig pie"; gap: 0 14px; padding: 10px 14px 12px 10px; } [data-ruta="juegos"] .juego .figura.pl-logo { grid-area: fig; align-self: start; width: 96px; height: 96px; } [data-ruta="juegos"] .juego .figura.pl-logo svg { padding: 4px; } [data-ruta="juegos"] .juego-cuerpo { grid-area: cuerpo; margin: 4px 0 10px; } [data-ruta="juegos"] .juego-cuerpo b { font-size: 16px; } [data-ruta="juegos"] .juego-pie { grid-area: pie; margin: auto 0 0; padding-top: 10px; } .pl-regla { --seg: 26px; } } /* ---------- Menos movimiento ---------- */ @media (prefers-reduced-motion: reduce) { [data-ruta="juegos"] :is(.juego, .reto-dia, .opcion, .pl-letra) { transition: none; } [data-ruta="juegos"] :is(.juego, .reto-dia.pl-ticket, .pl-hoja .opcion):hover { transform: none !important; } } /* ---------- Modo oscuro (por si alguien lo activa: mismas piezas, colores claros sobre oscuro) ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] .figura.pl-logo { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 16%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .figura.pl-logo::before { opacity: .55; } :root[data-theme="dark"] .pl-logo .pl-l1, :root[data-theme="dark"] .pl-logo .pl-mango { stroke: var(--jg-papel, #e6e8ff); } :root[data-theme="dark"] .pl-logo :is(.pl-l2, .pl-cota, .pl-eje, .pl-guia, .pl-ext, .pl-hueco) { stroke: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] .pl-logo :is(.pl-l3, .pl-txt) { stroke: color-mix(in srgb, var(--jg-chispa, #b3baff) 50%, transparent); } :root[data-theme="dark"] .pl-logo .pl-papel { fill: rgba(18,20,82,.9); } :root[data-theme="dark"] .pl-logo .pl-vidrio { fill: rgba(18,20,82,.55); } :root[data-theme="dark"] .pl-logo .pl-lleno { fill: var(--jg-papel, #e6e8ff); } :root[data-theme="dark"] .pl-logo .pl-acento { fill: var(--jg-tx, #6c78ff); } :root[data-theme="dark"] [data-ruta="juegos"] .energia.pl-energia { background: none; padding: 0; } :root[data-theme="dark"] .pl-energia-ic, :root[data-theme="dark"] [data-ruta="juegos"] .pl-energia .energia-txt b { color: var(--jg-papel, #e6e8ff); } :root[data-theme="dark"] .pl-regla i.llena, :root[data-theme="dark"] .pl-avance i.ok::before { background: linear-gradient(180deg, var(--jg-1, #8f99ff), var(--jg-1, #6c78ff)); } :root[data-theme="dark"] .pl-letra { background: rgba(255,255,255,.06); color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .pl-cuadricula { opacity: .5; } :root[data-theme="dark"] [data-ruta="juegos"] :is(.pl-ticket .reto-etq, .pl-num) { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.pl-ticket .reto-cuerpo b, .juego-cuerpo b, .pl-juego .enunciado, .pl-hoja .opcion, .pl-hoja .partida-pie .mal b) { color: var(--text); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.juego-premio, .pl-salir, .pl-juego .aciertos) { color: var(--jg-chispa, #b3baff); } /* ---------- Mezcla 12-oct: logos de B (dos tonos) dentro del marco de plano de C ---------- */ [data-ruta="juegos"] .figura.pl-logo svg { filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--jg-3, #0400bc) 20%, transparent)); } /* ===================================================================================================================== Cabecera · opción H2 «Panel del jugador» (12-oct) Dos capas: a la izquierda el título grande («Sala de» con su línea de extensión y «Juegos» enorme sobre su raya de medida) y el texto con la tienda destacada con su ícono; a la derecha, encima del vidrio de la cabecera, un panel de vidrio más grueso con la energía de 10 (cifra grande, 10 celdas sobre una regla y la próxima recarga) y el oso asomando por detrás. EL OSO: .h2-oso .sala-panda es un hueco CUADRADO pensado para una imagen cuadrada con fondo transparente (el panda jugando videojuegos que hará el dueño): para cambiarlo basta con cambiar el src en app.js. Cuánto se esconde detrás del panel: --h2-asoma. ===================================================================================================================== */ [data-ruta="juegos"] .sala.pl-cab.h2-cab { --h2-asoma: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 444px); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "txt oso" "txt panel"; align-items: end; gap: 0 clamp(28px, 4vw, 60px); min-height: 0; padding: 10px clamp(22px, 4vw, 48px) 30px; border-radius: 30px; overflow: hidden; } /* la cuadrícula tenue del plano, más presente a la derecha (donde está el jugador) y casi nada detrás del título */ [data-ruta="juegos"] .h2-cab .h2-cuadricula { background-size: 44px 44px, 44px 44px, 11px 11px, 11px 11px; background-position: right -1px top -1px; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.2) 38%, #000 82%); mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.2) 38%, #000 82%); } /* ---------- Título: «Sala de» con su línea de extensión, «Juegos» grande sobre la raya de medida ---------- */ [data-ruta="juegos"] .h2-cab .sala-txt { grid-area: txt; align-self: center; max-width: 540px; padding: 22px 0 2px; } [data-ruta="juegos"] .h2-cab .h2-medida { width: max-content; max-width: 100%; } [data-ruta="juegos"] .h2-cab .sala-titulo { display: block; margin: 0; font-size: 44px; line-height: 1; letter-spacing: 0; } [data-ruta="juegos"] .h2-cab .h2-t1 { display: flex; align-items: center; gap: 14px; font-size: 44px; line-height: .92; letter-spacing: .06em; color: var(--jg-tx, #0012fd); } [data-ruta="juegos"] .h2-cab .h2-t1::after { content: ""; flex: 1 1 auto; min-width: 28px; height: 11px; margin-bottom: 4px; border-right: 1px solid var(--jg-1, #6c78ff); background: repeating-linear-gradient(90deg, var(--jg-1, #6c78ff) 0 4px, transparent 4px 7px) left center / 100% 1px no-repeat; } [data-ruta="juegos"] .h2-cab .h2-t2 { display: block; margin-top: -.02em; padding: .1em 0 0; font-size: 128px; line-height: .7; letter-spacing: .012em; color: var(--jg-3, #0400bc); background: linear-gradient(180deg, var(--jg-2, #2430ff) 0%, var(--jg-2, #0012fd) 30%, var(--jg-3, #0400bc) 74%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 16px 22px color-mix(in srgb, var(--jg-3, #0400bc) 18%, transparent)); } [data-ruta="juegos"] .h2-cab .h2-medida .pl-raya { margin-top: 10px; } /* ---------- Texto y la tienda destacada con su ícono (la misma moneda del menú) ---------- */ :root:not([data-theme="dark"]) [data-ruta="juegos"] .sala.pl-cab.h2-cab .sala-txt p { max-width: 460px; margin: 20px 0 0; font-size: 16px; line-height: 1.75; color: #3a3d55; } [data-ruta="juegos"] .h2-cab .sala-link.h2-tienda { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; margin: 0 1px 0 3px; padding: 0 11px 0 7px; vertical-align: middle; border-radius: 999px; font: 600 15px/1 var(--font); text-decoration: none; transition: box-shadow .15s, transform .15s; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .h2-cab .sala-link.h2-tienda { color: var(--jg-3, #0400bc); background: linear-gradient(180deg, #fff 0%, var(--jg-papel, #eef0ff) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 55%, transparent), inset 0 -6px 10px -8px color-mix(in srgb, var(--jg-3, #0400bc) 35%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .h2-cab .h2-tienda .ic { flex: none; color: var(--jg-tx, #0012fd); } [data-ruta="juegos"] .h2-cab .h2-tienda::before { content: ""; position: absolute; inset: -8px -6px; } /* 28 px + 16 px = 44 px para el dedo */ :root:not([data-theme="dark"]) [data-ruta="juegos"] .h2-cab .sala-link.h2-tienda:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--jg-2, #0012fd), inset 0 -6px 10px -8px color-mix(in srgb, var(--jg-3, #0400bc) 40%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--jg-3, #0400bc) 65%, transparent); } [data-ruta="juegos"] .h2-cab .sala-link.h2-tienda:focus-visible { outline: 3px solid var(--jg-2, #0012fd); outline-offset: 3px; } /* ---------- El oso: hueco cuadrado detrás del panel (se ve de la cintura para arriba) ---------- */ [data-ruta="juegos"] .h2-cab .h2-oso { grid-area: oso; position: relative; z-index: 1; display: block; justify-self: end; align-self: end; margin: 0 22px calc(-1 * var(--h2-asoma)) 0; } [data-ruta="juegos"] .h2-cab .h2-oso .sala-panda { display: block; width: 224px; height: 224px; margin: 0; transform: none; object-fit: cover; object-position: 50% 40%; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--jg-3, #0400bc) 16%, transparent)); } /* ---------- Panel del jugador: vidrio más grueso encima del vidrio de la cabecera ---------- */ [data-ruta="juegos"] .h2-cab .h2-panel { grid-area: panel; position: relative; z-index: 2; isolation: isolate; padding: 16px 22px 17px; border-radius: 24px; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .h2-cab .h2-panel { background: radial-gradient(120% 140% at 0% 0%, #fff 0%, rgba(255,255,255,0) 58%), linear-gradient(150deg, #fbfbff 0%, var(--jg-papel, #f4f5ff) 55%, var(--jg-papel, #eceeff) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.6), inset 0 0 26px rgba(255,255,255,.7), inset 0 -18px 28px -18px color-mix(in srgb, var(--jg-3, #0400bc) 30%, transparent), 0 2px 8px color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent), 0 30px 52px -24px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .h2-cab .h2-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .h2-cab .h2-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.7) 16%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 60%, color-mix(in srgb, var(--jg-2, #0012fd) 24%, transparent) 84%, color-mix(in srgb, var(--jg-2, #0012fd) 42%, transparent) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* dentro: la etiqueta con su línea de extensión; la cifra grande; la regla de 10; la próxima recarga */ [data-ruta="juegos"] .h2-cab .energia.h2-energia { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "etq etq" "cifra regla" "cifra estado"; align-items: center; gap: 0 22px; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; } .h2-etq { grid-area: etq; display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font: 600 11.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--jg-3, #0400bc) 78%, transparent); } .h2-etq .ic { flex: none; color: var(--jg-tx, #0012fd); } .h2-etq::after { content: ""; flex: 1 1 auto; height: 9px; margin-left: 8px; border-right: 1px solid color-mix(in srgb, var(--jg-1, #6c78ff) 80%, transparent); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--jg-1, #6c78ff) 75%, transparent) 0 4px, transparent 4px 7px) left center / 100% 1px no-repeat; } .h2-cifra { grid-area: cifra; align-self: stretch; display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; gap: 0 8px; padding-right: 22px; border-right: 1px dashed color-mix(in srgb, var(--jg-1, #6c78ff) 50%, transparent); white-space: nowrap; font: 400 30px/1 var(--font-display); letter-spacing: .04em; color: var(--jg-tx, #6c78ff); min-width: 5.1em; } /* el mismo ancho con 10 que con 6: la regla no se mueve */ .h2-cifra b { font-weight: 400; font-size: 80px; line-height: .8; letter-spacing: 0; color: var(--jg-3, #0400bc); } .h2-regla { grid-area: regla; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 40px; margin-top: 2px; background: linear-gradient(var(--jg-1, #6c78ff), var(--jg-1, #6c78ff)) 0 30px / 100% 1px no-repeat; } .h2-regla i { position: relative; display: block; min-width: 0; } .h2-regla i::before { content: ""; position: absolute; top: 0; left: 2px; right: 2px; height: 25px; border-radius: 5px; background: color-mix(in srgb, var(--jg-1, #6c78ff) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 32%, transparent); } .h2-regla i.llena::before { background: linear-gradient(180deg, var(--jg-1, #3340ff) 0%, var(--jg-2, #0012fd) 32%, var(--jg-3, #0400bc) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -4px 6px -2px rgba(2,0,110,.4), 0 6px 12px -6px color-mix(in srgb, var(--jg-3, #0400bc) 80%, transparent); } .h2-regla i.sig::before { background: color-mix(in srgb, var(--jg-2, #0012fd) 5%, transparent); box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--jg-2, #0012fd) 60%, transparent); } .h2-regla i::after { content: ""; position: absolute; left: 0; top: 30px; width: 1px; height: 5px; background: var(--jg-1, #6c78ff); } .h2-regla i:nth-child(5n+1)::after { height: 10px; } .h2-regla::after { content: ""; position: absolute; right: 0; top: 30px; width: 1px; height: 10px; background: var(--jg-1, #6c78ff); } .h2-estado { grid-area: estado; display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 13px/1.3 var(--font); color: #3a3d55; white-space: nowrap; } .h2-estado .ic { flex: none; color: var(--jg-tx, #6c78ff); } .h2-estado.llena { font-weight: 600; color: var(--jg-3, #0400bc); } .h2-estado.llena .ic { color: var(--jg-tx, #0012fd); } /* movimiento: al entrar, las celdas llenas se cargan una tras otra (solo si la persona no pidió menos movimiento) */ @media (prefers-reduced-motion: no-preference) { [data-ruta="juegos"] .h2-regla i.llena::before { transform-origin: 50% 100%; animation: h2-cargar .5s cubic-bezier(.2,.8,.2,1) both; } [data-ruta="juegos"] .h2-regla i:nth-child(2)::before { animation-delay: .04s; } [data-ruta="juegos"] .h2-regla i:nth-child(3)::before { animation-delay: .08s; } [data-ruta="juegos"] .h2-regla i:nth-child(4)::before { animation-delay: .12s; } [data-ruta="juegos"] .h2-regla i:nth-child(5)::before { animation-delay: .16s; } [data-ruta="juegos"] .h2-regla i:nth-child(6)::before { animation-delay: .2s; } [data-ruta="juegos"] .h2-regla i:nth-child(7)::before { animation-delay: .24s; } [data-ruta="juegos"] .h2-regla i:nth-child(8)::before { animation-delay: .28s; } [data-ruta="juegos"] .h2-regla i:nth-child(9)::before { animation-delay: .32s; } [data-ruta="juegos"] .h2-regla i:nth-child(10)::before { animation-delay: .36s; } @keyframes h2-cargar { from { opacity: 0; transform: scaleY(.2); } } } @media (prefers-reduced-motion: reduce) { [data-ruta="juegos"] .h2-cab .sala-link.h2-tienda { transition: none; } [data-ruta="juegos"] .h2-cab .sala-link.h2-tienda:hover { transform: none; } } /* la regla compacta de las partidas, ahora de 10 marcas (la siguiente que llega, punteada) */ [data-ruta="juegos"] .pl-regla { --seg: 21px; grid-template-columns: repeat(var(--n, 10), var(--seg)) 1px; width: calc(var(--seg) * var(--n, 10) + 1px); } [data-ruta="juegos"] .pl-regla i { margin: 4px 3px 8px 4px; } [data-ruta="juegos"] .pl-regla i.sig { background: color-mix(in srgb, var(--jg-2, #0012fd) 4%, transparent); box-shadow: none; border: 1.2px dashed color-mix(in srgb, var(--jg-2, #0012fd) 55%, transparent); } /* ---------- Pantallas medianas ---------- */ @media (max-width: 1180px) { [data-ruta="juegos"] .sala.pl-cab.h2-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 392px); } [data-ruta="juegos"] .h2-cab .h2-t1 { font-size: 38px; } [data-ruta="juegos"] .h2-cab .h2-t2 { font-size: 108px; } [data-ruta="juegos"] .sala.pl-cab.h2-cab { --h2-asoma: 50px; } [data-ruta="juegos"] .h2-cab .h2-oso .sala-panda { width: 200px; height: 200px; } } /* tableta y celular: título arriba; el texto con el oso al lado, asomando por detrás del panel; el panel a todo el ancho */ @media (max-width: 980px) { [data-ruta="juegos"] .sala.pl-cab.h2-cab { --h2-asoma: 36px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; grid-template-areas: "tit tit" "txt oso" "panel panel"; gap: 0 12px; padding: 28px 24px 22px; } [data-ruta="juegos"] .h2-cab .sala-txt { display: contents; } [data-ruta="juegos"] .h2-cab .h2-medida { grid-area: tit; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .sala.pl-cab.h2-cab .sala-txt p { grid-area: txt; align-self: center; max-width: 520px; margin: 18px 0 22px; } [data-ruta="juegos"] .h2-cab .h2-oso { margin: 0 4px calc(-1 * var(--h2-asoma)) 0; } [data-ruta="juegos"] .h2-cab .h2-oso .sala-panda { width: 168px; height: 168px; } } @media (max-width: 760px) { [data-ruta="juegos"] .sala.pl-cab.h2-cab { --h2-asoma: 28px; gap: 0 6px; padding: 22px 16px 16px; border-radius: 26px; } [data-ruta="juegos"] .h2-cab .h2-t1 { gap: 10px; font-size: 30px; } [data-ruta="juegos"] .h2-cab .h2-t2 { font-size: 86px; } [data-ruta="juegos"] .h2-cab .h2-medida .pl-raya { margin-top: 9px; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .sala.pl-cab.h2-cab .sala-txt p { margin: 14px 0 18px; font-size: 14.5px; line-height: 1.7; } [data-ruta="juegos"] .h2-cab .sala-link.h2-tienda { font-size: 14px; height: 26px; padding: 0 10px 0 6px; } [data-ruta="juegos"] .h2-cab .h2-tienda::before { inset: -9px -6px; } [data-ruta="juegos"] .h2-cab .h2-oso { margin: 0 -4px calc(-1 * var(--h2-asoma)) 0; } [data-ruta="juegos"] .h2-cab .h2-oso .sala-panda { width: 132px; height: 132px; } [data-ruta="juegos"] .h2-cab .h2-panel { padding: 14px 16px 12px; border-radius: 20px; } [data-ruta="juegos"] .h2-cab .energia.h2-energia { grid-template-areas: "cifra etq" "cifra estado" "regla regla"; gap: 0 16px; } .h2-etq { align-self: end; margin: 0 0 7px; font-size: 11px; } .h2-cifra { padding-right: 16px; font-size: 24px; gap: 0 6px; } .h2-cifra b { font-size: 62px; } .h2-estado { align-self: start; margin: 0; font-size: 12.5px; } .h2-regla { margin-top: 14px; } } @media (max-width: 560px) { [data-ruta="juegos"] .pl-regla { --seg: 16px; } [data-ruta="juegos"] .pl-regla i { margin: 4px 2px 8px 3px; } [data-ruta="juegos"] .energia.pl-energia:not(.h2-energia) { flex-wrap: wrap; row-gap: 8px; } } /* ---------- Modo oscuro (por si alguien lo activa): mismas piezas, colores claros sobre el bloque azul ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] .h2-cab .h2-t1 { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .h2-cab .h2-t2 { background: none; -webkit-text-fill-color: currentColor; color: #fff; filter: none; } :root[data-theme="dark"] [data-ruta="juegos"] .h2-cab .sala-link.h2-tienda { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 45%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .h2-cab .h2-tienda .ic { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .h2-cab .h2-panel { background: linear-gradient(150deg, rgba(18,20,82,.96), rgba(12,14,60,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 16%, transparent), 0 26px 46px -26px rgba(0,0,0,.8); } :root[data-theme="dark"] .h2-etq, :root[data-theme="dark"] .h2-estado.llena { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] .h2-etq .ic, :root[data-theme="dark"] .h2-estado .ic { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] .h2-cifra b { color: #fff; } :root[data-theme="dark"] .h2-estado { color: var(--text-2); } :root[data-theme="dark"] .h2-regla i.llena::before { background: linear-gradient(180deg, var(--jg-chispa, #a3abff), var(--jg-1, #6c78ff)); box-shadow: none; } :root[data-theme="dark"] .h2-regla i.sig::before { border-color: color-mix(in srgb, var(--jg-chispa, #b3baff) 70%, transparent); background: none; } /* ===================================================================================================================== Partida · mezcla que eligió el dueño (12-oct): pregunta y respuesta de P3 «Cartas» + inicio, final y desafío de P2 «Concurso». Abajo van las dos secciones tal cual; sus clases no chocan (p2-* y pc-*). ===================================================================================================================== */ /* ===================================================================================================================== Partida · opción P2 «Concurso» (12-oct) Como un concurso de TV en vidrio claro: franja de arriba (logo del juego, «Pregunta 1 de 5» en Bebas y la ficha de monedas), camino de puntos unidos por una línea que se llena, pantalla de vidrio con una luz lavanda suave que cae desde arriba, opciones en atriles (barras anchas, una debajo de otra) que se llenan de izquierda a derecha en verde o rojo al responder, y el final como marcador. Mismo vidrio de la sala; sin amarillo salvo «Jugar». Marcado: app.js juegoPreguntas() y juegoReto(). ===================================================================================================================== */ /* ---------- Vidrio de las piezas nuevas (la misma receta) ---------- */ :root:not([data-theme="dark"]) [data-ruta="juegos"] :is(.p2-franja, .p2-pantalla, .pl-hoja .p2-ficha, .p2-marcador) { position: relative; isolation: isolate; border: 0; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px color-mix(in srgb, var(--jg-3, #0400bc) 24%, transparent), 0 2px 8px color-mix(in srgb, var(--jg-3, #0400bc) 7%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } :root:not([data-theme="dark"]) [data-ruta="juegos"] :is(.p2-franja, .p2-pantalla, .pl-hoja .p2-ficha, .p2-marcador)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :root:not([data-theme="dark"]) [data-ruta="juegos"] :is(.p2-franja, .p2-pantalla, .pl-hoja .p2-ficha, .p2-marcador)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, color-mix(in srgb, var(--jg-2, #0012fd) 22%, transparent) 84%, color-mix(in srgb, var(--jg-2, #0012fd) 42%, transparent) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* las piezas de adentro flotan sobre la hoja: sombras más cortas que la de la hoja, para que se lean las capas */ :root:not([data-theme="dark"]) [data-ruta="juegos"] .p2-franja { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 24px rgba(255,255,255,.35), inset 0 -12px 20px -14px color-mix(in srgb, var(--jg-3, #0400bc) 22%, transparent), 0 2px 6px color-mix(in srgb, var(--jg-3, #0400bc) 6%, transparent), 0 18px 34px -22px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pl-hoja .p2-ficha { box-shadow: inset 0 1px 1px #fff, inset 0 -8px 14px -10px color-mix(in srgb, var(--jg-3, #0400bc) 25%, transparent), 0 2px 5px color-mix(in srgb, var(--jg-3, #0400bc) 6%, transparent), 0 12px 22px -14px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } /* ---------- La hoja (el escenario) ---------- */ [data-ruta="juegos"] .partida.pl-hoja:is(.p2-show, .p2-reto) { max-width: 860px; padding: 16px 18px 20px; gap: 14px; } /* una sola columna que nunca se estira más que la hoja (sin scroll de lado en el celular) */ [data-ruta="juegos"] .partida.pl-hoja:is(.p2-show, .p2-reto, .p2-final) { grid-template-columns: minmax(0, 1fr); } /* ---------- Franja de arriba: salir, logo + «Pregunta 1 de 5», ficha de monedas ---------- */ [data-ruta="juegos"] .p2-franja { display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 9px; border-radius: 22px; } [data-ruta="juegos"] .p2-franja > .volver { flex: none; margin: 0; } .p2-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; } [data-ruta="juegos"] .p2-titulo .figura.pl-logo { width: 78px; height: 58px; border-radius: 14px; } [data-ruta="juegos"] .p2-titulo .figura.pl-logo svg { padding: 5px; } .p2-titulo-txt { min-width: 0; } .p2-juego { display: block; font: 600 11px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--jg-3, #0400bc) 70%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-ruta="juegos"] .pl-hoja .p2-num { margin: 4px 0 0; font: 400 38px/.92 var(--font-display); letter-spacing: .03em; color: var(--jg-3, #0400bc); white-space: nowrap; } .p2-num span { color: var(--jg-tx, #6c78ff); } [data-ruta="juegos"] .pl-hoja .p2-ficha { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px 0 8px; border-radius: 999px; } .p2-moneda { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--jg-3, #0400bc); background: radial-gradient(120% 100% at 30% 20%, #fff, var(--jg-papel, #eef0ff)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 45%, transparent), 0 4px 10px -5px color-mix(in srgb, var(--jg-3, #0400bc) 50%, transparent); } [data-ruta="juegos"] .pl-hoja .p2-ficha b { padding-top: 3px; font: 400 30px/1 var(--font-display); letter-spacing: .02em; color: var(--jg-3, #0400bc); } /* +10 que aparece sobre la ficha cuando aciertas (solo si la partida da monedas) */ .p2-mas { position: absolute; right: 6px; top: -13px; padding: 3px 8px 2px; border-radius: 999px; font: 700 12px/1.2 var(--font); color: #0b6b4c; background: #e3f5ec; box-shadow: inset 0 0 0 1px rgba(18,128,92,.32), 0 6px 12px -6px rgba(18,128,92,.6); opacity: 0; transform: translateY(6px); pointer-events: none; } .p2-show:has(.opcion.correcta):not(:has(.opcion.incorrecta)) .p2-mas { opacity: 1; transform: none; transition: opacity .3s .35s, transform .45s .35s cubic-bezier(.2,1.4,.4,1); } /* ---------- Camino: puntos unidos por una línea que se va llenando ---------- */ [data-ruta="juegos"] .p2-camino { display: flex; align-items: center; width: min(100%, 680px); margin: 2px auto 0; padding: 0; list-style: none; } .p2-camino > li { list-style: none; } .p2-punto { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 400 17px/1 var(--font-display); color: var(--jg-tx, #6c78ff); background: radial-gradient(120% 100% at 30% 20%, #fff, color-mix(in srgb, var(--jg-papel, #eef0ff) 90%, transparent)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 42%, transparent), 0 6px 12px -8px color-mix(in srgb, var(--jg-3, #0400bc) 50%, transparent); transition: box-shadow .3s, color .3s, background .3s; } .p2-punto > span { display: grid; place-items: center; padding-top: 2px; } .p2-punto.hecho > span { padding-top: 0; } .p2-punto.ya { width: 42px; height: 42px; font-size: 22px; color: var(--jg-3, #0400bc); background: #fff; box-shadow: inset 0 0 0 2.5px var(--jg-2, #0012fd), 0 3px 6px color-mix(in srgb, var(--jg-3, #0400bc) 12%, transparent), 0 12px 22px -10px color-mix(in srgb, var(--jg-3, #0400bc) 75%, transparent); } .p2-punto.acierto { color: #12805c; background: radial-gradient(120% 100% at 30% 20%, #f2fbf6, #d6f0e3); box-shadow: inset 0 0 0 1.5px rgba(18,128,92,.5), 0 6px 12px -8px rgba(18,128,92,.6); } .p2-punto.fallo { color: #c2272d; background: radial-gradient(120% 100% at 30% 20%, #fff5f5, #f9dcdd); box-shadow: inset 0 0 0 1.5px rgba(194,39,45,.45), 0 6px 12px -8px rgba(194,39,45,.55); } /* el punto de la pregunta actual toma el color de la respuesta */ .p2-show:has(.opcion.correcta):not(:has(.opcion.incorrecta)) .p2-punto.ya { color: #12805c; background: #f2fbf6; box-shadow: inset 0 0 0 2.5px #12805c, 0 12px 22px -10px rgba(18,128,92,.7); } .p2-show:has(.opcion.incorrecta) .p2-punto.ya { color: #c2272d; background: #fff5f5; box-shadow: inset 0 0 0 2.5px #c2272d, 0 12px 22px -10px rgba(194,39,45,.6); } .p2-tramo { position: relative; flex: 1; height: 4px; margin: 0 -2px; border-radius: 2px; background: color-mix(in srgb, var(--jg-1, #6c78ff) 22%, transparent); box-shadow: inset 0 1px 1px color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent); } .p2-tramo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--jg-3, #0400bc), var(--jg-2, #0012fd)); transform: scaleX(0); transform-origin: left center; } .p2-tramo.lleno::after { transform: none; } .p2-tramo.nuevo::after { animation: p2-llenar .7s cubic-bezier(.3,.7,.2,1) .05s both; } @keyframes p2-llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- Pantalla de vidrio con la luz lavanda que cae desde arriba ---------- */ [data-ruta="juegos"] .p2-pantalla { display: grid; place-items: center; min-height: 150px; padding: 36px clamp(18px, 4vw, 52px) 32px; border-radius: 26px; overflow: hidden; text-align: center; } /* la luz: un cono lavanda que baja desde el borde de arriba y se abre (difuminado), con su foco suave arriba */ .p2-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: blur(14px); } .p2-luz::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: 0; clip-path: polygon(39% 0, 61% 0, 95% 100%, 5% 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--jg-1, #6c78ff) 38%, transparent) 0%, color-mix(in srgb, var(--jg-1, #6c78ff) 18%, transparent) 42%, color-mix(in srgb, var(--jg-1, #6c78ff) 9%, transparent) 78%, color-mix(in srgb, var(--jg-1, #6c78ff) 4%, transparent) 100%); } .p2-luz::after { content: ""; position: absolute; left: 35%; right: 35%; top: -14px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--jg-1, #6c78ff) 50%, transparent); } [data-ruta="juegos"] .p2-show .p2-pantalla .enunciado { margin: 0; max-width: 32em; font: 600 clamp(20px, 2.3vw, 25px)/1.38 var(--font); color: #11111a; text-wrap: balance; } [data-ruta="juegos"] .p2-show .hueco-txt { min-width: 96px; height: 1.15em; vertical-align: -.2em; border: 2px dashed color-mix(in srgb, var(--jg-3, #0400bc) 42%, transparent); border-radius: 9px; background: rgba(255,255,255,.6); } /* ---------- Atriles: barras anchas, una debajo de otra ---------- */ [data-ruta="juegos"] .p2-show .opciones.p2-atriles { grid-template-columns: minmax(0, 1fr); gap: 10px; } [data-ruta="juegos"] .p2-show .opcion { min-height: 62px; gap: 14px; padding: 9px 12px 9px 9px; border-radius: 18px; overflow: hidden; font: 600 16px/1.35 var(--font); transition: transform .16s, box-shadow .2s, opacity .25s; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .p2-show .opcion { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 22px rgba(255,255,255,.3), inset 0 -14px 22px -14px color-mix(in srgb, var(--jg-3, #0400bc) 26%, transparent), 0 2px 6px color-mix(in srgb, var(--jg-3, #0400bc) 7%, transparent), 0 18px 32px -20px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } .p2-op-txt { flex: 1; min-width: 0; } [data-ruta="juegos"] .p2-show .pl-letra { width: 44px; height: 44px; border-radius: 13px; font-size: 25px; background: radial-gradient(120% 100% at 30% 15%, #fff, var(--jg-papel, #eef0ff)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 42%, transparent), inset 0 -3px 0 color-mix(in srgb, var(--jg-1, #6c78ff) 20%, transparent), 0 6px 12px -8px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } /* al pasar: la barra se ilumina (más luz, filo azul, ficha en azul) */ :root:not([data-theme="dark"]) [data-ruta="juegos"] .p2-show .opcion:hover:not(:disabled) { transform: translateY(-2px); background: linear-gradient(90deg, color-mix(in srgb, var(--jg-chispa, #b3baff) 30%, transparent), color-mix(in srgb, var(--jg-chispa, #b3baff) 0%, transparent) 60%), radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%), linear-gradient(145deg, rgba(255,255,255,.78), color-mix(in srgb, var(--jg-papel, #eef0ff) 50%, transparent)); box-shadow: inset 0 1px 1px #fff, inset 0 -14px 22px -14px color-mix(in srgb, var(--jg-3, #0400bc) 30%, transparent), 0 3px 8px color-mix(in srgb, var(--jg-3, #0400bc) 10%, transparent), 0 24px 40px -22px color-mix(in srgb, var(--jg-3, #0400bc) 75%, transparent); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .p2-show .opcion:hover:not(:disabled)::after { background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.7) 18%, color-mix(in srgb, var(--jg-1, #6c78ff) 40%, transparent) 55%, color-mix(in srgb, var(--jg-2, #0012fd) 75%, transparent) 100%); } [data-ruta="juegos"] .p2-show .opcion:hover:not(:disabled) .pl-letra { color: #fff; background: linear-gradient(180deg, var(--jg-2, #0012fd), var(--jg-3, #0400bc)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 14px -8px color-mix(in srgb, var(--jg-3, #0400bc) 80%, transparent); } [data-ruta="juegos"] .p2-show .opcion:active:not(:disabled) { transform: translateY(0) scale(.992); } [data-ruta="juegos"] .p2-show .opcion:focus-visible { outline: 3px solid var(--jg-2, #0012fd); outline-offset: 3px; } /* al responder: la barra se llena de izquierda a derecha (verde si es la correcta, rojo si no) */ .p2-relleno { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.3,.7,.2,1); } .p2-show .opcion.correcta .p2-relleno { clip-path: inset(0 0 0 0); background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 58%), linear-gradient(90deg, rgba(204,238,221,.96), rgba(166,222,194,.92)); } .p2-show .opcion.incorrecta .p2-relleno { clip-path: inset(0 0 0 0); background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 58%), linear-gradient(90deg, rgba(252,222,223,.96), rgba(244,184,187,.92)); } .p2-show .opciones:has(.incorrecta) .opcion.correcta .p2-relleno { transition-delay: .5s; } /* si fallaste, la correcta se marca justo después */ :root:not([data-theme="dark"]) [data-ruta="juegos"] .p2-show .opcion:is(.correcta, .incorrecta) { background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46), rgba(255,255,255,.14)); } .p2-show .opciones:not(:has(.incorrecta)) .opcion.correcta { animation: p2-si .5s .15s ease-out; } .p2-show .opcion.incorrecta { animation: p2-no .42s ease-in-out; } @keyframes p2-si { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.015); } } @keyframes p2-no { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } } /* la marca de la derecha (visto o equis) */ .p2-marca { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity .2s .45s, transform .35s .45s cubic-bezier(.2,1.4,.4,1); } .p2-marca .ic { display: none; } .p2-show .opcion.correcta .p2-marca, .p2-show .opcion.incorrecta .p2-marca { opacity: 1; transform: none; } .p2-show .opcion.correcta .p2-marca { color: #fff; background: #12805c; box-shadow: 0 6px 12px -6px rgba(18,128,92,.8); } .p2-show .opcion.incorrecta .p2-marca { color: #fff; background: #c2272d; box-shadow: 0 6px 12px -6px rgba(194,39,45,.7); } .p2-show .opcion.correcta .p2-marca .ic:first-child, .p2-show .opcion.incorrecta .p2-marca .ic:last-child { display: block; } .p2-show .opciones:has(.incorrecta) .opcion.correcta .p2-marca { transition-delay: .95s; } [data-ruta="juegos"] .p2-show .opcion:disabled:not(.correcta):not(.incorrecta) { opacity: .5; } /* ---------- Pie: lo que pasó y «Siguiente» ---------- */ [data-ruta="juegos"] .p2-show .partida-pie { min-height: 52px; padding: 2px 2px 0; } [data-ruta="juegos"] .p2-show .partida-pie :is(.bien, .mal) { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.4 var(--font); } [data-ruta="juegos"] .p2-show .partida-pie :is(.bien, .mal) > .ic { flex: none; box-sizing: border-box; width: 30px; height: 30px; padding: 6px; border-radius: 50%; } [data-ruta="juegos"] .p2-show .partida-pie .bien > .ic { color: #12805c; background: #dff3ea; box-shadow: inset 0 0 0 1.5px rgba(18,128,92,.4); } [data-ruta="juegos"] .p2-show .partida-pie .mal > .ic { color: #c2272d; background: #fbe3e4; box-shadow: inset 0 0 0 1.5px rgba(194,39,45,.38); } [data-ruta="juegos"] .p2-show .partida-pie .btn { min-width: 150px; justify-content: center; } /* ---------- Inicio: el logo en la pantalla con su luz ---------- */ [data-ruta="juegos"] .partida.p2-intro { max-width: 860px; padding: 22px 22px 26px clamp(18px, 4vw, 40px); grid-template-columns: minmax(0, 1fr) 340px; column-gap: 36px; grid-template-areas: "volver fig" "tit fig" "txt fig" "premio fig" "ener fig" "btn fig"; } [data-ruta="juegos"] .p2-intro > .p2-pantalla { grid-area: fig; align-self: stretch; min-height: 290px; padding: 26px 18px 18px; } [data-ruta="juegos"] .p2-intro .p2-pantalla .figura.pl-logo { width: 100%; height: 220px; background: none; box-shadow: none; } [data-ruta="juegos"] .p2-intro .p2-pantalla .figura.pl-logo svg { padding: 14px; filter: drop-shadow(0 18px 18px color-mix(in srgb, var(--jg-3, #0400bc) 24%, transparent)); } [data-ruta="juegos"] .p2-intro > .p2-premio { grid-area: premio; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 16px 5px 5px; border-radius: 999px; font: 600 14px/1.2 var(--font); color: var(--jg-3, #0400bc); background: rgba(255,255,255,.58); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 30%, transparent), inset 0 -8px 14px -10px color-mix(in srgb, var(--jg-3, #0400bc) 22%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } .p2-premio .p2-moneda { width: 30px; height: 30px; } /* ---------- Final: marcador (aciertos y monedas) ---------- */ [data-ruta="juegos"] .partida.p2-final { max-width: 760px; gap: 12px; } [data-ruta="juegos"] .p2-marcador { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 560px); margin: 4px auto 6px; border-radius: 26px; overflow: hidden; } [data-ruta="juegos"] .p2-marcador.p2-solo { grid-template-columns: minmax(0, 1fr); width: min(100%, 320px); } .p2-celda { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 24px 16px 20px; } .p2-celda + .p2-celda { border-left: 2px dashed color-mix(in srgb, var(--jg-1, #6c78ff) 40%, transparent); } .p2-etq { font: 600 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--jg-3, #0400bc) 72%, transparent); } [data-ruta="juegos"] .p2-cifra { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; font: 400 76px/.86 var(--font-display); color: var(--jg-3, #0400bc); } .p2-cifra b { font-weight: 400; } .p2-cifra small { align-self: flex-end; margin-bottom: 6px; font-size: 32px; color: var(--jg-tx, #6c78ff); } .p2-cifra .ic { color: var(--jg-tx, #6c78ff); } .p2-sub { font-size: 13px; color: var(--text-2); } [data-ruta="juegos"] .p2-celda .p2-camino { width: min(100%, 210px); margin-top: 10px; } .p2-celda .p2-punto { width: 26px; height: 26px; } .p2-celda .p2-punto .ic { width: 13px; height: 13px; } /* ---------- Desafío del día: la misma franja y el reto en la pantalla ---------- */ [data-ruta="juegos"] .p2-reto .p2-pantalla .reto-texto { margin: 0; max-width: 30em; font: 600 clamp(19px, 2.2vw, 24px)/1.42 var(--font); color: #11111a; text-wrap: balance; } [data-ruta="juegos"] .p2-reto .reto-label { margin: 4px 4px 0; font-size: 14px; color: #121452; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .p2-reto .input { min-height: 120px; padding: 14px 16px; border: 0; border-radius: 18px; resize: vertical; font: 500 15px/1.5 var(--font); color: #11111a; background: rgba(255,255,255,.62); box-shadow: inset 0 2px 6px color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 36%, transparent), 0 1px 0 #fff; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .p2-reto .input:focus-visible { outline: 3px solid var(--jg-2, #0012fd); outline-offset: 2px; } [data-ruta="juegos"] .p2-reto .reto-hecho { justify-items: start; padding: 16px 18px; border-radius: 18px; text-align: left; color: var(--jg-3, #0400bc); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 32%, transparent), 0 14px 28px -20px color-mix(in srgb, var(--jg-3, #0400bc) 50%, transparent); } /* ---------- Celular ---------- */ @media (max-width: 760px) { [data-ruta="juegos"] .partida.pl-hoja:is(.p2-show, .p2-reto) { padding: 10px 10px 14px; gap: 12px; border-radius: 24px; } [data-ruta="juegos"] .p2-franja { gap: 8px; padding: 6px 8px 6px 6px; border-radius: 18px; } [data-ruta="juegos"] .p2-franja .pl-salir { width: 44px; padding: 0; justify-content: center; } .p2-franja .pl-salir > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .p2-titulo { gap: 6px; } .p2-titulo-txt { overflow: hidden; } [data-ruta="juegos"] .p2-titulo .figura.pl-logo { width: 46px; height: 38px; border-radius: 10px; } [data-ruta="juegos"] .p2-titulo .figura.pl-logo svg { padding: 2px; } .p2-juego { font-size: 9.5px; letter-spacing: .1em; } [data-ruta="juegos"] .pl-hoja .p2-num { font-size: 24px; } [data-ruta="juegos"] .pl-hoja .p2-ficha { height: 42px; gap: 6px; padding: 0 12px 0 5px; } .p2-moneda { width: 30px; height: 30px; } [data-ruta="juegos"] .pl-hoja .p2-ficha b { font-size: 25px; } .p2-punto { width: 28px; height: 28px; font-size: 15px; } .p2-punto.ya { width: 36px; height: 36px; font-size: 19px; } [data-ruta="juegos"] .partida.pl-hoja.p2-show { gap: 10px; } [data-ruta="juegos"] .p2-pantalla { min-height: 100px; padding: 22px 14px 18px; border-radius: 20px; } [data-ruta="juegos"] .p2-show .p2-pantalla .enunciado { font-size: 18px; } [data-ruta="juegos"] .p2-show .opciones.p2-atriles { gap: 8px; } [data-ruta="juegos"] .p2-show .opcion { min-height: 54px; gap: 12px; padding: 6px 10px 6px 6px; border-radius: 16px; font-size: 15px; } [data-ruta="juegos"] .p2-show .partida-pie { gap: 10px; } [data-ruta="juegos"] .p2-show .pl-letra { width: 40px; height: 40px; font-size: 22px; border-radius: 12px; } .p2-marca { width: 28px; height: 28px; } [data-ruta="juegos"] .p2-show .partida-pie .btn { width: 100%; } [data-ruta="juegos"] .partida.p2-intro { padding: 14px 16px 20px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "volver" "fig" "tit" "txt" "premio" "ener" "btn"; } [data-ruta="juegos"] .p2-intro > .p2-pantalla { min-height: 0; padding: 14px; } [data-ruta="juegos"] .p2-intro .p2-pantalla .figura.pl-logo { height: 150px; } [data-ruta="juegos"] .p2-cifra { font-size: 60px; } .p2-cifra small { font-size: 26px; } .p2-celda { padding: 20px 10px 16px; } } /* ---------- Menos movimiento: todo cambia de golpe, sin desplazarse ---------- */ @media (prefers-reduced-motion: reduce) { [data-ruta="juegos"] :is(.p2-relleno, .p2-marca, .p2-mas, .p2-punto, .p2-show .opcion) { transition: none !important; } [data-ruta="juegos"] .p2-show .opcion { animation: none !important; } [data-ruta="juegos"] .p2-tramo.nuevo::after { animation: none; } [data-ruta="juegos"] .p2-show .opcion:is(:hover, :active) { transform: none !important; } .p2-mas { transform: none; } } /* ---------- Modo oscuro (por si alguien lo activa) ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] :is(.p2-franja, .p2-pantalla, .p2-marcador, .pl-hoja .p2-ficha) { position: relative; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 16%, transparent); } :root[data-theme="dark"] .p2-luz { opacity: .45; } :root[data-theme="dark"] [data-ruta="juegos"] :is(.pl-hoja .p2-num, .pl-hoja .p2-ficha b, .p2-cifra, .p2-juego, .p2-etq) { color: var(--jg-papel, #e6e8ff); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.p2-show .p2-pantalla .enunciado, .p2-reto .p2-pantalla .reto-texto, .p2-reto .reto-label) { color: var(--text); } :root[data-theme="dark"] .p2-punto:not(.acierto):not(.fallo) { background: rgba(255,255,255,.08); color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] .p2-show .opcion.correcta .p2-relleno { background: rgba(69,211,154,.22); } :root[data-theme="dark"] .p2-show .opcion.incorrecta .p2-relleno { background: rgba(255,122,126,.22); } :root[data-theme="dark"] .p2-moneda { background: rgba(255,255,255,.1); color: var(--jg-papel, #e6e8ff); } /* ===================================================================================================================== Partida · opción P3 «Cartas» (12-oct) Cada pregunta es una carta grande de vidrio con el logo del juego encima (entra volteándose desde el mazo); las respuestas son cartas pequeñas con grosor que se levantan al pasar el ratón y, al elegir, se voltean (✓ verde o ✗ rojo); al lado, el mazo de las cartas que faltan. Al final, las cartas jugadas en abanico. Marcado: app.js juegoPreguntas() y juegoReto(). Prefijo pc-. ===================================================================================================================== */ /* ---------- Vidrio: la misma receta de la sala. --pc-tinte, --pc-filo y --pc-sombra dan el verde, el rojo y el grosor ---------- */ .pc-vidrio { position: relative; isolation: isolate; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pc-vidrio { color: #11111a; background: var(--pc-tinte, none), radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px color-mix(in srgb, var(--jg-3, #0400bc) 24%, transparent), var(--pc-sombra, 0 2px 8px color-mix(in srgb, var(--jg-3, #0400bc) 7%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent)); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pc-vidrio::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pc-vidrio::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: var(--pc-filo, linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, color-mix(in srgb, var(--jg-2, #0012fd) 22%, transparent) 84%, color-mix(in srgb, var(--jg-2, #0012fd) 42%, transparent) 100%)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* cuadrícula de plano dentro de la carta (la firma de la sala), con su marco fino de carta */ [data-ruta="juegos"] .pc-trama { position: absolute; inset: 10px; z-index: -1; border-radius: 18px; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 20%, transparent); background-image: linear-gradient(to right, color-mix(in srgb, var(--jg-1, #6c78ff) 13%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--jg-1, #6c78ff) 13%, transparent) 1px, transparent 1px), linear-gradient(to right, color-mix(in srgb, var(--jg-1, #6c78ff) 5.5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--jg-1, #6c78ff) 5.5%, transparent) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px; background-position: center; -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, rgba(0,0,0,.2) 100%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, rgba(0,0,0,.2) 100%); } /* esquinas de carta: el número de la carta arriba a la izquierda y, girado, abajo a la derecha */ .pc-esq { position: absolute; top: 16px; left: 20px; font: 400 28px/1 var(--font-display); letter-spacing: .02em; color: var(--jg-tx, #6c78ff); pointer-events: none; } /* ---------- La mesa (sin hoja grande: las cartas son el vidrio) ---------- */ [data-ruta="juegos"] .partida.pc-mesa { position: relative; max-width: 1000px; margin: 0 auto; padding: 0; display: block; justify-items: stretch; text-align: left; background: none; box-shadow: none; border-radius: 0; } [data-ruta="juegos"] .pc-mesa .btn { min-height: 48px; gap: 8px; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .pc-mesa .partida-titulo { color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .pc-mesa .partida-titulo { font-size: clamp(42px, 5vw, 58px); line-height: .95; } /* naipes (dorsos del mazo): vidrio más lleno para que, apilados, se lean como cartas */ .pc-naipe { display: block; border-radius: 18px; } [data-ruta="juegos"] .pc-dorso { --pc-tinte: linear-gradient(160deg, rgba(250,251,255,.9), color-mix(in srgb, var(--jg-papel, #eceeff) 80%, transparent)); --pc-sombra: 0 1px 2px color-mix(in srgb, var(--jg-3, #0400bc) 12%, transparent), 0 16px 26px -16px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .pc-dorso .pc-trama { inset: 8px; border-radius: 11px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 32%, transparent); } [data-ruta="juegos"] .pc-vacio { border: 2px dashed color-mix(in srgb, var(--jg-1, #6c78ff) 45%, transparent); background: color-mix(in srgb, var(--jg-papel, #eef0ff) 40%, transparent); } /* ---------- Inicio: panel de vidrio con el texto y, al lado, el mazo con el logo del juego en la carta de arriba ---------- */ [data-ruta="juegos"] .pc-intro > .volver { margin: 0 0 16px; } [data-ruta="juegos"] .pc-intro-panel { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 28px 40px; min-height: 372px; padding: 44px 40px 44px 56px; border-radius: 30px; } [data-ruta="juegos"] .pc-intro-panel > .pc-trama { inset: 12px; border-radius: 22px; -webkit-mask-image: radial-gradient(70% 120% at 100% 50%, #000 20%, rgba(0,0,0,.08) 100%); mask-image: radial-gradient(70% 120% at 100% 50%, #000 20%, rgba(0,0,0,.08) 100%); } .pc-intro-txt { display: grid; justify-items: start; gap: 18px; } [data-ruta="juegos"] .pc-intro-txt .pc-que { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--text-2); } [data-ruta="juegos"] .pc-intro-txt .btn { margin-top: 6px; } .pc-intro-mazo { position: relative; justify-self: center; width: 214px; height: 290px; perspective: 1100px; } [data-ruta="juegos"] .pc-intro-mazo .pc-naipe { position: absolute; inset: 0; border-radius: 22px; transform-origin: 50% 90%; animation: pcAbre .8s cubic-bezier(.2,.8,.2,1) backwards; } .pc-intro-mazo .pc-naipe:nth-child(1) { transform: translate(-34px, 16px) rotate(-15deg); animation-delay: .1s; } .pc-intro-mazo .pc-naipe:nth-child(2) { transform: translate(-18px, 7px) rotate(-8deg); animation-delay: .05s; } .pc-intro-mazo .pc-naipe:nth-child(3) { transform: translate(16px, 4px) rotate(7deg); animation-delay: .15s; } @keyframes pcAbre { from { transform: translate(0, 0) rotate(0deg); } } [data-ruta="juegos"] .pc-intro-mazo .pc-tapa { display: grid; justify-items: center; align-content: center; gap: 16px; padding: 22px 18px; transform: rotateY(-12deg) rotateX(5deg) rotate(-2deg); animation: none; --pc-sombra: 0 2px 8px color-mix(in srgb, var(--jg-3, #0400bc) 10%, transparent), 0 44px 60px -30px color-mix(in srgb, var(--jg-3, #0400bc) 72%, transparent); } [data-ruta="juegos"] .pc-tapa .figura.pl-logo { width: 100%; height: 132px; border-radius: 14px; } .pc-tapa-n { font: 400 30px/1 var(--font-display); letter-spacing: .04em; color: var(--jg-3, #0400bc); } /* ---------- Pregunta ---------- */ [data-ruta="juegos"] .pc-juego { --pc-gap: 18px; } [data-ruta="juegos"] .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 54px; } /* la ficha de las monedas */ [data-ruta="juegos"] .pc-ficha { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 8px; border-radius: 999px; font-weight: 400; --pc-sombra: 0 2px 6px color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent), 0 18px 32px -18px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } .pc-ficha-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: radial-gradient(120% 120% at 30% 22%, var(--jg-1, #4a54ff) 0%, var(--jg-2, #0012fd) 40%, var(--jg-3, #0400bc) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 0 0 3px rgba(255,255,255,.18), inset 0 -4px 6px rgba(4,0,120,.45), 0 6px 12px -5px color-mix(in srgb, var(--jg-3, #0400bc) 75%, transparent); } [data-ruta="juegos"] .pc-ficha b { padding-top: 3px; font: 400 34px/1 var(--font-display); letter-spacing: .02em; color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .pc-ficha small { font: 600 12.5px/1 var(--font); color: var(--text-2); } [data-ruta="juegos"] .pc-ficha.sube { animation: pcSube .6s cubic-bezier(.3,1.6,.5,1); } @keyframes pcSube { 35% { transform: scale(1.14); } } /* escena: la carta de la pregunta (3 columnas) y el mazo (1 columna), alineados con las 4 cartas de respuesta */ [data-ruta="juegos"] .pc-escena { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pc-gap); align-items: center; } [data-ruta="juegos"] .pc-carta { grid-column: 1 / 4; display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 270px; padding: 60px clamp(28px, 5vw, 64px) 42px; border-radius: 28px; text-align: center; transform: perspective(1400px) translateX(0) rotateY(0deg) rotateX(3deg); transform-origin: 50% 100%; --pc-sombra: 0 2px 8px color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent), 0 50px 70px -38px color-mix(in srgb, var(--jg-3, #0400bc) 72%, transparent); animation: pcEntra .75s cubic-bezier(.2,.75,.2,1) backwards; } @keyframes pcEntra { from { opacity: 0; transform: perspective(1400px) translateX(34%) rotateY(-70deg) rotateX(3deg); } } [data-ruta="juegos"] .pc-carta > .pc-medallon { position: absolute; left: 50%; top: 0; z-index: 2; transform: translate(-50%, -58%); padding: 6px; border-radius: 20px; --pc-sombra: 0 2px 6px color-mix(in srgb, var(--jg-3, #0400bc) 10%, transparent), 0 20px 30px -16px color-mix(in srgb, var(--jg-3, #0400bc) 62%, transparent); } [data-ruta="juegos"] .pc-medallon .figura.pl-logo { width: 120px; height: 80px; border-radius: 14px; } [data-ruta="juegos"] .pc-medallon .figura.pl-logo svg { padding: 7px; } [data-ruta="juegos"] .pc-carta .pl-num { margin: 0; } [data-ruta="juegos"] .pc-carta .enunciado { max-width: 30ch; margin: 0; font: 600 clamp(21px, 2.5vw, 31px)/1.32 var(--font); letter-spacing: -.01em; color: #11111a; text-wrap: balance; } [data-ruta="juegos"] .pc-carta .hueco-txt { min-width: 92px; border-bottom: 3px dashed var(--jg-1, #6c78ff); } /* el mazo de las cartas que faltan, inclinado sobre la mesa */ [data-ruta="juegos"] .pc-mazo { grid-column: 4; justify-self: center; display: grid; justify-items: center; gap: 26px; } .pc-pila { position: relative; display: block; width: 136px; height: 186px; transform: perspective(900px) rotateX(16deg) rotateY(-20deg) rotate(3deg); } [data-ruta="juegos"] .pc-pila .pc-naipe { position: absolute; inset: 0; border-radius: 16px; } .pc-pila .pc-naipe:nth-child(1) { transform: translate(0, 0) rotate(-3deg); } .pc-pila .pc-naipe:nth-child(2) { transform: translate(7px, -8px) rotate(1deg); } .pc-pila .pc-naipe:nth-child(3) { transform: translate(14px, -16px) rotate(-1.5deg); } .pc-pila .pc-naipe:nth-child(4) { transform: translate(21px, -24px) rotate(2deg); } .pc-mazo-n { display: inline-flex; align-items: baseline; gap: 6px; font: 600 14px/1 var(--font); color: var(--text-2); white-space: nowrap; } .pc-mazo-n span { font: 400 32px/1 var(--font-display); color: var(--jg-3, #0400bc); } /* respuestas: cartas con grosor; se levantan al pasar el ratón y la elegida se voltea */ [data-ruta="juegos"] .pc-opciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pc-gap); margin-top: 36px; } [data-ruta="juegos"] .pc-opciones .opcion { display: grid; min-height: 0; padding: 0; border: 0; border-radius: 22px; background: none; box-shadow: none; color: #11111a; text-align: left; font: inherit; perspective: 1000px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .35s; animation: pcReparte .6s cubic-bezier(.2,.8,.2,1) backwards; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(1) { animation-delay: .2s; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(2) { animation-delay: .28s; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(3) { animation-delay: .36s; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(4) { animation-delay: .44s; } @keyframes pcReparte { from { opacity: 0; transform: translateY(44px) scale(.94); } } /* Verdadero o Falso (2 cartas) y preguntas de 3 opciones: la fila se reparte entre las que hay */ @media (min-width: 761px) { [data-ruta="juegos"] .pc-opciones:has(> .opcion:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-ruta="juegos"] .pc-opciones:has(> .opcion:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-ruta="juegos"] .pc-opciones:has(> .opcion:nth-child(2):last-child) .pc-frente { min-height: 132px; } [data-ruta="juegos"] .pc-opciones:has(> .opcion:nth-child(2):last-child) .pc-op-txt { font-size: 22px; } } .pc-giro { display: grid; border-radius: 22px; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3,.7,.15,1); } .pc-cara { grid-area: 1 / 1; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } [data-ruta="juegos"] .pc-cara { --pc-sombra: 0 1px 0 rgba(255,255,255,.9), 0 7px 0 -1px color-mix(in srgb, var(--jg-chispa, #b3baff) 90%, transparent), 0 9px 2px -2px color-mix(in srgb, var(--jg-3, #0400bc) 24%, transparent), 0 30px 36px -24px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } [data-ruta="juegos"] .pc-frente { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 160px; padding: 14px 16px 18px; } [data-ruta="juegos"] .pc-opciones .pl-letra { transition: background .2s, color .2s, box-shadow .2s; } .pc-op-txt { margin: auto 0; font: 600 16px/1.38 var(--font); color: #11111a; } [data-ruta="juegos"] .pc-reverso { transform: rotateY(180deg); display: grid; justify-items: center; align-content: center; gap: 8px; padding: 14px 16px; text-align: center; } .pc-marca { display: none; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; } .pc-marca.pc-si { background: radial-gradient(120% 120% at 30% 22%, #34b98b, #12805c 72%); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -4px 6px rgba(0,60,40,.3), 0 10px 18px -8px rgba(18,128,92,.75); } .pc-marca.pc-no { background: radial-gradient(120% 120% at 30% 22%, #e2575d, #c2272d 72%); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -4px 6px rgba(90,0,0,.3), 0 10px 18px -8px rgba(194,39,45,.7); } .pc-rev-etq { display: none; font: 700 14px/1.2 var(--font); } .pc-rev-etq.pc-si { color: #12805c; } .pc-rev-etq.pc-no { color: #c2272d; } .pc-rev-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 12.5px/1.35 var(--font); color: var(--text-2); } [data-ruta="juegos"] .pc-opciones .opcion.correcta .pc-si, [data-ruta="juegos"] .pc-opciones .opcion.incorrecta .pc-no { display: grid; } /* al pasar el ratón o con el teclado */ [data-ruta="juegos"] .pc-opciones .opcion:hover:not(:disabled) { transform: translateY(-12px); } [data-ruta="juegos"] .pc-opciones .opcion:hover:not(:disabled) .pc-frente { --pc-sombra: 0 1px 0 rgba(255,255,255,.9), 0 7px 0 -1px color-mix(in srgb, var(--jg-chispa, #b3baff) 90%, transparent), 0 9px 2px -2px color-mix(in srgb, var(--jg-3, #0400bc) 24%, transparent), 0 46px 46px -26px color-mix(in srgb, var(--jg-3, #0400bc) 72%, transparent); } [data-ruta="juegos"] .pc-opciones .opcion:is(:hover, :focus-visible):not(:disabled) .pl-letra { background: var(--jg-3, #0400bc); color: #fff; box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--jg-3, #0400bc) 80%, transparent); } [data-ruta="juegos"] .pc-opciones .opcion:active:not(:disabled) { transform: translateY(-4px) scale(.985); transition-duration: .08s; } [data-ruta="juegos"] .pc-opciones .opcion:focus-visible { outline: 3px solid var(--jg-2, #0012fd); outline-offset: 5px; } /* al responder: la elegida se voltea; la correcta se destaca en verde; las demás bajan */ [data-ruta="juegos"] .pc-opciones .opcion:disabled { cursor: default; } [data-ruta="juegos"] .pc-opciones .opcion.elegida .pc-giro { transform: rotateY(180deg); } [data-ruta="juegos"] .pc-opciones .opcion.elegida, [data-ruta="juegos"] .pc-opciones .opcion.correcta { transform: translateY(-12px); } [data-ruta="juegos"] .pc-opciones .opcion:disabled:not(.correcta):not(.elegida) { opacity: .42; transform: translateY(8px) scale(.96); } [data-ruta="juegos"] .pc-opciones .opcion.correcta .pc-cara { --pc-tinte: linear-gradient(155deg, rgba(232,248,240,.96), rgba(204,236,221,.66)); --pc-filo: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.55) 16%, rgba(18,128,92,.22) 48%, rgba(18,128,92,.8) 100%); --pc-sombra: 0 1px 0 rgba(255,255,255,.9), 0 7px 0 -1px rgba(150,214,186,.95), 0 9px 2px -2px rgba(18,128,92,.3), 0 34px 40px -24px rgba(18,128,92,.6); } [data-ruta="juegos"] .pc-opciones .opcion.incorrecta .pc-cara { --pc-tinte: linear-gradient(155deg, rgba(253,236,237,.96), rgba(247,212,214,.66)); --pc-filo: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.55) 16%, rgba(194,39,45,.2) 48%, rgba(194,39,45,.75) 100%); --pc-sombra: 0 1px 0 rgba(255,255,255,.9), 0 7px 0 -1px rgba(240,180,183,.95), 0 9px 2px -2px rgba(194,39,45,.28), 0 34px 40px -24px rgba(194,39,45,.5); } [data-ruta="juegos"] .pc-opciones .opcion.correcta:not(.elegida) .pl-letra { background: #12805c; color: #fff; box-shadow: none; } [data-ruta="juegos"] .pc-opciones .opcion.correcta.elegida { animation: pcSi .5s .6s cubic-bezier(.3,1.5,.5,1) backwards; } [data-ruta="juegos"] .pc-opciones .opcion.incorrecta.elegida { animation: pcNo .45s .62s ease-in-out; } @keyframes pcSi { 50% { transform: translateY(-20px) scale(1.04); } } @keyframes pcNo { 20%, 60% { transform: translate(-7px, -12px); } 40%, 80% { transform: translate(7px, -12px); } } /* el pie: cómo te fue y el botón para seguir */ [data-ruta="juegos"] .pc-juego .partida-pie { min-height: 58px; margin-top: 26px; } [data-ruta="juegos"] .pc-juego .partida-pie > * { animation: pcAparece .4s .4s cubic-bezier(.2,.8,.2,1) backwards; } @keyframes pcAparece { from { opacity: 0; transform: translateY(10px); } } [data-ruta="juegos"] .pc-juego .partida-pie .bien { font-size: 16px; color: #12805c; } [data-ruta="juegos"] .pc-juego .partida-pie .mal { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #c2272d; } [data-ruta="juegos"] .pc-juego .partida-pie .mal b { color: #11111a; } [data-ruta="juegos"] .pc-juego .partida-pie .btn { padding: 0 24px; } /* ---------- Final: las cartas jugadas en abanico sobre el panel del resultado, con el oso ---------- */ /* las 5 cartas giran sobre un mismo punto, bajo el abanico, y se montan una sobre otra como en la mano */ .pc-abanico { position: relative; z-index: 2; height: 240px; margin: 0 auto -78px; } [data-ruta="juegos"] .pc-abanico .pc-naipe { position: absolute; left: calc(50% - 59px); top: 26px; display: grid; place-items: center; width: 118px; height: 162px; border-radius: 18px; transform-origin: 50% 297%; transform: rotate(var(--a, 0deg)) translateY(0); animation: pcAbanico .75s cubic-bezier(.2,.8,.2,1) backwards; --pc-sombra: 0 2px 6px color-mix(in srgb, var(--jg-3, #0400bc) 10%, transparent), 0 20px 30px -18px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } .pc-abanico .pc-naipe:nth-child(1) { --a: -24deg; animation-delay: .05s; } .pc-abanico .pc-naipe:nth-child(2) { --a: -12deg; animation-delay: .12s; } .pc-abanico .pc-naipe:nth-child(3) { --a: 0deg; animation-delay: .19s; } .pc-abanico .pc-naipe:nth-child(4) { --a: 12deg; animation-delay: .26s; } .pc-abanico .pc-naipe:nth-child(5) { --a: 24deg; animation-delay: .33s; } @keyframes pcAbanico { from { opacity: 0; transform: rotate(0deg) translateY(40px); } } [data-ruta="juegos"] .pc-res .pc-marca { display: grid; } [data-ruta="juegos"] .pc-res.si { --pc-tinte: linear-gradient(160deg, rgba(240,251,246,.95), rgba(210,239,225,.85)); --pc-filo: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.55) 16%, rgba(18,128,92,.2) 50%, rgba(18,128,92,.7) 100%); } [data-ruta="juegos"] .pc-res.no { --pc-tinte: linear-gradient(160deg, rgba(254,242,243,.95), rgba(248,220,222,.85)); --pc-filo: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.55) 16%, rgba(194,39,45,.18) 50%, rgba(194,39,45,.65) 100%); } .pc-res.si .pc-marca { background: radial-gradient(120% 120% at 30% 22%, #34b98b, #12805c 72%); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 10px 18px -8px rgba(18,128,92,.75); } .pc-res.no .pc-marca { background: radial-gradient(120% 120% at 30% 22%, #e2575d, #c2272d 72%); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 10px 18px -8px rgba(194,39,45,.7); } .pc-res .pc-esq { top: 10px; left: 13px; font-size: 24px; } .pc-res.si .pc-esq { color: #12805c; } .pc-res.no .pc-esq { color: #c2272d; } [data-ruta="juegos"] .pc-fin-panel { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 10px 36px; max-width: 820px; margin: 0 auto; padding: 84px 56px 44px 40px; border-radius: 30px; } [data-ruta="juegos"] .pc-fin-panel > .pc-trama { inset: 12px; border-radius: 22px; } [data-ruta="juegos"] .pc-oso { display: grid; place-items: center; } [data-ruta="juegos"] .pc-oso .fin-panda { width: 190px; height: 190px; } .pc-fin-txt { display: grid; justify-items: start; gap: 14px; text-align: left; } [data-ruta="juegos"] .pc-fin .fin-cifra { margin: 0; font-size: 16px; color: var(--text-2); } [data-ruta="juegos"] .pc-fin .fin-cifra b { display: block; margin-bottom: 4px; font: 400 76px/.9 var(--font-display); color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .pc-fin .fin-premio { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 20px; border-radius: 999px; font-weight: 700; color: var(--jg-3, #0400bc); --pc-sombra: 0 2px 6px color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent), 0 14px 26px -16px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .pc-fin .pl-fin-acciones { gap: 10px; justify-content: flex-start; margin-top: 4px; } /* ---------- Desafío del día: la carta del día ---------- */ [data-ruta="juegos"] .partida.pc-reto { max-width: 820px; } [data-ruta="juegos"] .pc-reto > .volver { margin: 0 0 58px; } [data-ruta="juegos"] .pc-carta.pc-carta-reto { gap: 16px; min-height: 0; padding: 64px clamp(22px, 5vw, 56px) 36px; transform: none; animation: pcAparece .5s cubic-bezier(.2,.8,.2,1) backwards; } [data-ruta="juegos"] .pc-carta-reto .reto-texto { max-width: 36ch; font-size: 21px; color: #11111a; } [data-ruta="juegos"] .pc-carta-reto .reto-label { margin-top: 6px; } [data-ruta="juegos"] .pc-carta-reto textarea { width: 100%; } [data-ruta="juegos"] .pc-reto-pie { width: 100%; gap: 10px; } /* ---------- Celular ---------- */ @media (max-width: 760px) { [data-ruta="juegos"] .pc-juego { --pc-gap: 12px; } [data-ruta="juegos"] .pc-top { margin-bottom: 36px; } [data-ruta="juegos"] .pc-ficha { height: 46px; gap: 8px; padding: 0 16px 0 6px; } .pc-ficha-ic { width: 34px; height: 34px; } [data-ruta="juegos"] .pc-ficha b { font-size: 28px; } [data-ruta="juegos"] .pc-escena { display: block; } [data-ruta="juegos"] .pc-carta { min-height: 150px; padding: 40px 18px 22px; gap: 10px; border-radius: 24px; } [data-ruta="juegos"] .pc-carta .enunciado { font-size: 19.5px; } [data-ruta="juegos"] .pc-medallon .figura.pl-logo { width: 90px; height: 58px; } .pc-esq { top: 13px; left: 15px; font-size: 22px; } /* el mazo pasa arriba, entre «Salir» y la ficha */ [data-ruta="juegos"] .pc-mazo { position: absolute; top: 0; left: 50%; height: 46px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; } .pc-pila { width: 26px; height: 36px; transform: rotate(4deg); } [data-ruta="juegos"] .pc-pila .pc-naipe { border-radius: 6px; } [data-ruta="juegos"] .pc-pila .pc-dorso .pc-trama { inset: 3px; border-radius: 4px; } .pc-pila .pc-naipe:nth-child(2) { transform: translate(3px, -3px) rotate(1deg); } .pc-pila .pc-naipe:nth-child(3) { transform: translate(6px, -6px) rotate(-1.5deg); } .pc-pila .pc-naipe:nth-child(4) { transform: translate(9px, -9px) rotate(2deg); } .pc-mazo-n span { font-size: 26px; } [data-ruta="juegos"] .pc-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } [data-ruta="juegos"] .pc-frente { min-height: 96px; gap: 8px; padding: 10px 12px 13px; } [data-ruta="juegos"] .pc-opciones .pl-letra { width: 32px; height: 32px; border-radius: 9px; font-size: 20px; } .pc-op-txt { font-size: 14.5px; } .pc-marca { width: 46px; height: 46px; } [data-ruta="juegos"] .pc-juego .partida-pie { margin-top: 12px; gap: 10px; } [data-ruta="juegos"] .pc-juego .partida-pie .btn { flex: 1 1 100%; justify-content: center; } [data-ruta="juegos"] .pc-intro-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; padding: 28px 20px 26px; } .pc-intro-mazo { order: -1; width: 150px; height: 204px; margin: 6px auto 8px; } [data-ruta="juegos"] .pc-tapa .figura.pl-logo { height: 90px; } [data-ruta="juegos"] .pc-intro-mazo .pc-tapa { gap: 10px; padding: 16px 12px; } .pc-tapa-n { font-size: 24px; } [data-ruta="juegos"] .pc-intro-txt .btn { width: 100%; justify-content: center; } .pc-abanico { height: 158px; margin-bottom: -54px; } [data-ruta="juegos"] .pc-abanico .pc-naipe { left: calc(50% - 38px); top: 14px; width: 76px; height: 104px; border-radius: 13px; transform-origin: 50% 331%; } .pc-abanico .pc-naipe:nth-child(1) { --a: -24deg; } .pc-abanico .pc-naipe:nth-child(2) { --a: -12deg; } .pc-abanico .pc-naipe:nth-child(4) { --a: 12deg; } .pc-abanico .pc-naipe:nth-child(5) { --a: 24deg; } [data-ruta="juegos"] .pc-res .pc-marca { width: 38px; height: 38px; } .pc-res .pc-marca svg { width: 20px; height: 20px; } .pc-res .pc-esq { top: 7px; left: 9px; font-size: 17px; } [data-ruta="juegos"] .pc-fin-panel { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; padding: 58px 20px 26px; text-align: center; } .pc-fin-txt { justify-items: center; text-align: center; } .pc-fin .pl-medida { margin: 0 auto; } [data-ruta="juegos"] .pc-oso .fin-panda { width: 132px; height: 132px; } [data-ruta="juegos"] .pc-fin .fin-cifra b { font-size: 62px; } [data-ruta="juegos"] .pc-fin .pl-fin-acciones { justify-content: center; } [data-ruta="juegos"] .pc-reto > .volver { margin-bottom: 52px; } [data-ruta="juegos"] .pc-carta.pc-carta-reto { padding: 52px 18px 22px; } } @media (max-width: 420px) { [data-ruta="juegos"] .pc-ficha small { display: none; } [data-ruta="juegos"] .pc-ficha { padding-right: 14px; } } /* ---------- Menos movimiento: sin animaciones ni levantes (las cartas igual muestran su ✓ o ✗) ---------- */ @media (prefers-reduced-motion: reduce) { [data-ruta="juegos"] :is(.pc-carta, .pc-opciones .opcion, .pc-abanico .pc-naipe, .pc-intro-mazo .pc-naipe, .pc-ficha, .pc-juego .partida-pie > *) { animation: none !important; } [data-ruta="juegos"] :is(.pc-opciones .opcion, .pc-giro, .pc-opciones .pl-letra) { transition: none !important; } [data-ruta="juegos"] .pc-opciones .opcion:is(:hover, :active):not(:disabled) { transform: none; } } /* ---------- Modo oscuro (respaldo sencillo por si alguien lo activa) ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] .pc-vidrio { color: var(--text); background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 40px -24px rgba(0,0,0,.7); } :root[data-theme="dark"] [data-ruta="juegos"] .pc-opciones .opcion { background: none; border: 0; box-shadow: none; color: var(--text); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.pc-opciones .opcion.correcta .pc-cara, .pc-res.si) { background: rgba(69,211,154,.16); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.pc-opciones .opcion.incorrecta .pc-cara, .pc-res.no) { background: rgba(255,122,126,.16); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.pc-carta .enunciado, .pc-op-txt, .pc-carta-reto .reto-texto, .pc-juego .partida-pie .mal b) { color: var(--text); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.pc-ficha b, .pc-mazo-n span, .pc-tapa-n, .pc-fin .fin-cifra b, .pc-fin .fin-premio, .pc-mesa .partida-titulo) { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] .pc-esq { color: var(--jg-tx, #8f99ff); } :root[data-theme="dark"] [data-ruta="juegos"] .pc-trama { opacity: .5; } /* ===================================================================================================================== Juegos extra (12-oct): Memoria, Ruleta, Phishing, Entrevista y Zona horaria con el estilo nuevo, igual que Trivia. Antes de jugar y el final como «Concurso» (p2-*), el juego en cartas de vidrio como «Cartas» (pc-*), y la Ruleta en vidrio. Las clases jx-* vienen de juegos-extra.js; aquí se pasan a vidrio, sin bloques azules, sin amarillo y sin figuras de la marca. ===================================================================================================================== */ /* ---------- Antes de jugar: el texto y las pistas van en su lugar del grid de .p2-intro ---------- */ [data-ruta="juegos"] .jx-intro > .jx-intro-txt { grid-area: txt; display: grid; gap: 12px; } [data-ruta="juegos"] .jx-intro > .jx-intro-txt .text-2 { margin: 0; font-size: 15px; line-height: 1.55; } [data-ruta="juegos"] .jx-intro > .jx-accion { grid-area: btn; display: flex; justify-content: flex-start; margin: 6px 0 0; } [data-ruta="juegos"] .jx-intro .jx-pistas { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; font: 500 13px/1.3 var(--font); color: #3a3d55; } [data-ruta="juegos"] .jx-intro .jx-pistas li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: linear-gradient(160deg, rgba(255,255,255,.84), rgba(255,255,255,.52)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 24%, transparent), 0 8px 16px -14px color-mix(in srgb, var(--jg-3, #0400bc) 50%, transparent); } .jx-pista-ic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent); color: var(--jg-3, #0400bc); } /* ---------- Final: intentos y tiempo (Memoria) debajo de la cifra ---------- */ .jx-fin-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 8px; font: 500 13px/1.3 var(--font); color: #3a3d55; } .jx-fin-datos > span { display: inline-flex; align-items: center; gap: 6px; } .jx-fin-datos .ic { color: var(--jg-3, #0400bc); } .jx-fin-datos b { font: 400 21px/1 var(--font-display); letter-spacing: .02em; color: var(--jg-3, #0400bc); } /* ---------- Rondas (Phishing, Entrevista, Zona horaria): la carta crece con el contenido ---------- */ [data-ruta="juegos"] .jx-carta-ronda { min-height: 250px; padding-top: 58px; } [data-ruta="juegos"] .jx-carta-ronda .jx-ronda-cuerpo { display: grid; justify-items: center; gap: 14px; width: 100%; } [data-ruta="juegos"] .jx-carta-ronda .jx-ronda-n:focus { outline: none; } [data-ruta="juegos"] .jx-carta-ronda .jx-ayuda { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.5; color: #3a3d55; text-align: center; } /* Phishing: el correo como una hoja de vidrio dentro de la carta */ [data-ruta="juegos"] .jx-msg { width: min(100%, 640px); display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; text-align: left; background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.64)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 22%, transparent), 0 14px 26px -22px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .jx-msg-linea { margin: 0; font-size: 13.5px; line-height: 1.45; color: #3a3d55; overflow-wrap: anywhere; } [data-ruta="juegos"] .jx-msg-k { margin-right: 4px; font-weight: 600; color: var(--jg-tx, #6c78ff); } [data-ruta="juegos"] .jx-msg-texto { margin: 6px 0 0; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--jg-1, #6c78ff) 35%, transparent); font-size: 15px; line-height: 1.55; color: #11111a; } [data-ruta="juegos"] .pc-carta .enunciado.jx-pregunta { font-size: clamp(18px, 2vw, 22px); } [data-ruta="juegos"] .pc-opciones.jx-dos .pl-letra .ic { width: 20px; height: 20px; } /* La explicación que sale al responder */ [data-ruta="juegos"] .jx-rondas .jx-porque { margin: 22px 0 0; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; color: #3a3d55; background: linear-gradient(160deg, rgba(255,255,255,.84), rgba(255,255,255,.52)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 22%, transparent); } [data-ruta="juegos"] .jx-rondas .partida-pie { margin-top: 18px; } /* ---------- Entrevista: las 4 partes como tarjetas de vidrio que se suben y se bajan ---------- */ [data-ruta="juegos"] .jx-entrevista-juego .jx-star { display: grid; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; } [data-ruta="juegos"] .jx-star-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.54)); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 22%, transparent), 0 7px 0 -1px color-mix(in srgb, var(--jg-chispa, #b3baff) 70%, transparent), 0 22px 30px -24px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] :is(.jx-star-n, .jx-star-letra) { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; padding-top: 3px; font: 400 24px/1 var(--font-display); color: var(--jg-3, #0400bc); background: color-mix(in srgb, var(--jg-3, #0400bc) 7%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-3, #0400bc) 18%, transparent); } [data-ruta="juegos"] .jx-star-txt { font: 500 15px/1.45 var(--font); color: #11111a; } [data-ruta="juegos"] .jx-star-btns { display: flex; gap: 6px; } [data-ruta="juegos"] .jx-mover { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; cursor: pointer; color: var(--jg-3, #0400bc); background: linear-gradient(160deg, rgba(255,255,255,.96), color-mix(in srgb, var(--jg-papel, #eef0ff) 82%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 30%, transparent), 0 6px 12px -8px color-mix(in srgb, var(--jg-3, #0400bc) 45%, transparent); } [data-ruta="juegos"] .jx-mover:hover:not(:disabled) { background: var(--jg-3, #0400bc); color: #fff; } [data-ruta="juegos"] .jx-mover:focus-visible { outline: 3px solid var(--jg-2, #0012fd); outline-offset: 2px; } [data-ruta="juegos"] .jx-mover:disabled { opacity: .35; cursor: default; } [data-ruta="juegos"] .jx-star.ok .jx-star-item { box-shadow: inset 0 0 0 1.5px rgba(18,128,92,.45), 0 7px 0 -1px rgba(18,128,92,.22), 0 22px 30px -24px rgba(18,128,92,.6); } [data-ruta="juegos"] .jx-star.ok .jx-star-letra { color: #12805c; background: #e3f6ee; box-shadow: none; } [data-ruta="juegos"] .jx-entrevista-juego [data-jx-comprobar] { display: flex; justify-content: center; margin-top: 22px; } /* ---------- Memoria: tablero de cartas de vidrio (sin bloques azules ni figuras amarillas) ---------- */ [data-ruta="juegos"] .jx-mem .jx-ayuda { margin: 0 0 16px; text-align: center; } [data-ruta="juegos"] .jx-ley.c::before, [data-ruta="juegos"] .jx-tipo::before { background: var(--jg-3, #0400bc); border-radius: 3px; box-shadow: none; } [data-ruta="juegos"] .jx-ley.d::before, [data-ruta="juegos"] .jx-tipo-d::before { background: var(--jg-1, #6c78ff); border-radius: 50%; box-shadow: none; } [data-ruta="juegos"] .jx-mem .jx-marcador { gap: 8px; } [data-ruta="juegos"] .jx-mem .jx-dato { padding: 6px 14px 6px 10px; border-radius: 999px; background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.56)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 24%, transparent), 0 10px 18px -14px color-mix(in srgb, var(--jg-3, #0400bc) 50%, transparent); } [data-ruta="juegos"] .jx-tablero { gap: 16px; } [data-ruta="juegos"] .jx-carta { --alto: 140px; --radio: 20px; } [data-ruta="juegos"] .jx-dorso { color: var(--jg-3, #0400bc); background: linear-gradient(160deg, rgba(250,251,255,.96), color-mix(in srgb, var(--jg-papel, #e8ebff) 86%, transparent)); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 28%, transparent), 0 18px 28px -22px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .jx-dorso .pc-trama { inset: 8px; border-radius: 13px; } [data-ruta="juegos"] .jx-dorso .figura.pl-logo { position: absolute; inset: 20% 16%; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; } [data-ruta="juegos"] .jx-dorso .figura.pl-logo::before, [data-ruta="juegos"] .jx-dorso .figura.pl-logo::after { display: none; } [data-ruta="juegos"] .jx-dorso .figura.pl-logo svg { padding: 0; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--jg-3, #0400bc) 20%, transparent)); } [data-ruta="juegos"] .jx-carta:hover:not(.volteada) .jx-dorso { filter: none; background: linear-gradient(160deg, #ffffff, color-mix(in srgb, var(--jg-papel, #eef0ff) 95%, transparent)); } [data-ruta="juegos"] .jx-frente { background: linear-gradient(160deg, #ffffff, var(--jg-papel, #f3f4ff)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 30%, transparent), 0 18px 28px -22px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .jx-carta.hecha .jx-frente { background: linear-gradient(165deg, #f5fffa, #e3f6ee); box-shadow: inset 0 0 0 1.5px rgba(18,128,92,.45), 0 18px 28px -22px rgba(18,128,92,.6); } [data-ruta="juegos"] .jx-sello { background: var(--jg-3, #0400bc); color: #fff; } /* ---------- Ruleta: máquina de vidrio con la cuadrícula de plano, rodillos blancos y fichas de vidrio ---------- */ [data-ruta="juegos"] .partida.pl-hoja.jx-ruleta { max-width: 1000px; justify-items: stretch; text-align: left; } [data-ruta="juegos"] .jx-ruleta > .volver { justify-self: start; } [data-ruta="juegos"] .jx-ruleta > .text-2 { margin: 0; } [data-ruta="juegos"] .jx-maquina { isolation: isolate; color: var(--jg-3, #0400bc); background: linear-gradient(160deg, rgba(255,255,255,.78), color-mix(in srgb, var(--jg-papel, #eceeff) 56%, transparent)); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 30%, transparent), inset 0 -14px 24px -16px color-mix(in srgb, var(--jg-3, #0400bc) 24%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } [data-ruta="juegos"] .jx-maquina > .pc-trama { inset: 10px; border-radius: 20px; } [data-ruta="juegos"] .jx-rodillo { background: linear-gradient(180deg, var(--jg-papel, #eef0ff) 0%, #fff 30%, #fff 70%, var(--jg-papel, #eef0ff) 100%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 25%, transparent), inset 0 12px 22px -14px color-mix(in srgb, var(--jg-3, #0400bc) 35%, transparent); } [data-ruta="juegos"] .jx-marca { background: var(--jg-3, #0400bc); } [data-ruta="juegos"] .jx-fig.jx-ficha { border-radius: 30%; color: var(--jg-3, #0400bc); background: linear-gradient(160deg, #ffffff, var(--jg-papel, #e6e9ff)); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 35%, transparent), 0 10px 18px -12px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } [data-ruta="juegos"] .jx-sim-xp100 .jx-fig.jx-ficha { background: linear-gradient(160deg, var(--jg-papel, #eef0ff), var(--jg-papel, #d6dbff)); } [data-ruta="juegos"] .jx-fig.jx-ficha .jx-x2 { color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .jx-sim-protector .jx-fig.jx-ficha svg { fill: color-mix(in srgb, var(--jg-3, #0400bc) 12%, transparent); } [data-ruta="juegos"] .jx-pila { background: linear-gradient(180deg, var(--jg-2, #0012fd), var(--jg-3, #0400bc)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } [data-ruta="juegos"] .jx-ganaste { background: var(--jg-papel, #eef0ff); color: var(--jg-3, #0400bc); } :root:not([data-theme="dark"]) [data-ruta="juegos"] .jx-premios { background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(255,255,255,.5)); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 22%, transparent), 0 30px 60px -36px color-mix(in srgb, var(--jg-3, #0400bc) 55%, transparent); } @keyframes jx-brillo-azul { 0%, 100% { box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 30%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } 25% { box-shadow: inset 0 1px 1px #fff, 0 0 0 4px color-mix(in srgb, var(--jg-1, #6c78ff) 55%, transparent), 0 0 46px 6px color-mix(in srgb, var(--jg-1, #6c78ff) 35%, transparent); } 60% { box-shadow: inset 0 1px 1px #fff, 0 0 0 2px color-mix(in srgb, var(--jg-1, #6c78ff) 35%, transparent), 0 0 30px 2px color-mix(in srgb, var(--jg-1, #6c78ff) 20%, transparent); } } @media (prefers-reduced-motion: no-preference) { [data-ruta="juegos"] .jx-maquina.gana { animation-name: jx-brillo-azul; } } /* ---------- Celular ---------- */ @media (max-width: 760px) { [data-ruta="juegos"] .jx-carta-ronda { min-height: 0; padding-top: 50px; } [data-ruta="juegos"] .jx-msg { padding: 12px 14px; } [data-ruta="juegos"] .jx-msg-texto { font-size: 14px; } [data-ruta="juegos"] .jx-star-item { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; } [data-ruta="juegos"] .jx-star-btns { grid-column: 1 / -1; justify-content: flex-end; } [data-ruta="juegos"] .jx-carta { --alto: 118px; } [data-ruta="juegos"] .jx-tablero { gap: 10px; } } /* ---------- Oscuro (básico) ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-msg, .jx-star-item, .jx-dorso, .jx-frente, .jx-maquina, .jx-premios, .jx-rondas .jx-porque, .jx-intro .jx-pistas li, .jx-mem .jx-dato) { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 18%, transparent); color: var(--jg-papel, #eef0ff); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-msg-texto, .jx-star-txt) { color: var(--jg-papel, #eef0ff); } /* ===================================================================================================================== Ruleta de verdad (12-oct, 2.ª vuelta): rueda de vidrio con los 7 premios en partes iguales, puntero arriba y centro de vidrio. Reemplaza a la máquina de 3 rodillos (las reglas .jx-maquina/.jx-rodillo quedan sin uso). ===================================================================================================================== */ [data-ruta="juegos"] .jx-rueda { position: relative; isolation: isolate; width: min(100%, 410px); aspect-ratio: 1; margin: 26px auto 8px; } /* aro de vidrio alrededor */ [data-ruta="juegos"] .jx-rueda::before { content: ""; position: absolute; inset: -16px; z-index: -1; border-radius: 50%; background: linear-gradient(150deg, rgba(255,255,255,.96), color-mix(in srgb, var(--jg-papel, #e4e7ff) 78%, transparent) 55%, color-mix(in srgb, var(--jg-chispa, #b3baff) 62%, transparent)); box-shadow: inset 0 2px 2px #fff, inset 0 -12px 20px -8px color-mix(in srgb, var(--jg-3, #0400bc) 26%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 32%, transparent), 0 36px 64px -30px color-mix(in srgb, var(--jg-3, #0400bc) 62%, transparent); } [data-ruta="juegos"] .jx-rueda-giro { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; will-change: transform; box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 30%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--jg-3, #0400bc) 45%, transparent); } [data-ruta="juegos"] .jx-rueda-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .jx-gajo { stroke: #fff; stroke-width: 1.4; } .jx-gajo-0 { fill: #ffffff; } .jx-gajo-1 { fill: var(--jg-papel, #eceeff); } .jx-gajo-2 { fill: var(--jg-papel, #d9ddff); } /* brillo del vidrio por encima de los gajos */ [data-ruta="juegos"] .jx-rueda-giro::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none; background: radial-gradient(70% 55% at 30% 20%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%), radial-gradient(100% 100% at 50% 50%, color-mix(in srgb, var(--jg-3, #0400bc) 0%, transparent) 64%, color-mix(in srgb, var(--jg-3, #0400bc) 12%, transparent) 100%); } /* cada premio sobre su gajo, mirando hacia afuera (queda derecho cuando llega al puntero) */ [data-ruta="juegos"] .jx-rueda-premio { position: absolute; inset: 0; z-index: 1; transform: rotate(var(--a)); pointer-events: none; } [data-ruta="juegos"] .jx-rueda-premio > .jx-sim { position: absolute; left: 50%; top: 11%; transform: translateX(-50%); --t: 46px; gap: 6px; } [data-ruta="juegos"] .jx-rueda-premio .jx-sim b { font-size: 16px; color: var(--jg-3, #0400bc); } /* centro de vidrio */ [data-ruta="juegos"] .jx-rueda-centro { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 21%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); color: var(--jg-3, #0400bc); background: linear-gradient(150deg, #ffffff, var(--jg-papel, #e4e8ff)); box-shadow: inset 0 2px 2px #fff, inset 0 -6px 10px -4px color-mix(in srgb, var(--jg-3, #0400bc) 24%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 40%, transparent), 0 12px 22px -10px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } /* puntero arriba, apuntando al premio */ [data-ruta="juegos"] .jx-rueda-puntero { position: absolute; left: 50%; top: -30px; z-index: 4; width: 40px; height: 52px; transform: translateX(-50%); filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--jg-3, #0400bc) 40%, transparent)); } /* al ganar, el aro brilla en lavanda (sin amarillo ni confeti) */ @keyframes jx-rueda-brillo { 0%, 100% { box-shadow: inset 0 2px 2px #fff, inset 0 -12px 20px -8px color-mix(in srgb, var(--jg-3, #0400bc) 26%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 32%, transparent), 0 36px 64px -30px color-mix(in srgb, var(--jg-3, #0400bc) 62%, transparent); } 30% { box-shadow: inset 0 2px 2px #fff, 0 0 0 5px color-mix(in srgb, var(--jg-1, #6c78ff) 55%, transparent), 0 0 50px 8px color-mix(in srgb, var(--jg-1, #6c78ff) 38%, transparent); } } @media (prefers-reduced-motion: no-preference) { [data-ruta="juegos"] .jx-rueda.gana::before { animation: jx-rueda-brillo 1.6s ease-out; } } [data-ruta="juegos"] .jx-rueda.gana { animation: none; } @media (max-width: 760px) { [data-ruta="juegos"] .jx-rueda { width: min(100%, 320px); margin-top: 30px; } [data-ruta="juegos"] .jx-rueda-premio > .jx-sim { --t: 36px; top: 10%; } [data-ruta="juegos"] .jx-rueda-premio .jx-sim b { font-size: 13px; } } :root[data-theme="dark"] [data-ruta="juegos"] .jx-gajo-0 { fill: rgba(255,255,255,.1); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-gajo-1 { fill: color-mix(in srgb, var(--jg-chispa, #b3baff) 16%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-gajo-2 { fill: color-mix(in srgb, var(--jg-tx, #6c78ff) 24%, transparent); } /* Ruleta: en la rueda solo van los íconos, grandes (12-oct) */ [data-ruta="juegos"] .jx-rueda-premio > .jx-sim { --t: 54px; top: 12%; } @media (max-width: 760px) { [data-ruta="juegos"] .jx-rueda-premio > .jx-sim { --t: 42px; top: 11%; } } /* ===================================================================================================================== Jackpot (12-oct, 3.ª vuelta): el dueño prefiere «un jackpot». Máquina de vidrio con letrero y luces, ventana de 3 rodillos con la línea del premio, palanca al costado y logos de premios ilustrados a dos tonos. (Las reglas de la rueda quedan sin uso.) ===================================================================================================================== */ [data-ruta="juegos"] .jx-jackpot { position: relative; isolation: isolate; width: min(100% - 34px, 470px); margin: 6px auto 4px; padding: 16px 18px 20px; border-radius: 30px; background: linear-gradient(160deg, rgba(255,255,255,.86), color-mix(in srgb, var(--jg-papel, #e8ebff) 62%, transparent)); box-shadow: inset 0 2px 2px #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 32%, transparent), inset 0 -16px 26px -18px color-mix(in srgb, var(--jg-3, #0400bc) 30%, transparent), 0 36px 64px -32px color-mix(in srgb, var(--jg-3, #0400bc) 62%, transparent); } /* letrero con luces */ [data-ruta="juegos"] .jx-jp-letrero { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 14px; padding: 10px 14px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--jg-papel, #f0f2ff) 96%, transparent), color-mix(in srgb, var(--jg-papel, #d6dbff) 82%, transparent)); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 35%, transparent); } [data-ruta="juegos"] .jx-jp-titulo { padding-top: 4px; font: 400 42px/1 var(--font-display); letter-spacing: .1em; color: var(--jg-3, #0400bc); text-shadow: 0 2px 0 #fff, 0 8px 16px color-mix(in srgb, var(--jg-3, #0400bc) 25%, transparent); } .jx-jp-luces { display: flex; gap: 6px; } .jx-jp-luces i { width: 8px; height: 8px; border-radius: 50%; background: var(--jg-chispa, #b3baff); box-shadow: 0 0 0 1.5px #fff; } .jx-jp-luces i:nth-child(odd) { background: var(--jg-1, #6c78ff); } @keyframes jx-luz { 0% { background: #fff; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--jg-1, #6c78ff) 85%, transparent), 0 0 0 1.5px #fff; } 100% { background: var(--jg-1, #6c78ff); } } /* ventana de rodillos con la línea del premio */ [data-ruta="juegos"] .jx-jp-ventana { position: relative; padding: 12px 24px; border-radius: 22px; background: linear-gradient(180deg, var(--jg-papel, #e3e7ff), var(--jg-papel, #f6f7ff) 40%, var(--jg-papel, #f6f7ff) 60%, var(--jg-papel, #e3e7ff)); box-shadow: inset 0 3px 10px color-mix(in srgb, var(--jg-3, #0400bc) 18%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 30%, transparent); } [data-ruta="juegos"] .jx-jp-ventana::after { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; margin-top: -1px; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--jg-3, #0400bc) 0%, transparent), color-mix(in srgb, var(--jg-3, #0400bc) 40%, transparent) 20%, color-mix(in srgb, var(--jg-3, #0400bc) 40%, transparent) 80%, color-mix(in srgb, var(--jg-3, #0400bc) 0%, transparent)); } [data-ruta="juegos"] .jx-jp-ventana .jx-marca { background: var(--jg-3, #0400bc); } [data-ruta="juegos"] .jx-jp-ventana .jx-marca.izq { left: 7px; } [data-ruta="juegos"] .jx-jp-ventana .jx-marca.der { right: 7px; } [data-ruta="juegos"] .jx-jackpot .jx-rodillo { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 22%, transparent), inset 0 12px 22px -14px color-mix(in srgb, var(--jg-3, #0400bc) 30%, transparent); } /* palanca al costado (también hace girar) */ [data-ruta="juegos"] .jx-jp-palanca { position: absolute; top: 30%; right: -34px; width: 30px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; } [data-ruta="juegos"] .jx-jp-palanca::after { content: ""; position: absolute; left: -10px; bottom: -10px; width: 26px; height: 30px; border-radius: 10px; background: linear-gradient(160deg, #fff, var(--jg-papel, #dfe3ff)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 35%, transparent), 0 8px 14px -8px color-mix(in srgb, var(--jg-3, #0400bc) 50%, transparent); } .jx-jp-barra { position: absolute; left: 50%; top: 18px; bottom: 4px; width: 8px; margin-left: -4px; border-radius: 4px; transform-origin: 50% 100%; background: linear-gradient(90deg, var(--jg-chispa, #b3baff), #fff 45%, var(--jg-chispa, #b3baff)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 45%, transparent); } .jx-jp-bola { position: absolute; left: 50%; top: 0; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--jg-1, #8a93ff), var(--jg-2, #0012fd) 55%, var(--jg-3, #0400bc)); box-shadow: inset 0 2px 3px rgba(255,255,255,.6), 0 9px 16px -6px color-mix(in srgb, var(--jg-3, #0400bc) 70%, transparent); } [data-ruta="juegos"] .jx-jp-palanca:hover .jx-jp-bola { filter: brightness(1.12); } @keyframes jx-barra { 40% { transform: scaleY(.42); } } @keyframes jx-bola { 40% { transform: translateY(80px); } } @media (prefers-reduced-motion: no-preference) { .jx-jackpot:has(.jx-rodillo.gira) .jx-jp-luces i { animation: jx-luz .5s steps(2) infinite; } .jx-jackpot:has(.jx-rodillo.gira) .jx-jp-luces i:nth-child(odd) { animation-delay: .25s; } .jx-jackpot:has(.jx-rodillo.gira) .jx-jp-barra { animation: jx-barra .8s ease-in-out; } .jx-jackpot:has(.jx-rodillo.gira) .jx-jp-bola { animation: jx-bola .8s ease-in-out; } [data-ruta="juegos"] .jx-jackpot.gana { animation: jx-brillo-azul 1.6s ease-out; } } /* logos de los premios: ilustración a dos tonos, sin ficha ni figura detrás */ [data-ruta="juegos"] .jx-fig.jx-arte { width: var(--t); height: var(--t); padding: 0; border-radius: 0; clip-path: none; background: none; box-shadow: none; } [data-ruta="juegos"] .jx-fig.jx-arte svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--jg-3, #0400bc) 22%, transparent)); } [data-ruta="juegos"] .jx-jackpot .jx-sim { --t: 52px; gap: 6px; } [data-ruta="juegos"] .jx-jackpot .jx-sim b { font-size: 17px; color: var(--jg-3, #0400bc); } [data-ruta="juegos"] .jx-sim.mini { --t: 32px; } [data-ruta="juegos"] .jx-ganado .jx-sim.mini { --t: 54px; } @media (max-width: 760px) { [data-ruta="juegos"] .jx-jackpot { width: 100%; padding: 12px 12px 16px; } [data-ruta="juegos"] .jx-jp-palanca { display: none; } [data-ruta="juegos"] .jx-jp-titulo { font-size: 32px; } .jx-jp-luces i { width: 6px; height: 6px; } [data-ruta="juegos"] .jx-jp-ventana { padding: 10px 18px; } [data-ruta="juegos"] .jx-jackpot .jx-sim { --t: 42px; } } :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-jackpot, .jx-jp-letrero, .jx-jp-ventana) { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 18%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-jp-titulo { color: var(--jg-chispa, #b3baff); text-shadow: none; } /* ===================================================================================================================== Jackpot 2.ª vuelta (12-oct): la máquina es la protagonista (centrada y más grande), con la tabla de premios adentro, reflejo de vidrio en la ventana y los premios de la línea resaltados al ganar. ===================================================================================================================== */ [data-ruta="juegos"] .jx-ruleta .jx-ru-cuerpo { grid-template-columns: minmax(0, 1fr); justify-items: center; } [data-ruta="juegos"] .jx-ruleta .jx-ru-juego { width: 100%; } [data-ruta="juegos"] .jx-jackpot { width: min(100% - 44px, 580px); margin-top: 10px; padding: 18px 20px 18px; } [data-ruta="juegos"] .jx-jackpot .jx-rodillo { --celda: 108px; --asoma: 30px; } [data-ruta="juegos"] .jx-jackpot .jx-sim { --t: 62px; } [data-ruta="juegos"] .jx-jackpot .jx-sim b { font-size: 18px; } [data-ruta="juegos"] .jx-jp-titulo { font-size: 48px; } /* reflejo del vidrio sobre los rodillos */ [data-ruta="juegos"] .jx-jp-ventana::before { content: ""; position: absolute; inset: 6px; z-index: 3; border-radius: 18px; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 64%, rgba(255,255,255,.2) 74%, rgba(255,255,255,0) 84%); } /* al ganar, los 3 premios de la línea se iluminan */ [data-ruta="juegos"] .jx-jackpot .jx-tira.quieta .jx-celda:nth-child(2) { position: relative; } [data-ruta="juegos"] .jx-jackpot.gana .jx-tira.quieta .jx-celda:nth-child(2)::before { content: ""; position: absolute; inset: 6px 8px; z-index: -1; border-radius: 18px; background: radial-gradient(circle, color-mix(in srgb, var(--jg-1, #6c78ff) 32%, transparent), color-mix(in srgb, var(--jg-1, #6c78ff) 0%, transparent) 72%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jg-1, #6c78ff) 50%, transparent); animation: jx-premio-luz 1.7s ease-out both; } @keyframes jx-premio-luz { 0% { opacity: 0; transform: scale(.85); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { [data-ruta="juegos"] .jx-jackpot.gana .jx-tira.quieta .jx-celda:nth-child(2)::before { animation: none; } } /* tabla de premios dentro de la máquina */ [data-ruta="juegos"] .jx-jp-pagos { margin-top: 14px; padding: 12px 12px 10px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--jg-papel, #f0f2ff) 92%, transparent), color-mix(in srgb, var(--jg-papel, #e2e6ff) 72%, transparent)); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 30%, transparent); } .jx-jp-pagos-t { margin: 0 0 8px; text-align: center; font: 600 11px/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--jg-3, #0400bc) 78%, transparent); } .jx-jp-pagos ul { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; } .jx-jp-pagos li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 2px 7px; border-radius: 12px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #6c78ff) 20%, transparent); } [data-ruta="juegos"] .jx-jp-pagos li .jx-sim.mini { --t: 36px; } .jx-jp-pagos li b { font: 400 19px/1 var(--font-display); letter-spacing: .02em; color: var(--jg-3, #0400bc); } .jx-jp-pago-n { font: 600 10.5px/1.2 var(--font); color: #3a3d55; text-align: center; } .jx-jp-nota { margin: 8px 4px 0; font-size: 11.5px; line-height: 1.4; color: #5d6078; text-align: center; } /* debajo de la máquina: resultado, botón y premios guardados, centrados */ [data-ruta="juegos"] .jx-ruleta .jx-resultado, [data-ruta="juegos"] .jx-ruleta .jx-accion, [data-ruta="juegos"] .jx-ruleta .jx-inventario { width: min(100%, 580px); justify-self: center; } [data-ruta="juegos"] .jx-ruleta .jx-accion { display: flex; justify-content: center; } @media (max-width: 760px) { [data-ruta="juegos"] .jx-jackpot { width: 100%; padding: 12px 10px 12px; } [data-ruta="juegos"] .jx-jackpot .jx-rodillo { --celda: 86px; --asoma: 24px; } [data-ruta="juegos"] .jx-jackpot .jx-sim { --t: 46px; } [data-ruta="juegos"] .jx-jp-titulo { font-size: 34px; } .jx-jp-pagos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-jp-pagos, .jx-jp-pagos li) { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 18%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-jp-pagos li b, .jx-jp-pagos-t) { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-jp-pago-n, .jx-jp-nota) { color: var(--jg-chispa, #c9cdf0); } /* [CERT] 12-oct · La flecha de volver FUERA de la tarjeta (el dueño: «la instrucción de la flecha es en toda la página»): en el margen izquierdo, pegada arriba y a la altura de la tarjeta, como en el programa, la clase y el examen. Donde no cabe en el margen (ventanas angostas), sigue arriba con poco espacio. El «✕ Salir» de la partida no es la flecha y se queda donde está. */ [data-ruta="juegos"] :is(.partida.p2-intro, .partida.p2-reto, .partida.jx-ruleta) { position: relative; } [data-ruta="juegos"] .partida.p2-reto > .volver { justify-self: start; margin: 0 0 4px; } @media (min-width: 1180px) { [data-ruta="juegos"] :is(.partida.p2-intro, .partida.p2-reto) > .volver { position: absolute; left: -62px; top: 0; margin: 0; } [data-ruta="juegos"] .partida.p2-intro { grid-template-areas: "tit fig" "txt fig" "premio fig" "ener fig" "btn fig"; } } @media (min-width: 1240px) { [data-ruta="juegos"] .partida.jx-ruleta > .volver { position: absolute; left: -62px; top: 0; margin: 0; } } /* [CERT] 13-oct · La flecha de volver SIEMPRE a la izquierda de la tarjeta, también en ventanas angostas (el dueño: «en todas partes a la izquierda y no encima de los cuadros»). Antes, por debajo de 1180 px (1240 px en la Ruleta), quedaba encima de la tarjeta. Desde 901 px, la tarjeta se corre a la derecha y la flecha queda en su margen, pegada arriba. El «✕ Salir» de la partida no cambia. */ @media (min-width: 901px) and (max-width: 1179.98px) { [data-ruta="juegos"] :is(.partida.p2-intro, .partida.p2-reto) { margin-left: 62px; } [data-ruta="juegos"] :is(.partida.p2-intro, .partida.p2-reto) > .volver { position: absolute; left: -62px; top: 0; margin: 0; } [data-ruta="juegos"] .partida.p2-intro { grid-template-areas: "tit fig" "txt fig" "premio fig" "ener fig" "btn fig"; } } @media (min-width: 901px) and (max-width: 1239.98px) { [data-ruta="juegos"] .partida.jx-ruleta { margin-left: 62px; } [data-ruta="juegos"] .partida.jx-ruleta > .volver { position: absolute; left: -62px; top: 0; margin: 0; } } /* [CERT] 13-oct · íconos de los juegos con la receta de Misiones (figura() en app.js): en oscuro, el halo más suave, como en Misiones */ :root[data-theme="dark"] .jg-halo { opacity: .38; } /* [CERT] 13-oct · Ahorcado de términos (reemplaza «Adivina el término»). Marcado: app.js juegoAhorcado(). Prefijo ah-. La carta lleva la pista y las casillas del término; debajo, 6 vidas y el teclado A–Z + Ñ (también se juega con el teclado físico). */ [data-ruta="juegos"] .ah-carta { padding-top: 40px; gap: 18px; } [data-ruta="juegos"] .ah-pista { max-width: 46ch; margin: 0; font: 500 clamp(17px, 1.9vw, 21px)/1.45 var(--font); color: #11111a; text-wrap: pretty; } [data-ruta="juegos"] .ah-pista b { color: var(--jg-3, #0400bc); } .ah-palabra { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; } .ah-bloque { display: inline-flex; gap: 6px; } .ah-casilla, .ah-signo { display: grid; place-items: center; width: 38px; height: 46px; font: 400 30px/1 var(--font-display); letter-spacing: .02em; } .ah-casilla { border-radius: 10px; color: var(--jg-3, #0400bc); background: rgba(255,255,255,.7); box-shadow: inset 0 -3px 0 var(--jg-1, #6c78ff), 0 6px 14px -10px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); } .ah-casilla.ver { animation: ahVoltea .35s cubic-bezier(.3,1.5,.5,1); } .ah-casilla.perdida { color: #c2272d; box-shadow: inset 0 -3px 0 #ff7a7e; } .ah-signo { width: auto; min-width: 14px; color: #555a7a; } @keyframes ahVoltea { from { transform: rotateX(90deg); } } .ah-vidas { display: inline-flex; gap: 8px; } .ah-vida { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9ea1, #e5484d 60%, #a1161c); box-shadow: 0 3px 6px -2px rgba(161,22,28,.6); transition: transform .3s, opacity .3s; } .ah-vida.gastada { opacity: .22; transform: scale(.7); filter: grayscale(1); } .ah-teclado { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; max-width: 620px; margin: 22px auto 0; } .ah-tecla { min-height: 46px; border: 0; border-radius: 12px; font: 700 17px/1 var(--font); color: var(--jg-3, #0400bc); cursor: pointer; background: rgba(255,255,255,.75); box-shadow: inset 0 1px 1px #fff, 0 4px 0 var(--jg-chispa, #c9cdf7), 0 10px 18px -12px color-mix(in srgb, var(--jg-3, #0400bc) 60%, transparent); transition: transform .12s, box-shadow .12s; } .ah-tecla:hover:not(:disabled) { transform: translateY(-2px); } .ah-tecla:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 1px #fff, 0 1px 0 var(--jg-chispa, #c9cdf7); } .ah-tecla:focus-visible { outline: 3px solid var(--jg-1, #6c78ff); outline-offset: 2px; } .ah-tecla:disabled { cursor: default; } .ah-tecla.si { color: #fff; background: #12805c; box-shadow: none; } .ah-tecla.no { color: #9a9cb5; background: rgba(255,255,255,.35); box-shadow: none; text-decoration: line-through; } :root[data-theme="dark"] [data-ruta="juegos"] :is(.ah-pista) { color: var(--text); } :root[data-theme="dark"] [data-ruta="juegos"] .ah-pista b { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] .ah-casilla { color: var(--jg-papel, #e6e8ff); background: rgba(255,255,255,.08); box-shadow: inset 0 -3px 0 var(--jg-1, #8b93ff); } :root[data-theme="dark"] .ah-casilla.perdida { color: #ff9ea1; box-shadow: inset 0 -3px 0 #ff7a7e; } :root[data-theme="dark"] .ah-signo { color: #a9adcf; } :root[data-theme="dark"] .ah-tecla { color: var(--jg-papel, #e6e8ff); background: rgba(255,255,255,.1); box-shadow: 0 4px 0 rgba(0,0,0,.35); } :root[data-theme="dark"] .ah-tecla.si { color: #fff; background: #12805c; box-shadow: none; } :root[data-theme="dark"] .ah-tecla.no { color: #6d7096; background: rgba(255,255,255,.04); box-shadow: none; } @media (max-width: 600px) { .ah-palabra { gap: 8px 14px; } .ah-bloque { gap: 4px; } .ah-casilla, .ah-signo { width: 26px; height: 34px; font-size: 22px; } .ah-signo { width: auto; min-width: 8px; } .ah-teclado { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; } .ah-tecla { min-height: 42px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .ah-casilla.ver, .ah-vida, .ah-tecla { animation: none; transition: none; } } /* ranking.css */ /* Campus Remotos Academy — Ranking (rediseño 13-oct: el dueño eligió la «Limpia» con «Los 3 primeros», sin barras). Va antes de oscuro-arreglos.css. Una sola columna con aire: título y oso grande, tu puesto en una tarjeta, los 3 primeros y la lista desde el #4 sin barras, sin columnas de más y sin avatares. Pocos colores: azul de marca para los números; la medalla solo en el anillo y el número del podio. */ /* ---------- Vidrio (receta aprobada de la Sala) ---------- */ :root:not([data-theme="dark"]) [data-ruta="ranking"] :is(.rkg-tu, .rkg-podio, .rkg-tabla) { position: relative; isolation: isolate; border: 0; color: #11111a; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.18), 0 2px 8px rgba(4,0,188,.06), 0 30px 60px -34px rgba(4,0,188,.5); } :root:not([data-theme="dark"]) [data-ruta="ranking"] :is(.rkg-tu, .rkg-podio, .rkg-tabla)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.16) 84%, rgba(0,18,253,.3) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* ---------- Una columna con aire ---------- */ [data-ruta="ranking"] :is(.rkg-cab, .rkg-tu, .rkg-podio, .rkg-tabla, .rkg-pie) { max-width: 860px; margin-left: auto; margin-right: auto; } /* cabecera: título grande y el oso */ .rkg-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; margin-top: 4px; } .rkg-ceja { margin: 0 0 8px; font: 600 11.5px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: rgba(4,0,188,.6); } .rkg-titulo { margin: 0; font: 400 84px/.84 var(--font-display); letter-spacing: .02em; color: #0400bc; } .rkg-sub { max-width: 430px; margin: 16px 0 0; font-size: 15px; line-height: 1.65; color: #4a5068; } .rkg-controles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) { display: inline-flex; gap: 2px; padding: 4px; border: 0; border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(108,120,255,.28); } [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 600 13.5px/1 var(--font); color: #2a2f6b; cursor: pointer; transition: background .15s, color .15s; } [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) button:hover { background: rgba(108,120,255,.1); } [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #2433ff 0%, #0400bc 100%); } [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) button:focus-visible { outline: 3px solid #0012fd; outline-offset: 2px; } .rkg-oso { display: block; width: 250px; height: 250px; margin-bottom: -34px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(4,0,188,.18)); pointer-events: none; position: relative; z-index: 1; } /* tu puesto */ [data-ruta="ranking"] .rkg-tu { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 40px; padding: 28px 34px; border-radius: 28px; margin-top: 0; } .rkg-etq { display: block; font: 600 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: rgba(4,0,188,.6); } .rkg-cifra { margin: 10px 0 0; font: 400 112px/.8 var(--font-display); color: #0400bc; } .rkg-xp { margin: 10px 0 0; font: 400 26px/1 var(--font-display); letter-spacing: .04em; color: #6c78ff; } .rkg-tu-meta p { margin: 0; font-size: 16px; line-height: 1.6; color: #2a2f45; } .rkg-tu-meta b { color: #0400bc; } /* los 3 primeros: 2 · 1 · 3 (en el código van 1, 2, 3 para los lectores de pantalla); la medalla solo en el anillo y el número */ [data-ruta="ranking"] .rkg-podio { margin-top: 22px; padding: 20px 24px 22px; border-radius: 26px; } .rkg-podio .rkg-etq { display: flex; align-items: center; gap: 7px; } .rkg-podio .rkg-etq .ic { flex: none; color: #0012fd; } .rkg-podio ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; max-width: 580px; margin: 6px auto 0; padding: 0; list-style: none; } .rkg-podio li { --med: #d39a12; display: grid; justify-items: center; gap: 3px; min-width: 0; text-align: center; } .rkg-podio li.p1 { order: 2; } .rkg-podio li.p2 { order: 1; --med: #7f8aa6; } .rkg-podio li.p3 { order: 3; --med: #bd6f38; } .rkg-podio .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--med), 0 12px 20px -10px rgba(4,0,188,.55); margin-bottom: 6px; } .rkg-podio li b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #11111a; } .rkg-podio-xp { font: 400 17px/1 var(--font-display); letter-spacing: .04em; color: #3a3d55; } .rkg-podio li i { font: 400 44px/1 var(--font-display); font-style: normal; color: var(--med); } .rkg-podio li.p1 i { font-size: 58px; } .rkg-podio li.yo b { color: #0012fd; } /* la lista desde el #4: puesto, nombre y XP; nada más */ [data-ruta="ranking"] .rkg-tabla { margin-top: 22px; padding: 10px 14px; border-radius: 26px; } .rkg-lista { margin: 0; padding: 0; list-style: none; } .rkg-f { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-radius: 14px; } .rkg-f + .rkg-f { box-shadow: inset 0 1px 0 rgba(108,120,255,.12); } .rkg-pos { font: 400 24px/1 var(--font-display); color: #9aa3ff; } .rkg-n { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; color: #1c2036; } .rkg-pxp { font: 400 22px/1 var(--font-display); letter-spacing: .03em; color: #0400bc; white-space: nowrap; } .rkg-pxp small { font-size: 14px; color: #9aa3ff; } .rkg-f.yo, .rkg-f.yo + .rkg-f { box-shadow: none; } .rkg-f.yo { background: rgba(0,18,253,.06); } .rkg-f.yo .rkg-pos { color: #0012fd; } .rkg-f.yo .rkg-n { font-weight: 700; color: #0400bc; } .rkg-chip { padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1 var(--font); letter-spacing: .04em; color: #0012fd; background: #eef0ff; } .rkg-salto { height: 14px; margin: 4px 70px; border-top: 1px dashed rgba(108,120,255,.45); } .rkg-pie { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 13.5px; color: #6b7387; text-align: center; } .rkg-pie .ic { flex: none; color: #6c78ff; } /* ---------- Celular ---------- */ @media (max-width: 700px) { .rkg-cab { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt oso" "ctl ctl"; } .rkg-cab-txt { display: contents; } .rkg-ceja, .rkg-titulo, .rkg-sub { grid-column: 1; } .rkg-titulo { font-size: 60px; } .rkg-oso { grid-column: 2; grid-row: 1 / span 3; width: 130px; height: 130px; margin: 0; align-self: start; } .rkg-controles { grid-column: 1 / -1; margin: 6px 0 10px; } [data-ruta="ranking"] .rkg-tu { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 16px; } .rkg-cifra { font-size: 88px; } [data-ruta="ranking"] .rkg-tabla { padding: 6px 8px; } .rkg-f { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 0 10px; min-height: 50px; } .rkg-pie { display: block; padding: 0 12px; } .rkg-pie .ic { vertical-align: -2px; margin-right: 4px; } } /* ---------- Modo oscuro ---------- */ :root[data-theme="dark"] [data-ruta="ranking"] :is(.rkg-tu, .rkg-podio, .rkg-tabla) { position: relative; border: 0; color: #eef0ff; background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 26px 50px -30px rgba(0,0,0,.8); } :root[data-theme="dark"] :is(.rkg-titulo, .rkg-cifra, .rkg-tu-meta b, .rkg-pxp, .rkg-f.yo .rkg-n) { color: #fff; } :root[data-theme="dark"] :is(.rkg-ceja, .rkg-etq) { color: #b3baff; } :root[data-theme="dark"] :is(.rkg-sub, .rkg-tu-meta p, .rkg-pie) { color: #c9ccec; } :root[data-theme="dark"] .rkg-n { color: #eef0ff; } :root[data-theme="dark"] :is(.rkg-xp, .rkg-pos, .rkg-pxp small) { color: #8f98ff; } :root[data-theme="dark"] .rkg-f + .rkg-f { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } :root[data-theme="dark"] .rkg-f.yo { background: rgba(58,71,245,.22); } :root[data-theme="dark"] .rkg-f.yo .rkg-pos { color: #fff; } :root[data-theme="dark"] .rkg-chip { color: #fff; background: #2a37e8; } :root[data-theme="dark"] [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(179,186,255,.22); } :root[data-theme="dark"] [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) button { color: #dfe2ff; } :root[data-theme="dark"] [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #4b57ff, #2a37e8); } :root[data-theme="dark"] .rkg-pie .ic { color: #8f98ff; } :root[data-theme="dark"] .rkg-podio li { --med: #f0b941; } :root[data-theme="dark"] .rkg-podio li.p2 { --med: #c3cbe0; } :root[data-theme="dark"] .rkg-podio li.p3 { --med: #e39a68; } :root[data-theme="dark"] .rkg-podio .avatar { box-shadow: 0 0 0 3px #15172b, 0 0 0 5.5px var(--med); } :root[data-theme="dark"] .rkg-podio li b { color: #fff; } :root[data-theme="dark"] .rkg-podio-xp { color: #c9ccec; } :root[data-theme="dark"] .rkg-podio .rkg-etq .ic { color: #8f98ff; } /* [CERT] 13-oct · rangos: tu nivel con su insignia (texto, sin barra) y la insignia al pie */ .rkg-nivel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: #3a3d55; } .rkg-nivel .rng-ins { width: 48px; height: 48px; flex: none; } /* 13-oct: el ícono del rango, más grande */ .rkg-nivel b { color: #0400bc; font-weight: 700; } .rkg-pie .rng-ins { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: -4px; filter: none; } :root[data-theme="dark"] .rkg-nivel { color: #c9ccec; } :root[data-theme="dark"] .rkg-nivel b { color: #fff; } /* [CERT] 13-oct · la insignia de rango junto al avatar de cada uno de los 3 primeros */ .rkg-av { position: relative; display: inline-grid; margin-bottom: 22px; } .rkg-podio .rkg-av .avatar { margin-bottom: 0; } .rkg-podio-ins { position: absolute; right: -40px; bottom: -14px; display: block; } .rkg-podio-ins .rng-ins { width: 58px; height: 58px; } .rkg-podio li.p1 .rkg-podio-ins .rng-ins { width: 68px; height: 68px; } .rkg-podio li.p1 .rkg-podio-ins { right: -46px; bottom: -16px; } /* [CERT] 13-oct · el aviso «¡Subiste al #N!» con el panda de tu puesto (abajo a la derecha; en el celular, sobre el menú de abajo) */ .rk-sube { position: fixed; right: 24px; bottom: 24px; z-index: 9000; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: min(380px, calc(100vw - 24px)); padding: 12px 14px 12px 10px; border-radius: 22px; color: #11111a; background: radial-gradient(120% 140% at 0% 0%, #fff 0%, rgba(255,255,255,0) 58%), linear-gradient(150deg, #fbfbff 0%, #f1f2ff 60%, #e6e8ff 100%); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1px rgba(108,120,255,.3), 0 2px 8px rgba(4,0,188,.08), 0 26px 50px -22px rgba(4,0,188,.55); animation: rk-sube-entra .5s cubic-bezier(.2,.9,.3,1.2) both; } .rk-sube.sale { animation: rk-sube-sale .26s ease-in both; } @keyframes rk-sube-entra { from { opacity: 0; transform: translateY(18px) scale(.96); } } @keyframes rk-sube-sale { to { opacity: 0; transform: translateY(12px); } } .rk-sube-oso { width: 76px; height: 76px; margin: -24px 0 -6px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(4,0,188,.22)); animation: rk-sube-salta .9s .25s ease-out both; } @keyframes rk-sube-salta { 0% { transform: translateY(10px) scale(.9); } 45% { transform: translateY(-8px) scale(1.04); } 100% { transform: none; } } .rk-sube-txt { display: grid; gap: 2px; min-width: 0; } .rk-sube-etq { display: flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: rgba(4,0,188,.7); } .rk-sube-etq .ic { color: #0012fd; } .rk-sube-txt b { font: 400 30px/.95 var(--font-display); letter-spacing: .02em; color: #0400bc; } .rk-sube-txt > span:not(.rk-sube-etq) { font-size: 13.5px; line-height: 1.4; color: #3a3d55; } .rk-sube-ir { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font: 600 13px/1.3 var(--font); color: #0012fd; text-decoration: none; } .rk-sube-ir:hover { text-decoration: underline; } .rk-sube-x { align-self: start; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgba(4,0,188,.06); color: #3a3d55; cursor: pointer; } .rk-sube-x:focus-visible, .rk-sube-ir:focus-visible { outline: 3px solid #0012fd; outline-offset: 2px; } @media (max-width: 640px) { .rk-sube { left: 12px; right: 12px; width: auto; bottom: calc(78px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .rk-sube, .rk-sube.sale, .rk-sube-oso { animation: none; } } :root[data-theme="dark"] .rk-sube { color: #eef0ff; background: linear-gradient(150deg, #262c86 0%, #171b5a 100%); box-shadow: inset 0 0 0 1px rgba(179,186,255,.28), 0 26px 50px -22px rgba(0,0,0,.85); } :root[data-theme="dark"] .rk-sube-txt b { color: #fff; } :root[data-theme="dark"] .rk-sube-etq { color: #b3baff; } :root[data-theme="dark"] .rk-sube-txt > span:not(.rk-sube-etq) { color: #c9ccec; } :root[data-theme="dark"] .rk-sube-ir { color: #b3baff; } :root[data-theme="dark"] .rk-sube-x { background: rgba(255,255,255,.08); color: #dfe2ff; } /* mapa-calmo.css */ /* [CERT] 13-oct · Mapa de progreso sin ruido (el dueño: «el de la certificación tiene mucho texto; sin quitar nada, que no haga tanto ruido visual»). Solo la serpentina de áreas (.mp-calmo, app.js: ROUTES.mapa). Mismo camino y mismos datos; cambia la jerarquía: - la etiqueta de cada área es texto suave, sin pastilla (el estado ya lo dice el círculo); solo «donde vas» sigue en amarillo; - «Programa N -» más suave que el nombre; - el examen va en una línea debajo de su área; la caja sobre el camino sale al pasar el ratón (como la del examen cerrado). */ .mp-mapa.mp-calmo .mp-info { gap: 3px; } .mp-mapa.mp-calmo .mp-p .mp-chip { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-3); } .mp-mapa.mp-calmo .mp-p.is-actual .mp-chip { padding: 3px 10px; border: 1px solid #fff3a0; border-radius: 999px; color: #11111a; background: #ffe400; box-shadow: 0 4px 10px -6px rgba(150,110,0,.6); } .mp-mapa.mp-calmo .mp-p.is-gold .mp-chip, .mp-mapa.mp-calmo .mp-fin .mp-chip { color: #8a6200; } .mp-mapa.mp-calmo .mp-pre { font-weight: 500; color: var(--text-3); } .mp-mapa.mp-calmo .mp-clases { font-size: 12px; } /* el examen, debajo de su área: un cuadrito como el del camino y el resultado en azul */ .mp-exl { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-3); } .mp-exl i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; border-radius: 5px; color: #fff; background: radial-gradient(120% 120% at 30% 18%, #6b76ff, #0012fd 55%, #0400bc); box-shadow: 0 3px 6px -3px rgba(0,18,253,.7); } .mp-exl i .ic { width: 11px; height: 11px; } .mp-exl-r { font-weight: 600; color: #0400bc; } .mp-exl.is-mal i { color: #0400bc; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(108,120,255,.7); } .mp-exl.is-oro i { color: #3b2a00; background: radial-gradient(120% 120% at 30% 18%, #fff3cc, #f6d365 55%, #e0a526); box-shadow: 0 3px 6px -3px rgba(160,110,0,.7); } .mp-exl.is-oro .mp-exl-r { color: #7a5600; } /* la caja del examen sobre el camino: solo al pasar el ratón o con el teclado */ .mp-mapa.mp-calmo .mp-ex .mp-ex-txt { opacity: 0; pointer-events: none; transition: opacity .2s; } .mp-mapa.mp-calmo .mp-ex:hover .mp-ex-txt, .mp-mapa.mp-calmo .mp-ex:focus-visible .mp-ex-txt { opacity: 1; } /* en el celular: el texto usa el ancho que queda hasta el borde (8 px), el nombre va entero (antes se cortaba con «…») y el examen en dos renglones cortos (examen / resultado), para que el bloque no llegue al cuadrito del examen ni a los puntitos del camino */ @media (max-width: 560px) { .mp-mapa.mp-calmo .mp-info { width: calc(72cqw - 52px); } .mp-mapa.mp-calmo .mp-p.is-actual .mp-info { width: calc(72cqw - 58px); } .mp-mapa.mp-calmo .mp-info { gap: 2px; } .mp-mapa.mp-calmo .mp-info b { line-height: 1.25; -webkit-line-clamp: 5; } .mp-mapa.mp-calmo .mp-p .mp-chip { font-size: 10.5px; line-height: 1.3; } .mp-mapa.mp-calmo .mp-p.is-actual .mp-chip { padding: 2px 8px; } .mp-mapa.mp-calmo .mp-clases { font-size: 11.5px; line-height: 1.3; } .mp-exl { margin-top: 1px; font-size: 11px; line-height: 1.25; } .mp-exl-sep { display: none; } .mp-exl-r { display: block; } } @media (prefers-reduced-motion: reduce) { .mp-mapa.mp-calmo .mp-ex .mp-ex-txt { transition: none; } } /* modo oscuro */ :root[data-theme="dark"] .mp-mapa.mp-calmo .mp-p .mp-chip { color: var(--text-3); background: none; border: 0; box-shadow: none; } :root[data-theme="dark"] .mp-mapa.mp-calmo .mp-p.is-actual .mp-chip { color: #11111a; background: #ffe400; border: 1px solid #ffe400; } :root[data-theme="dark"] .mp-mapa.mp-calmo .mp-p.is-gold .mp-chip, :root[data-theme="dark"] .mp-mapa.mp-calmo .mp-fin .mp-chip { color: #f6d365; } :root[data-theme="dark"] .mp-exl-r { color: #b3baff; } :root[data-theme="dark"] .mp-exl i { background: radial-gradient(120% 120% at 30% 18%, #9aa2ff, #4a57ff 55%, #2a37e8); box-shadow: none; } :root[data-theme="dark"] .mp-exl.is-mal i { color: #c9ceff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(179,186,255,.4); } :root[data-theme="dark"] .mp-exl.is-oro i { color: #5a3d00; background: radial-gradient(120% 120% at 30% 18%, #fff3cc, #f6d365 55%, #e0a526); } :root[data-theme="dark"] .mp-exl.is-oro .mp-exl-r { color: #f6d365; } /* rangos.css */ /* Campus Remotos Academy — Rangos (propuesta 13-oct): insignias por nivel y la animación de subida de nivel (la insignia se reforja). */ .rng-ins { display: block; overflow: visible; filter: drop-shadow(0 6px 10px rgba(4,0,188,.22)); } /* la capa de la subida de nivel: noche de marca con vidrio, la escena al centro */ .rng-capa { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; background: radial-gradient(60% 55% at 50% 42%, rgba(42,55,232,.55) 0%, rgba(4,0,188,.55) 45%, rgba(3,2,40,.92) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; text-align: center; animation: rng-entra .25s ease-out both; } /* 14-oct · auditoría: en pantallas bajas (celular en horizontal) la escena no cabe y, centrada, se cortaba arriba y abajo: «Seguir» quedaba fuera de la vista. Ahí empieza arriba y se puede bajar. */ @media (max-height: 700px) { .rng-capa { align-content: start; overflow-y: auto; overscroll-behavior: contain; } } /* 14-oct · «Cómo subir de nivel» (Perfil y Ranking): vidrio fino con filo de luz, cinco filas cortas, sin adornos */ .rng-como { margin: 12px 0 0; padding: 10px 14px 12px; border: 1px solid transparent; border-radius: 14px; text-align: left; background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.26)) padding-box, linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, rgba(0,18,253,.24)) border-box; box-shadow: inset 0 -10px 18px -14px rgba(4,0,188,.18), 0 14px 28px -22px rgba(4,0,188,.45); } .rng-como p.rng-como-t { margin: 0 0 6px; font: 700 12px/1.3 var(--font, "Poppins", system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #4a52c8; } .rng-como ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 3px 22px; } .rng-como ul li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 1.55; color: #4a5268; } .rng-como li b { color: #0400bc; font-weight: 700; white-space: nowrap; } .per-carrera > .rng-como { grid-column: 1 / -1; margin-top: 0; } /* en el Perfil, debajo de la insignia y del nivel, a todo el ancho */ :root[data-theme="dark"] .rng-como { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) padding-box, linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.06)) border-box; box-shadow: none; } :root[data-theme="dark"] .rng-como p.rng-como-t, :root[data-theme="dark"] .rng-como li b { color: #b3baff; } :root[data-theme="dark"] .rng-como li { color: #c0c4e5; } .rng-capa.rng-sale { animation: rng-sale .22s ease-in both; } @keyframes rng-entra { from { opacity: 0; } to { opacity: 1; } } @keyframes rng-sale { to { opacity: 0; } } .rng-escena { position: relative; width: 300px; height: 300px; display: grid; place-items: center; grid-template: 100% / 100%; } /* 15-oct · la celda mide lo mismo que la escena: si no, crecía con la pieza más grande (320 px) y en el teléfono la insignia quedaba 40 px corrida a la derecha y montada sobre el título */ .rng-escena > * { grid-area: 1 / 1; } .rng-nueva { opacity: 0; } .rng-halo { width: 300px; height: 300px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(179,186,255,.75) 0%, rgba(108,120,255,.35) 38%, rgba(108,120,255,0) 70%); } .rng-oro .rng-halo { background: radial-gradient(circle, rgba(255,224,138,.8) 0%, rgba(245,197,66,.32) 40%, rgba(245,197,66,0) 70%); } .rng-aro { width: 200px; height: 200px; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 40px 10px rgba(179,186,255,.9); } .rng-oro .rng-aro { box-shadow: 0 0 0 4px #ffe08a, 0 0 40px 12px rgba(245,197,66,.85); } .rng-chispas { position: relative; width: 0; height: 0; } /* las chispas nacen en el centro de la escena */ .rng-chispas i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; opacity: 0; background: #fff; box-shadow: 0 0 10px 3px rgba(179,186,255,.95); } .rng-oro .rng-chispas i { box-shadow: 0 0 10px 3px rgba(255,210,94,.95); } .rng-chispas i:nth-child(3n) { width: 5px; height: 5px; } .rng-sube { margin: 4px 0 0; font: 600 13px/1 var(--font, Poppins, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: #dfe2ff; opacity: 0; } .rng-oro .rng-sube { color: #ffe08a; } .rng-nivel { margin: 0; font: 400 64px/1 var(--font-display, "Bebas Neue", Impact, sans-serif); letter-spacing: .03em; opacity: 0; } .rng-nivel b { font-weight: 400; } .rng-seguir { margin-top: 14px; min-width: 160px; min-height: 46px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; opacity: 0; font: 600 15px/1 var(--font, Poppins, sans-serif); color: #0400bc; background: linear-gradient(180deg, #ffffff, #e3e6ff); box-shadow: 0 12px 28px -12px rgba(0,0,0,.6); } .rng-seguir:focus-visible { outline: 3px solid #ffe08a; outline-offset: 3px; } @media (max-width: 480px) { .rng-escena { width: 240px; height: 240px; } .rng-nivel { font-size: 52px; } } @media (prefers-reduced-motion: reduce) { .rng-capa, .rng-capa.rng-sale { animation: none; } } /* la evolución: la insignia anterior → la nueva, debajo del nivel */ .rng-evo { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; opacity: 0; } .rng-evo-paso { display: grid; justify-items: center; gap: 4px; } .rng-evo-paso small { font: 600 12px/1 var(--font, Poppins, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #c9ccec; } .rng-evo-paso:not(.nueva) .rng-ins { opacity: .6; filter: grayscale(.35) drop-shadow(0 6px 10px rgba(0,0,0,.35)); } .rng-evo-paso.nueva small { color: #fff; } .rng-oro .rng-evo-paso.nueva small { color: #ffe08a; } .rng-flecha { font: 400 30px/1 var(--font-display, "Bebas Neue", Impact, sans-serif); color: #b3baff; } .rng-oro .rng-flecha { color: #ffe08a; } /* ---------- v4: la forja (contorno de luz, rayo, destello, brillo y brasas) ---------- */ .rng-ins .rng-trazo { opacity: 0; stroke: #c9ceff; stroke-dasharray: 100; stroke-dashoffset: 100; } .rng-capa .rng-trazo { filter: drop-shadow(0 0 4px #b3baff) drop-shadow(0 0 10px #6c78ff); } .rng-oro .rng-trazo { stroke: #ffe9a3; filter: drop-shadow(0 0 4px #ffe08a) drop-shadow(0 0 10px #f5c542); } .rng-ins .rng-orn { transform-box: view-box; transform-origin: 50% 46%; } .rng-escena { position: relative; } .rng-vieja, .rng-nueva { width: 250px; height: 250px; } .rng-vieja .rng-ins, .rng-nueva .rng-ins { width: 250px; height: 250px; } .rng-rayo { position: absolute; left: 50%; top: -60vh; width: 6px; height: calc(60vh + 150px); margin-left: -3px; opacity: 0; transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 45%, #c9ceff); box-shadow: 0 0 18px 6px rgba(179,186,255,.85), 0 0 50px 16px rgba(108,120,255,.5); } .rng-oro .rng-rayo { background: linear-gradient(to bottom, rgba(255,255,255,0), #fffbe8 45%, #ffe08a); box-shadow: 0 0 18px 6px rgba(255,224,138,.9), 0 0 50px 16px rgba(245,197,66,.55); } .rng-destello { width: 320px; height: 320px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #ffffff 0%, rgba(201,206,255,.7) 30%, rgba(108,120,255,0) 68%); } .rng-oro .rng-destello { background: radial-gradient(circle, #ffffff 0%, rgba(255,233,163,.75) 30%, rgba(245,197,66,0) 68%); } .rng-brillo { width: 250px; height: 250px; overflow: hidden; border-radius: 40%; pointer-events: none; mix-blend-mode: screen; } .rng-brillo i { display: block; width: 46px; height: 380px; margin: -65px auto 0; opacity: 0; transform: translateX(-600%) rotate(20deg); background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); } .rng-brasas { position: relative; width: 0; height: 0; } .rng-brasas i { position: absolute; left: var(--x); top: 70px; width: 5px; height: 5px; margin: -2px; border-radius: 50%; opacity: 0; background: #ffcf6b; box-shadow: 0 0 8px 2px rgba(255,160,40,.9); } .rng-capa.rng-calor .rng-brasas i { animation: rng-brasa var(--d) linear var(--r) infinite; } @keyframes rng-brasa { 0% { transform: translateY(0) scale(var(--s)); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--x) * -.25), -280px) scale(.15); opacity: 0; } } .rng-chispas i { background: #fff7e0; box-shadow: 0 0 10px 3px rgba(255,200,90,.9); } .rng-capa:not(.rng-oro) .rng-chispas i:nth-child(odd) { background: #ffffff; box-shadow: 0 0 10px 3px rgba(179,186,255,.95); } @media (max-width: 480px) { .rng-vieja, .rng-nueva, .rng-vieja .rng-ins, .rng-nueva .rng-ins, .rng-brillo { width: 200px; height: 200px; } } @media (prefers-reduced-motion: reduce) { .rng-capa.rng-calor .rng-brasas i { animation: none; } } /* ---------- v7: cada subida distinta. Los colores de la energía vienen por rango en --luz y --brillo ---------- */ .rng-capa { --luz: #c9ceff; --brillo: #6c78ff; } .rng-capa .rng-trazo { stroke: var(--luz); filter: drop-shadow(0 0 4px var(--luz)) drop-shadow(0 0 10px var(--brillo)); } .rng-capa .rng-rayo { background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 45%, var(--luz)); box-shadow: 0 0 18px 6px var(--luz), 0 0 50px 16px var(--brillo); } .rng-capa .rng-destello { background: radial-gradient(circle, #ffffff 0%, var(--luz) 30%, rgba(255,255,255,0) 68%); } .rng-capa .rng-aro { box-shadow: 0 0 0 4px var(--luz), 0 0 40px 12px var(--brillo); } .rng-capa .rng-halo { background: radial-gradient(circle, var(--luz) 0%, color-mix(in srgb, var(--brillo) 40%, transparent) 40%, transparent 70%); } .rng-capa .rng-chispas i { box-shadow: 0 0 10px 3px var(--brillo); } .rng-capa .rng-sube, .rng-capa .rng-flecha, .rng-capa .rng-evo-paso.nueva small { color: var(--luz); } .rng-capa.rng-max .rng-sube { font-size: 15px; letter-spacing: .3em; } .rng-giro { position: absolute; left: 50%; top: 50%; width: 540px; height: 540px; margin: -270px 0 0 -270px; border-radius: 50%; opacity: 0; pointer-events: none; /* fuera de la grilla: no empuja la insignia */ background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--brillo) 55%, transparent) 0deg 5deg, transparent 5deg 22.5deg); -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%); } .rng-orbita { position: relative; width: 0; height: 0; opacity: 0; } .rng-orbita i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px var(--brillo); } .rng-confeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .rng-confeti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; } .rng-capa.rng-llueve .rng-confeti i { animation: rng-cae var(--d) cubic-bezier(.3,.6,.5,1) var(--r) forwards; } @keyframes rng-cae { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--rot)); opacity: .9; } } @media (prefers-reduced-motion: reduce) { .rng-capa.rng-llueve .rng-confeti i { animation: none; } } /* ---------- la barra de arriba: tu rango (insignia más grande), el nivel con # y la barra de avance hacia el siguiente ---------- */ .g-item.rango { gap: 8px; } .g-item.rango .rng-ins { width: 40px; height: 40px; margin: -9px -2px; filter: drop-shadow(0 3px 6px rgba(4,0,188,.25)); } .g-rango { display: grid; gap: 4px; } .g-rango b { font: 400 21px/.9 var(--font-display, 'Bebas Neue', Impact, sans-serif); letter-spacing: .03em; color: var(--azul, #0012fd); } .g-rango-barra { display: block; width: 58px; height: 5px; border-radius: 999px; background: rgba(108,120,255,.2); overflow: hidden; } .g-rango-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6c78ff, #0012fd); } :root[data-theme="dark"] .g-rango b { color: #fff; } :root[data-theme="dark"] .g-rango-barra { background: rgba(255,255,255,.14); } :root[data-theme="dark"] .g-rango-barra i { background: linear-gradient(90deg, #8f98ff, #4b57ff); } /* movil-base.css */ /* [CERT] Base del celular (13-oct, pedido del dueño: «optimizar el celular al 100 %, sin mucho scroll, para todos los teléfonos, el menú abajo fijo»): barra de arriba, menú de abajo, botones y campos, avisos y ventanas; y las pantallas de Cuenta y Apoyo (Perfil, Ayuda, Notificaciones, Comunidad, Biblioteca, Certificados) y las de acceso. TODO va dentro de @media (max-width: 900px) o menos: la computadora no cambia. Medidas que pueden usar las demás hojas del celular: --mb-nav-h alto del menú de abajo sin la franja del iPhone (60 px) --mb-nav-total alto real del menú de abajo (60 px + la franja de abajo del iPhone, si la hay) --topbar-h alto de la barra de arriba sin la franja de arriba (56 px en el celular) */ /* ======================================================================================================================== 1. BASE DE TODO EL CAMPUS EN EL CELULAR ======================================================================================================================== */ /* [CERT] 13-oct · Medidas del celular: barra de arriba más baja (56 px, la medida habitual en el teléfono) y menú de abajo de 60 px más la franja de abajo del iPhone (env(safe-area-inset-bottom); funciona porque index.html ya tiene viewport-fit=cover). */ @media (max-width: 900px) { :root { --topbar-h: 56px; --mb-nav-h: 60px; --mb-nav-total: calc(var(--mb-nav-h) + env(safe-area-inset-bottom, 0px)); --mb-lado: 16px; } } @media (max-width: 360px) { :root { --mb-lado: 12px; } } /* teléfonos de 320-360 px: 8 px más de ancho útil para el contenido */ /* [CERT] 13-oct · Que la pantalla no se mueva: sin desplazamiento ni rebote hacia los lados y sin rebote vertical; el zoom con los dedos sigue funcionando (no se usa user-scalable ni touch-action). «clip» no crea una caja con scroll, así la barra de arriba sigue fija; en navegadores viejos sin «clip» solo recorta (si también recortara , la barra de arriba dejaría de quedarse fija). */ @media (max-width: 900px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overscroll-behavior: none; } body { overflow-x: visible; overscroll-behavior: none; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } } /* alto de la pantalla que se ve de verdad (100dvh descuenta las barras del navegador del teléfono); 100vh queda de respaldo */ .app, .shell, .boot { min-height: 100vh; min-height: 100dvh; } /* al saltar a un campo o a un enlace, el navegador lo deja a la vista: ni debajo de la barra de arriba ni detrás del menú de abajo */ html { scroll-padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px); scroll-padding-bottom: calc(var(--mb-nav-total) + 8px); } } /* [CERT] 13-oct · Barra de arriba: fija arriba (sticky), respeta la muesca y los bordes redondeados del iPhone, y todos sus botones miden 44 px para tocarlos sin errar (el del perfil medía 32 px; el menú, 40 px y la campana, 42 px). */ @media (max-width: 900px) { .topbar { position: sticky; top: 0; height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); gap: 6px; } .topbar .top-actions { gap: 6px; } .topbar .hamburger, .topbar .icon-btn.campana { width: 44px; height: 44px; } .topbar .avatar-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; } .topbar .avatar-btn .avatar { width: 34px; height: 34px; font-size: 12px; } .topbar .prod-switch { min-width: 44px; min-height: 44px; } } /* [CERT] 13-oct · Menú de abajo: siempre fijo y visible. Su alto suma la franja de abajo del iPhone (antes la franja se comía el alto: en un iPhone con barra de inicio quedaban 27 px para los íconos), respeta los bordes en horizontal y los nombres van a 11 px o más. */ @media (max-width: 900px) { .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--mb-nav-total); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } .bottom-nav a { min-width: 0; gap: 3px; font-size: 11px; line-height: 1.2; letter-spacing: 0; } .bottom-nav a > span { white-space: nowrap; text-align: center; } /* «Programas» nunca se parte, ni en teléfonos de 280 px */ } @media (min-width: 375px) and (max-width: 900px) { .bottom-nav a { font-size: 11.5px; } } /* [CERT] 13-oct · Espacio del contenido: márgenes de los lados que respetan los bordes del iPhone en horizontal, menos aire arriba y abajo solo lo que ocupa el menú más 24 px (antes 110 px fijos: sobraba espacio vacío y no contaba la franja del iPhone). */ @media (max-width: 900px) { .content { padding-top: 14px; padding-left: max(var(--mb-lado), env(safe-area-inset-left, 0px)); padding-right: max(var(--mb-lado), env(safe-area-inset-right, 0px)); padding-bottom: calc(var(--mb-nav-total) + 24px); } } /* [CERT] 13-oct · Campos: en el iPhone, un campo con letra de menos de 16 px hace zoom al tocarlo y la pantalla se corre. Todos los campos de texto, listas y áreas de texto van a 16 px en el celular (fallaban #en-url, #en-notas, .select, input.input.grow, #cm-text, #reto-r y los de Entrar y Recuperar, de 15 px). */ @media (max-width: 900px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="file"]):not([type="image"]), select, textarea { font-size: 16px !important; } .select, .input:not(textarea) { min-height: 44px; } } /* [CERT] 13-oct · Botones y enlaces que se tocan: 44 px de alto como mínimo. Si el texto de un botón no cabe en pantallas angostas, baja a una segunda línea dentro del botón en vez de salirse por el lado. */ @media (max-width: 900px) { .btn { height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; max-width: 100%; white-space: normal; line-height: 1.25; text-align: center; } .btn-lg { min-height: 48px; } /* el botón grande conserva sus 48 px */ .icon-btn { min-width: 44px; min-height: 44px; } a.chip, button.chip, .tab, .pop-item, .nav-item, .faq-q { min-height: 44px; } /* enlaces de las cabeceras («Ver todo →»): 44 px para tocar sin agrandar la fila (el margen negativo compensa el alto extra) */ .link-btn { min-height: 44px; margin-top: -8px; margin-bottom: -8px; padding-left: 6px; padding-right: 6px; } /* selector de opciones (Todas / No leídas, Claro / Oscuro, filtros): opciones de 44 px; si no caben en una línea, bajan a una segunda línea dentro del selector (antes se salían por la derecha y el teléfono achicaba toda la página para mostrarlas) */ .seg { max-width: 100%; flex-wrap: wrap; padding: 3px; } .seg button { min-height: 44px; padding-left: 14px; padding-right: 14px; white-space: nowrap; } /* interruptores: el dibujo sigue de 42 × 24 px, pero la zona que se toca mide 50 × 44 px (el relleno no se pinta) */ .switch { box-sizing: content-box; width: 42px; height: 24px; padding: 10px 4px; background-clip: content-box !important; } /* el modo oscuro pinta el interruptor encendido con «background: … !important», que devuelve el recorte al borde: este lo gana */ html:root .switch[role="switch"][aria-checked] { background-clip: content-box !important; } .switch::after { top: 13px; left: 7px; } } /* [CERT] 13-oct · Avisos (toasts): debajo de la barra de arriba (con su franja del iPhone) y a todo el ancho, sin salirse en 320 px */ @media (max-width: 900px) { .toasts { top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); } .toast { min-width: 0; max-width: none; } } /* [CERT] 13-oct · Desplegables de la barra de arriba (programa, campana y cuenta): en el teléfono quedan pegados al borde derecho con 12 px de margen y nunca más anchos que la pantalla (el del programa se salía por la izquierda en 320 px). Opciones de 44 px. */ @media (max-width: 600px) { .pop.pop-capa { right: max(12px, env(safe-area-inset-right, 0px)) !important; min-width: 0; max-width: calc(100vw - 24px); } .pop.pop-capa .pop-scroll { max-height: min(380px, calc(100dvh - 180px)); } .cp-leidas { min-height: 44px; } .cp-lista { max-height: min(58vh, calc(100dvh - 260px)); } } /* [CERT] 13-oct · Ventanas (Editar perfil, contraseña, chat de soporte con IA): caben en 320 px, su alto es el de la pantalla que se ve (100dvh) y, si el contenido es más largo, se desliza dentro de la ventana sin mover la página. */ @media (max-width: 900px) { .pf-dialogo { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); width: min(460px, calc(100vw - 24px)); overscroll-behavior: contain; } .chat-msgs { max-height: min(46vh, 360px); max-height: min(46dvh, 360px); overscroll-behavior: contain; } .chat-form .btn { min-width: 48px; } } @media (max-width: 400px) { .pf-caja { gap: 12px; padding: 20px 16px 16px; } .pf-t { font-size: 18px; } .pf-botones { flex-wrap: wrap; } .pf-botones .btn { flex: 1 1 auto; } } /* [CERT] 13-oct · Menú lateral (el que abre el botón ☰): alto de la pantalla que se ve, respeta la muesca y la franja del iPhone, y al deslizarlo no arrastra la página de atrás. */ @media (max-width: 900px) { .sidebar { height: auto; padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); overscroll-behavior: contain; } } /* [CERT] 13-oct · Panel de pruebas (solo la cuenta de pruebas): cabe en 320 px, queda encima del menú de abajo y sus botones se tocan bien */ @media (max-width: 640px) { .pruebas { right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mb-nav-total) + 12px); } .pruebas-caja { width: calc(100vw - 16px); max-height: calc(100vh - 150px); max-height: calc(100dvh - var(--mb-nav-total) - var(--topbar-h) - 40px); overscroll-behavior: contain; } .pruebas-abrir { min-height: 44px; } .pruebas-atajos button { min-height: 40px; padding: 6px 12px; font-size: 12.5px; } } /* [CERT] 13-oct · Entrar, Recuperar y Restablecer contraseña: la verificación de Cloudflare mide 300 px como mínimo y en teléfonos de 320-360 px empujaba la tarjeta fuera de la pantalla (los campos y el botón quedaban cortados a la derecha). Menos relleno a los lados, la verificación usa todo el ancho de la tarjeta en los más angostos, todo cabe en una pantalla y el enlace se toca en 44 px. */ @media (max-width: 900px) { .ac { min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); } .ac-link { display: inline-flex; align-items: center; min-height: 44px; } } @media (max-width: 400px) { .ac { gap: 12px; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); } .ac-tarjeta { gap: 10px; padding: 20px 16px 16px; } .ac-logo { width: 44px; height: 44px; border-radius: 13px; } .ac h1 { margin-top: 2px; font-size: 22px; } .ac-form { gap: 12px; } } @media (max-width: 339px) { .ac-ts { margin-left: -16px; margin-right: -16px; } /* 320 px: la verificación (300 px) ocupa el ancho completo de la tarjeta */ } /* [CERT] 13-oct · Cabeceras de página y de sección más bajas en el teléfono (menos aire vacío; el texto no cambia) */ @media (max-width: 900px) { .page-head { gap: 10px 12px; margin-bottom: 14px; } .page-sub { margin-top: 2px; } .section { margin-top: 22px; } .section-head { margin-bottom: 10px; } } /* ======================================================================================================================== 2. PANTALLAS DE CUENTA Y APOYO ======================================================================================================================== */ /* [CERT] 13-oct · Biblioteca: cada recurso en una fila (ícono a la izquierda, nombre y datos al centro, botón a la derecha) en vez de una tarjeta alta con todo apilado; los filtros sin salirse (antes la fila medía 477 px y el teléfono achicaba toda la página). */ @media (max-width: 900px) { #main[data-ruta="recursos"] .filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; } #main[data-ruta="recursos"] .filters .seg { justify-self: start; } #main[data-ruta="recursos"] .filters .select, #main[data-ruta="recursos"] .filters .input { width: 100%; height: 44px; } #main[data-ruta="recursos"] #res-list > .grid { gap: 8px; } #main[data-ruta="recursos"] .res-card { flex-direction: row; align-items: center; gap: 12px; padding: 10px 6px 10px 12px; } #main[data-ruta="recursos"] .res-card .res-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; } #main[data-ruta="recursos"] .res-card > .grow { min-width: 0; } #main[data-ruta="recursos"] .res-card b { display: block; font-size: 14px; line-height: 1.3; } #main[data-ruta="recursos"] .res-card .xs { margin-top: 2px; } #main[data-ruta="recursos"] .res-card .icon-btn { flex: none; width: 44px; height: 44px; } } @media (min-width: 375px) and (max-width: 900px) { /* de 375 px en adelante los 5 filtros caben en una línea si sus íconos (un adorno) no ocupan lugar */ #main[data-ruta="recursos"] .filters .seg button { padding-left: 11px; padding-right: 11px; } #main[data-ruta="recursos"] .filters .seg button .ic { display: none; } } @media (min-width: 480px) and (max-width: 900px) { /* teléfonos grandes en horizontal y tabletas: el programa y el buscador lado a lado, debajo de los tipos */ #main[data-ruta="recursos"] .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #main[data-ruta="recursos"] .filters .seg { grid-column: 1 / -1; } } /* [CERT] 13-oct · Certificados: los diplomas en una fila que se desliza de lado (se ve el borde del siguiente, como «Próximamente» en Mis programas) y cada diploma más bajo: el dibujo con menos relleno y los botones en dos columnas. Antes eran 9 tarjetas una debajo de la otra: 8,4 pantallas de scroll en un iPhone SE. No se quita ningún dato ni botón. */ @media (max-width: 640px) { #main[data-ruta="certificados"] .grid.g-2 { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 2px 30px; margin: 0 -2px -22px; scrollbar-width: none; /* 30 px abajo: la sombra del vidrio no se corta en seco */ } #main[data-ruta="certificados"] .grid.g-2::-webkit-scrollbar { display: none; } #main[data-ruta="certificados"] .diploma { scroll-snap-align: start; min-width: 0; } #main[data-ruta="certificados"] .diploma-art { min-height: 0; padding: 16px 14px 14px; gap: 4px; } #main[data-ruta="certificados"] .diploma-art::before { inset: 7px; } #main[data-ruta="certificados"] .diploma-art::after { inset: 10px; } #main[data-ruta="certificados"] .diploma-seal { width: 40px; height: 40px; } #main[data-ruta="certificados"] .diploma-seal .ic { width: 22px; height: 22px; } #main[data-ruta="certificados"] .diploma-art .eyebrow { font-size: 11px; letter-spacing: .06em; line-height: 1.3; } #main[data-ruta="certificados"] .diploma-name { font-size: 17px; line-height: 1.2; } #main[data-ruta="certificados"] .diploma-art small { font-size: 11.5px; line-height: 1.35; } #main[data-ruta="certificados"] .diploma-body { gap: 8px; padding: 12px 14px 14px; } #main[data-ruta="certificados"] .diploma-body > .row { align-items: flex-start; gap: 8px; } #main[data-ruta="certificados"] .diploma-body > .row > b { font-size: 14.5px; line-height: 1.3; } #main[data-ruta="certificados"] .diploma-body .row-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; } #main[data-ruta="certificados"] .diploma-body .row-wrap .btn { width: 100%; padding-left: 10px; padding-right: 10px; gap: 6px; font-size: 13px; } } @media (max-width: 360px) { #main[data-ruta="certificados"] .diploma-art { padding: 13px 12px 12px; gap: 3px; } #main[data-ruta="certificados"] .diploma-seal { width: 34px; height: 34px; } #main[data-ruta="certificados"] .diploma-seal .ic { width: 19px; height: 19px; } #main[data-ruta="certificados"] .diploma-art .eyebrow { letter-spacing: .04em; } #main[data-ruta="certificados"] .diploma-name { font-size: 15.5px; } #main[data-ruta="certificados"] .diploma-art small { font-size: 11px; } #main[data-ruta="certificados"] .diploma-body { padding: 11px 12px 12px; } #main[data-ruta="certificados"] .diploma-body > .row > b { font-size: 14px; } #main[data-ruta="certificados"] .diploma-body .row-wrap .btn { padding-left: 8px; padding-right: 8px; font-size: 12.5px; } } /* [CERT] 13-oct · Ayuda y soporte: cada canal con el ícono a la izquierda y el texto a la derecha (antes el ícono ocupaba su propia fila) y menos relleno; las preguntas frecuentes más compactas. El botón redondo del chat queda encima del menú de abajo y la página termina un poco más abajo para que ese botón no tape la última pregunta. */ @media (max-width: 900px) { #main[data-ruta="ayuda"] { padding-bottom: calc(var(--mb-nav-total) + 76px); } #main[data-ruta="ayuda"] .ayuda-grid { gap: 10px; margin-bottom: 4px; } #main[data-ruta="ayuda"] .ayuda-tarjeta.card { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; padding: 14px; } #main[data-ruta="ayuda"] .ayuda-tarjeta > * { grid-column: 1 / -1; min-width: 0; } #main[data-ruta="ayuda"] .ayuda-tarjeta > .stat-ic { grid-column: 1; grid-row: 1; width: 36px; height: 36px; border-radius: 11px; } #main[data-ruta="ayuda"] .ayuda-tarjeta > .card-title { grid-column: 2; grid-row: 1; } #main[data-ruta="ayuda"] .ayuda-tarjeta > .btn { width: 100%; justify-content: center; margin-top: 4px; } #main[data-ruta="ayuda"] .ayuda-tarjeta p { overflow-wrap: break-word; } #main[data-ruta="ayuda"] .section .stack-sm { gap: 6px; } #main[data-ruta="ayuda"] .faq-q { padding: 11px 14px; font-size: 14px; line-height: 1.4; } #main[data-ruta="ayuda"] .faq-a { padding: 0 14px 12px; } .ayuda-fab { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mb-nav-total) + 14px); } } /* [CERT] 13-oct · Comunidad: el oso va a la derecha del título, más chico (antes ocupaba su propia fila de 132 px), y la publicación gasta menos alto. Los botones de cada publicación (responder, me gusta, compartir, seguir) se tocan en 44 px aunque su dibujo siga del tamaño de antes (borde transparente que no se pinta), así la fila no crece. */ @media (max-width: 900px) { #main[data-ruta="comunidad"] .page-head { flex-wrap: nowrap; align-items: center; } #main[data-ruta="comunidad"] .page-head > .grow { flex: 1 1 auto; flex-basis: auto; min-width: 0; } #main[data-ruta="comunidad"] .cab-panda { flex: none; width: 88px; height: 88px; margin: -8px -4px -10px 0; object-fit: contain; } #main[data-ruta="comunidad"] .cm-layout { gap: 14px; } #main[data-ruta="comunidad"] .cm-tab { padding: 10px 8px 9px; min-height: 44px; } #main[data-ruta="comunidad"] .cm-compose { padding: 10px 12px; } #main[data-ruta="comunidad"] .cm-input#cm-text { height: 68px; } #main[data-ruta="comunidad"] .cm-box-foot { margin-top: 6px; } #main[data-ruta="comunidad"] .cm-post { padding: 12px 12px 4px; } #main[data-ruta="comunidad"] .cm-text { margin: 2px 0; } #main[data-ruta="comunidad"] .cm-act { min-height: 44px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; background-clip: padding-box; margin-top: -6px; margin-bottom: -6px; } #main[data-ruta="comunidad"] .cm-acts { margin-top: 2px; margin-bottom: 2px; } #main[data-ruta="comunidad"] .cm-follow { min-height: 44px; border: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--border-strong); margin-top: -8px; margin-bottom: -8px; } #main[data-ruta="comunidad"] .cm-rules { padding: 14px; } #main[data-ruta="comunidad"] .cm-rules ul { margin-top: 8px; } } @media (max-width: 360px) { #main[data-ruta="comunidad"] .cab-panda { width: 72px; height: 72px; } } /* [CERT] 13-oct · Notificaciones: filas con menos relleno; los filtros y «Marcar todas como leídas» en la misma línea si caben */ @media (max-width: 900px) { #main[data-ruta="notificaciones"] .page-head > .row-wrap { gap: 6px 10px; } #main[data-ruta="notificaciones"] .notif { gap: 12px; padding: 12px 14px 12px 18px; } #main[data-ruta="notificaciones"] .notif .li-ic { width: 34px; height: 34px; } } /* [CERT] 14-oct · celular: letra de 12 px o más (antes 11–11,5 px) en el menú de abajo y en Perfil. A propósito no se tocan: el número de la campana (insignia), las iniciales de los avatares ni el texto que solo leen los lectores de pantalla. */ @media (max-width: 900px) { .bottom-nav a { font-size: 12px; } #main[data-ruta="perfil"] .per-etq { font-size: 12px; } } /* (revisión) las cifras del Perfil miden 11,5 px solo hasta 560 px; de 561 a 900 px ya miden 12,5 px y no se achican */ @media (max-width: 560px) { #main[data-ruta="perfil"] .per-dato-txt small { font-size: 12px; } } @media (max-width: 359px) { .bottom-nav a { letter-spacing: -.03em; } } /* en 320 px «Programas» a 12 px se pasaba 2 px de su casilla */ /* [CERT] 14-oct · celular: teléfono en HORIZONTAL (poca altura: 360–430 px). La barra de arriba (56 px) y el menú de abajo (60 px) se comían el 30 % de la pantalla: las dos bajan a 48 px (sus botones siguen de 44 px) y en el menú el ícono va al lado del nombre. La capa «Este es tu nivel» no cabía (insignia cortada arriba y el botón «Seguir» fuera de la pantalla, sin scroll): la escena se achica a la mitad y, si aun así no cabe, la capa baja con scroll. En vertical no cambia nada. */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { :root { --topbar-h: 48px; --mb-nav-h: 48px; } .bottom-nav a { flex-direction: row; gap: 8px; } .rng-capa { place-content: start center; place-content: safe center; overflow-y: auto; /* (revisión) «start» de respaldo para Safari sin «safe» */ overscroll-behavior: contain; gap: 4px; padding: 12px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px)); } .rng-escena { transform: scale(.5); margin: -75px 0; } .rng-nivel { font-size: 48px; } .rng-seguir { margin-top: 8px; } } /* [CERT] 14-oct · celular (revisión): lo que faltaba. · Menú lateral (la hamburguesa): los títulos de cada grupo («Principal», «Juega y gana», «Progreso»…) seguían a 11 px. · En HORIZONTAL, los desplegables de la barra de arriba no cabían: la campana se salía por abajo (13–43 px: «Ver todas las notificaciones» quedaba cortado en 844 × 390, 740 × 360 y 667 × 375) y el de la cuenta, en 568 × 320, dejaba «Cerrar sesión» fuera de la pantalla. Ahora miden como mucho el alto que queda debajo de la barra: en la campana se achica la lista (que ya tenía su scroll) y la cabecera y «Ver todas» quedan siempre a la vista; los otros dos bajan con scroll si no caben. */ @media (max-width: 900px) { .sidebar .nav-group .nav-label { font-size: 12px; } } @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { .pop.pop-capa { max-height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top, 0px) - 14px); overflow-y: auto; overscroll-behavior: contain; } @supports (height: 100dvh) { .pop.pop-capa { max-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px) - 14px); } } .pop.pop-capa.pop-campana { display: flex; flex-direction: column; overflow: hidden; } .pop-campana .cp-cab, .pop-campana .pop-pie { flex: none; } .pop-campana .cp-lista { flex: 1 1 auto; min-height: 0; max-height: none; } } /* movil-estudio.css */ /* [CERT] Celular — Estudio (13-oct): Inicio, Mis programas, Programa, Área, Mapa, Clase, Examen, Entrega y Calendario. TODO va dentro de @media (max-width: 900px) o menos: la computadora no cambia. Pedido del dueño (13-oct): «optimizar el celular al 100 %, que no haya mucho scroll, para todos los teléfonos». Reglas de esta hoja: no se quita ningún texto, dato, botón ni enlace; para bajar el scroll se quita aire vacío, se ponen las piezas una al lado de la otra y las listas largas de tarjetas pasan a una fila que se desliza de lado (se ve el borde de la siguiente). Todo lo que se toca mide 44 px de alto o más y la letra de los textos y etiquetas, 11 px o más (los dibujos de las portadas son ilustración y conservan su letra). Cada pantalla va con su prefijo .content[data-ruta="…"], así no toca las demás. */ /* ===================================================================================================================== [CERT] 13-oct · INICIO: menos aire vacío y bloques más bajos, sin quitar nada. · «Sigue donde lo dejaste»: el dibujo de arriba, más bajo (es adorno; el texto y el botón no cambian). · Pregunta del día: opciones con menos relleno; en los teléfonos angostos el título va en una línea y el premio al lado de «Día N de 7» (antes el título se partía en dos y el texto en cuatro líneas). · «Ver calendario» y «Recordarme» se tocan en 44 px; los XP del ranking pasan de 10,5 a 11 px. ===================================================================================================================== */ @media (max-width: 900px) { .content[data-ruta="inicio"] .rk-barra small { font-size: 11px; } } @media (max-width: 600px) { .content[data-ruta="inicio"] .in3 { gap: 14px; } .content[data-ruta="inicio"] .in3-mision-img { height: 124px; } .content[data-ruta="inicio"] .in3-mision-txt { padding: 104px 16px 16px; gap: 8px; } .content[data-ruta="inicio"] .in3-acciones { margin-top: 2px; } .content[data-ruta="inicio"] .in3-racha { padding: 14px 16px; } .content[data-ruta="inicio"] .in3-semana { margin-top: 10px; } .content[data-ruta="inicio"] .in3-nivel { margin-top: 12px; padding-top: 10px !important; } /* styles.css lo fija con !important */ .content[data-ruta="inicio"] .in3-rank2 { padding: 14px 16px; gap: 10px; } .content[data-ruta="inicio"] .in3-quiz.pd { padding: 16px; } .content[data-ruta="inicio"] .pd-cab { margin-bottom: 12px; } .content[data-ruta="inicio"] .pd-dias { margin-bottom: 14px; } .content[data-ruta="inicio"] .pd-q { margin-bottom: 12px; } .content[data-ruta="inicio"] .pd-ops { gap: 8px; } .content[data-ruta="inicio"] .pd-op { padding: 9px 12px; gap: 10px; min-height: 48px; } .content[data-ruta="inicio"] .pd-aviso { margin-top: 10px; } .content[data-ruta="inicio"] .in3-ev-cab { align-items: center; } /* 44 px para tocar sin agrandar la fila (el margen negativo compensa el alto extra) */ .content[data-ruta="inicio"] .in3-ev-cab > a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; } .content[data-ruta="inicio"] .in3-rec { min-height: 44px; } } @media (max-width: 380px) { .content[data-ruta="inicio"] .in3-saludo .page-title { font-size: 23px; } .content[data-ruta="inicio"] .in3-mision h2 { font-size: 21px; } .content[data-ruta="inicio"] .pd-cab { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; } .content[data-ruta="inicio"] .pd-tit { display: contents; } .content[data-ruta="inicio"] .pd-cab .in3-quiz-fig { grid-column: 1; grid-row: 1; } .content[data-ruta="inicio"] .pd-cab #quiz-t { grid-column: 2 / -1; grid-row: 1; } .content[data-ruta="inicio"] .pd-tit > p { grid-column: 1 / 3; grid-row: 2; margin: 0; } .content[data-ruta="inicio"] .pd-cab .pd-premio { grid-column: 3; grid-row: 2; } } /* ===================================================================================================================== [CERT] 13-oct · MIS PROGRAMAS: menos scroll sin quitar nada. · Cada programa: la portada chica a la izquierda y el nombre a la derecha (antes la portada ocupaba todo el ancho encima del texto); el avance, los datos y los botones siguen debajo, completos. · «Próximamente»: las especializaciones en una fila que se desliza de lado (antes una debajo de la otra). · En los teléfonos de 320-400 px los 9 puntitos del avance de la Certificación caben al lado del porcentaje (antes se montaban sobre el «46 %»). ===================================================================================================================== */ @media (max-width: 600px) { .content[data-ruta="programas"] .page-head { margin-bottom: 16px; gap: 12px; } .content[data-ruta="programas"] .prog-mosaico { gap: 14px; } .content[data-ruta="programas"] .prog-tile { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: start; align-content: start; column-gap: 12px; row-gap: 0; padding: 16px 14px 14px; min-height: 0; } .content[data-ruta="programas"] .pt-texto { display: contents; } /* sin la caja del texto, cada pieza se pinta sobre el vidrio de la tarjeta, como antes */ .content[data-ruta="programas"] .pt-texto > * { position: relative; z-index: 2; min-width: 0; } .content[data-ruta="programas"] .pa-pila { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: start; } .content[data-ruta="programas"] .pa-carta { border-radius: 10px; } .content[data-ruta="programas"] .pa-c2 { transform: translateY(-6px) scale(.94); } .content[data-ruta="programas"] .pa-c3 { transform: translateY(-12px) scale(.88); } .content[data-ruta="programas"] .pt-etq { grid-column: 2; grid-row: 1; align-self: end; font-size: 11px; letter-spacing: .12em; line-height: 1.3; } .content[data-ruta="programas"] .pt-titulo, .content[data-ruta="programas"] .prog-tile.destacada .pt-titulo { grid-column: 2; grid-row: 2; align-self: start; margin-top: 5px; font-size: 23px; line-height: 1; } .content[data-ruta="programas"] .pt-fila, .content[data-ruta="programas"] .pt-donde, .content[data-ruta="programas"] .pt-datos, .content[data-ruta="programas"] .pt-acc { grid-column: 1 / -1; margin-top: 10px; } .content[data-ruta="programas"] .pt-acc { gap: 8px; } .content[data-ruta="programas"] .pt-datos { gap: 4px 14px; font-size: 12.5px; } .content[data-ruta="programas"] .pv { margin-top: 26px; gap: 12px; } .content[data-ruta="programas"] .pvA-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 2px 26px; margin: 0 -2px -20px; scrollbar-width: none; /* 26 px abajo: la sombra del vidrio no se corta en seco */ } .content[data-ruta="programas"] .pvA-grid::-webkit-scrollbar { display: none; } .content[data-ruta="programas"] .pvA-grid > * { scroll-snap-align: start; min-width: 0; } .content[data-ruta="programas"] .pvA-card { gap: 12px; padding: 18px 16px; } .content[data-ruta="programas"] .pv-nombre { font-size: 25px; } .content[data-ruta="programas"] .pvA-work { padding: 16px; gap: 10px 14px; } } @media (max-width: 400px) { .content[data-ruta="programas"] .pt-fila { gap: 10px; } .content[data-ruta="programas"] .pt-camino i { width: 22px; height: 22px; } .content[data-ruta="programas"] .pt-camino::before { left: 11px; right: 11px; } .content[data-ruta="programas"] .pt-camino::after { left: 11px; width: calc((100% - 22px) * var(--k) / (var(--n) - 1)); } } /* ===================================================================================================================== [CERT] 13-oct · PROGRAMA: menos scroll sin quitar nada. · La flecha de volver va dentro de la cabecera, a la izquierda de «Programa · N áreas» (ya no ocupa su propia fila). · «Sigue donde quedaste»: la portada chica a la izquierda y el título a la derecha; «Ver el área» se toca en 44 px. · Las áreas de estudio y las de la Zona Gold en una fila que se desliza de lado, con sus portadas completas (antes una debajo de la otra: siete áreas eran casi dos pantallas). La fila llega mostrando el área donde vas, centrada, con el borde de la anterior y de la siguiente a los lados. · Pastillas de estado de las portadas y nombres del mapa chico, a 11 px (estaban entre 8,5 y 10,5 px). ===================================================================================================================== */ @media (max-width: 900px) { .content[data-ruta="programa"] .plano-pastilla { font-size: 11px; } .content[data-ruta="programa"] .mm-p small, .content[data-ruta="programa"] .pm-pt small { font-size: 11px; } } @media (max-width: 600px) { .content[data-ruta="programa"] .pg-hero.card { padding: 20px 16px 18px; gap: 18px; } .content[data-ruta="programa"] .pg-hero .page-title { margin: 12px 0 6px; } .content[data-ruta="programa"] .pg-hero .pg-desc { font-size: 14px; line-height: 1.5; } .content[data-ruta="programa"] .pg-cifras { margin-top: 14px; gap: 8px; } .content[data-ruta="programa"] .pg-hero .pg-atajos { margin-top: 12px; } .content[data-ruta="programa"] .pg-sigue.card { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); column-gap: 12px; row-gap: 0; padding: 12px; margin-bottom: 26px; } .content[data-ruta="programa"] .pg-sigue-portada { grid-column: 1; grid-row: 1 / span 2; align-self: start; border-radius: 12px; } .content[data-ruta="programa"] .pg-sigue-play { width: 40px; height: 40px; } .content[data-ruta="programa"] .pg-sigue-chip { left: 6px; bottom: 6px; padding: 3px 8px; font-size: 11px; } .content[data-ruta="programa"] .pg-sigue-txt { display: contents; } .content[data-ruta="programa"] .pg-sigue-txt > * { grid-column: 1 / -1; min-width: 0; } .content[data-ruta="programa"] .pg-sigue-txt > .pg-etq { grid-column: 2; grid-row: 1; align-self: end; font-size: 11px; line-height: 1.35; } .content[data-ruta="programa"] .pg-sigue-titulo { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; font-size: 16px; line-height: 1.3; } .content[data-ruta="programa"] .pg-sigue-donde { margin-top: 10px; } .content[data-ruta="programa"] .pg-sigue-meta { margin-top: 4px; } .content[data-ruta="programa"] .pg-sigue-avance { margin-top: 10px; } .content[data-ruta="programa"] .pg-sigue-acc { margin-top: 12px; gap: 8px 16px; } .content[data-ruta="programa"] .pg-sigue-link { min-height: 44px; } /* va en la fila del botón, que ya mide 44 px */ .content[data-ruta="programa"] .pg-sigue-luego { grid-column: 1 / -1; margin-top: 12px; padding: 12px 14px 8px; gap: 4px; } .content[data-ruta="programa"] .pg-sigue-lista li { padding: 7px 0; } /* áreas y Zona Gold: fila deslizable; si hay una sola área, va a todo el ancho */ .content[data-ruta="programa"] .areas-mosaico { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(84%, 1fr); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 4px 26px; margin: -4px -4px -20px; scrollbar-width: none; } .content[data-ruta="programa"] .areas-mosaico::-webkit-scrollbar { display: none; } .content[data-ruta="programa"] .areas-mosaico > * { scroll-snap-align: center; } /* llega mostrando el área donde vas (en los navegadores que aún no lo permiten, empieza por la primera) */ .content[data-ruta="programa"] .areas-mosaico > .is-progreso { scroll-initial-target: nearest; } .content[data-ruta="programa"] .zg { margin-top: 26px; } } /* la flecha dentro de la cabecera solo si el navegador entiende :has() (si no, sigue en su fila, como antes) y solo cuando lo que sigue es la cabecera del programa (un programa vencido muestra otra cabecera) */ @supports selector(:has(+ *)) { @media (max-width: 600px) { .content[data-ruta="programa"] > .view { position: relative; } .content[data-ruta="programa"] > .view > .volver:has(+ .pg-hero) { position: absolute; z-index: 3; left: 12px; top: 14px; margin: 0; } .content[data-ruta="programa"] > .view > .volver + .pg-hero .pg-chip { margin-left: 50px; margin-top: 6px; } } } @media (max-width: 400px) { /* mapa chico por módulos (Empleabilidad): a 11 px los nombres vecinos se tocaban; ahora bajan a dos líneas más angostas */ .content[data-ruta="programa"] .pm-pt small { width: 68px; } /* en la portada chica de «Sigue donde quedaste», el botón de reproducir va en la esquina de arriba y no tapa «Clase N de M» */ .content[data-ruta="programa"] .pg-sigue-play { left: auto; top: 6px; right: 6px; width: 30px; height: 30px; transform: none; } .content[data-ruta="programa"] .pg-sigue-play svg { width: 14px; height: 14px; margin-left: 2px; } .content[data-ruta="programa"] .pg-sigue-acc { gap: 8px 10px; } .content[data-ruta="programa"] .pg-sigue-acc .btn { padding-left: 12px; padding-right: 12px; } } /* ===================================================================================================================== [CERT] 13-oct · ÁREA y EXAMEN: la flecha de volver va sobre la esquina de la portada (no ocupa su propia fila) y la marca «Remotos Academy» de la portada se corre a su derecha para que la flecha no la tape. La portada, un poco más apaisada; la ficha y los botones, con menos relleno. · Área: el botón del calendario de las clases en vivo mide 44 px (medía 36) y esas clases ya no se salen por la derecha en los teléfonos de 320 px (las columnas no crecen más que la pantalla y «Se abre con el área» puede bajar de línea). · Examen: los cuatro datos de la ficha en dos columnas (antes uno debajo del otro). Con el examen ya empezado, la flecha va dentro del cuadro del reloj, a su izquierda, y los botones de las preguntas (P-01 … P-08) miden 44 px (medían 36). · Pastillas de estado de la portada y el día de las clases en vivo, a 11 px (estaban entre 8,5 y 10,5 px). ===================================================================================================================== */ @media (max-width: 900px) { .content:is([data-ruta="area"], [data-ruta="examen"]) .plano-pastilla { font-size: 11px; } .content[data-ruta="area"] .ar2-ev-dia span:first-child, .content[data-ruta="area"] .ar2-ev-dia span:last-child { font-size: 11px; } } @media (max-width: 600px) { .content:is([data-ruta="area"], [data-ruta="examen"]) .area-cab { margin: 0 0 18px; gap: 12px; } .content:is([data-ruta="area"], [data-ruta="examen"]) .area-cab-img { aspect-ratio: 2 / 1; border-radius: 18px; } .content:is([data-ruta="area"], [data-ruta="examen"]) .area-cab-img .plano { --plano-radio: 18px; } .content:is([data-ruta="area"], [data-ruta="examen"]) .area-cab-info.card { padding: 14px; gap: 6px; } .content[data-ruta="area"] .area-nav { margin-top: 18px; gap: 8px; } .content[data-ruta="area"] .ar2-vivo-cal { width: 44px; height: 44px; } .content[data-ruta="area"] .area-modulos, .content[data-ruta="area"] .ar2-camino, .content[data-ruta="area"] .ar2-vivo-lista { grid-template-columns: minmax(0, 1fr); } .content[data-ruta="area"] .ar2-ev { grid-template-columns: 48px auto minmax(0, 1fr); } .content[data-ruta="area"] .ar2-ev-acc { min-width: 0; } .content[data-ruta="area"] .ar2-ev-nota { white-space: normal; text-align: right; } .content[data-ruta="examen"] .exB-etq { margin-bottom: 6px; } .content[data-ruta="examen"] .exB-tit { margin-bottom: 10px; font-size: 30px; } .content[data-ruta="examen"] .exB-cab .exB-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; margin-bottom: 12px; } .content[data-ruta="examen"] .exB-cab .exB-ficha div { padding: 8px 0; } .content[data-ruta="examen"] .exB-ficha dd { white-space: nowrap; } /* «70 %» no se parte en dos líneas */ .content[data-ruta="examen"] .exB-nota { margin-bottom: 12px; } .content[data-ruta="examen"] .exB-cab .exB-acc > * { flex: 1 1 auto; } .content[data-ruta="examen"] .exB-mapa button { height: 44px; } } /* la flecha sobre la portada o junto al reloj solo si el navegador entiende :has() (si no, sigue en su fila, como antes) */ @supports selector(:has(+ *)) { @media (max-width: 600px) { .content:is([data-ruta="area"], [data-ruta="examen"]) > .view { position: relative; } .content:is([data-ruta="area"], [data-ruta="examen"]) > .view > .volver:has(+ .area-cab) { position: absolute; z-index: 4; left: 10px; top: 10px; margin: 0; } .content:is([data-ruta="area"], [data-ruta="examen"]) > .view > .volver + .area-cab .plano__marca { left: 58px; } .content[data-ruta="examen"] > .view > .volver:has(+ .exB-run) { position: absolute; z-index: 4; left: 12px; top: 14px; margin: 0; } .content[data-ruta="examen"] > .view > .volver + .exB-run { margin-top: 0; } .content[data-ruta="examen"] > .view > .volver + .exB-run .exB-reloj { margin-left: 52px; margin-top: 2px; } } } /* ===================================================================================================================== [CERT] 13-oct · MAPA DE PROGRESO: la flecha de volver a la izquierda del título (antes en su propia fila) y los cuadros de abajo más compactos: las clases del área donde vas con menos relleno, los datos de la Certificación en dos columnas y el porcentaje al lado de «completado». Las etiquetas del camino pasan de 10,5 a 11 px. El camino en sí no cambia: la distancia entre sus paradas la fija app.js (ver la nota del informe). ===================================================================================================================== */ @media (max-width: 900px) { .content[data-ruta="mapa"] .mp-mapa.mp-calmo .mp-p .mp-chip { font-size: 11px; } .content[data-ruta="mapa"] .mp-ex-txt b, .content[data-ruta="mapa"] .mp-ex-txt span { font-size: 11px; } } @media (max-width: 600px) { .content[data-ruta="mapa"] > .view { position: relative; } .content[data-ruta="mapa"] > .view > .volver { position: absolute; z-index: 3; left: 0; top: 0; margin: 0; } .content[data-ruta="mapa"] .mp-cab { margin-bottom: 14px; } .content[data-ruta="mapa"] .mp-cab .page-title { display: flex; align-items: center; min-height: 44px; padding-left: 54px; } .content[data-ruta="mapa"] .mp-cab p { margin-top: 4px; } .content[data-ruta="mapa"] .mp-grid, .content[data-ruta="mapa"] .mp-col { gap: 14px; } .content[data-ruta="mapa"] .mp-actual.card { padding: 14px; gap: 12px; } .content[data-ruta="mapa"] .mp-actual-cab { gap: 8px; } .content[data-ruta="mapa"] .mp-lista .lesson-row { padding: 8px 12px; min-height: 48px; } .content[data-ruta="mapa"] .mp-actual-pie { gap: 8px; } .content[data-ruta="mapa"] .mp-actual-pie .btn { flex: 1 1 auto; justify-content: center; } .content[data-ruta="mapa"] .mp-lado { gap: 14px; } .content[data-ruta="mapa"] .mp-resumen.card { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: end; column-gap: 12px; row-gap: 2px; padding: 16px; text-align: left; } .content[data-ruta="mapa"] .mp-resumen > .pg-etq { grid-column: 1 / -1; } .content[data-ruta="mapa"] .mp-pct { margin-top: 6px; font-size: 72px; } .content[data-ruta="mapa"] .mp-pct-txt { padding-bottom: 6px; } .content[data-ruta="mapa"] .mp-datos { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .content[data-ruta="mapa"] .mp-datos li { gap: 8px; padding: 9px 10px; font-size: 13px; line-height: 1.3; } .content[data-ruta="mapa"] .mp-animo.card { padding: 12px 14px; } .content[data-ruta="mapa"] .mp-animo img { width: 56px; } } /* ===================================================================================================================== [CERT] 13-oct · CLASE. · El final ya no queda debajo del menú de abajo: con «En este módulo» plegado, su lista escondida no ocupa lugar (antes el navegador la seguía midiendo 67 px por debajo del inicio del menú). · Las pestañas (Resumen · Material · Preguntas) y las clases de «En este módulo» se tocan en 44 px; las tres pestañas, en una sola fila (en los teléfonos más angostos, sin sus íconos, que son adorno y no cabían). · La flecha de la clase anterior y el botón principal comparten la fila (antes el botón bajaba a la siguiente). · La flecha de volver sigue en su fila: debajo empieza el video y encima lo taparía. ===================================================================================================================== */ @media (max-width: 900px) { .content[data-ruta="leccion"] .lc-mod:not([open]) > :not(summary) { display: none; } .content[data-ruta="leccion"] .lc-tabs .lc-tab { min-height: 44px; } .content[data-ruta="leccion"] .lc-mod-cab, .content[data-ruta="leccion"] .lc-m-fila, .content[data-ruta="leccion"] .lc-m-ex, .content[data-ruta="leccion"] .lc-mod-ver { min-height: 44px; } } @media (max-width: 600px) { .content[data-ruta="leccion"] > .view > .volver { margin-bottom: 8px; } .content[data-ruta="leccion"] .lc-main { gap: 12px; } .content[data-ruta="leccion"] .lc-cab { gap: 8px; } .content[data-ruta="leccion"] .lc-panel { padding: 14px; } .content[data-ruta="leccion"] .lc-acciones .lc-principal { flex: 1 1 0; min-width: 0; } .content[data-ruta="leccion"] .lc-tabs { justify-self: stretch; flex-wrap: nowrap; } .content[data-ruta="leccion"] .lc-tabs .lc-tab { flex: 1 1 auto; justify-content: center; } .content[data-ruta="leccion"] .lc-lado { margin-top: 12px; } } @media (max-width: 374px) { .content[data-ruta="leccion"] .lc-tabs .lc-tab { padding-left: 8px; padding-right: 8px; } .content[data-ruta="leccion"] .lc-tabs .lc-tab .ic { display: none; } } /* ===================================================================================================================== [CERT] 13-oct · ENTREGA DEL PROYECTO: menos scroll sin quitar ningún paso ni dato. · Cabecera: el ícono a la izquierda del título (antes en su propia fila) y el estado debajo del título; desde 375 px, la flecha de volver a su izquierda, como en la computadora (antes ocupaba su propia fila; en los teléfonos más angostos sigue en su fila, porque la cabecera quedaría angosta y más alta). · «Cómo entregar tu proyecto»: los 6 pasos en una fila que se desliza de lado (antes uno debajo del otro). · El formulario con menos relleno; los nombres de los campos se tocan en 44 px sin agrandar la fila (el relleno extra se compensa con margen negativo). ===================================================================================================================== */ @media (max-width: 600px) { .content[data-ruta^="entrega"] > .view > .volver { margin-bottom: 8px; } /* [CERT] 14-oct: ^= para que sirva también a la actividad del módulo (#/entrega-modulo/...) */ .content[data-ruta^="entrega"] .en-cab { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; margin-top: 0; padding: 14px; } .content[data-ruta^="entrega"] .en-cab-txt { grid-column: 2; } .content[data-ruta^="entrega"] .en-estado { grid-column: 2; justify-self: start; } .content[data-ruta^="entrega"] .en-cab .page-title { font-size: 20px; line-height: 1.25; } .content[data-ruta^="entrega"] .en-hecha { margin-top: 12px; padding: 12px 14px; gap: 10px 14px; } .content[data-ruta^="entrega"] .en-pasos, .content[data-ruta^="entrega"] .en-envio { margin-top: 18px; } .content[data-ruta^="entrega"] .en-h2 { margin-bottom: 10px; } .content[data-ruta^="entrega"] .en-pasos-lista { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 2px 26px; margin: 0 -2px -20px; scrollbar-width: none; } .content[data-ruta^="entrega"] .en-pasos-lista::-webkit-scrollbar { display: none; } .content[data-ruta^="entrega"] .en-paso { scroll-snap-align: start; min-width: 0; } .content[data-ruta^="entrega"] .en-envio { gap: 12px; } .content[data-ruta^="entrega"] .en-revisa, .content[data-ruta^="entrega"] .en-form { padding: 12px 14px; } .content[data-ruta^="entrega"] .en-revisa ul { gap: 8px; } .content[data-ruta^="entrega"] .en-form { gap: 4px; } .content[data-ruta^="entrega"] .en-form .en-h2 { margin-bottom: 4px; } .content[data-ruta^="entrega"] .en-campo { display: block; margin-top: -6px; margin-bottom: -12px; padding: 12px 0; } .content[data-ruta^="entrega"] .en-confirma { margin-top: 6px; padding: 10px 12px; } .content[data-ruta^="entrega"] .en-confirma input { width: 22px; height: 22px; margin: 0; } .content[data-ruta^="entrega"] .en-enviar { margin-top: 8px; } } @media (min-width: 375px) and (max-width: 600px) { .content[data-ruta^="entrega"] > .view { position: relative; } .content[data-ruta^="entrega"] > .view > .volver { position: absolute; z-index: 3; left: 0; top: 0; margin: 0; } .content[data-ruta^="entrega"] .en-cab { margin-left: 54px; } } /* ===================================================================================================================== [CERT] 13-oct · CALENDARIO. · Los filtros siguen en una fila que se desliza de lado (sin bajar a varias líneas) y su borde coincide con el margen real del teléfono (antes salía 4 px por cada lado en los teléfonos de 320-360 px). · Los días, un poco más bajos (46 px; siguen siendo cómodos de tocar). En los teléfonos más angostos miden 40 px de ancho o más (antes 35) y el nombre del mes va en una sola línea al lado de los botones. ===================================================================================================================== */ @media (max-width: 900px) { .content[data-ruta="calendario"] .cal-filtros { margin-left: calc(-1 * var(--mb-lado, 16px)); margin-right: calc(-1 * var(--mb-lado, 16px)); padding-left: var(--mb-lado, 16px); padding-right: var(--mb-lado, 16px); } .content[data-ruta="calendario"] .cal-filtros .seg { flex-wrap: nowrap; max-width: none; } } @media (max-width: 600px) { .content[data-ruta="calendario"] .cal-dia { min-height: 46px; } } @media (max-width: 374px) { .content[data-ruta="calendario"] .cal-mes { margin-left: -6px; margin-right: -6px; padding-left: 4px; padding-right: 4px; } .content[data-ruta="calendario"] .cal-dias, .content[data-ruta="calendario"] .cal-sem { column-gap: 1px; } .content[data-ruta="calendario"] .cal-mes-cab { gap: 8px; margin-left: 6px; margin-right: 6px; } .content[data-ruta="calendario"] .cal-mes-tit { font-size: 25px; } .content[data-ruta="calendario"] .cal-hoy { padding-left: 10px; padding-right: 10px; } } /* [CERT] 14-oct · celular: puntitos del mapa más fáciles de tocar, SIN cambiar el dibujo (el área tocable es invisible). · Mapa completo por clases (Empleabilidad) y mapa chico de la cabecera del programa (600/15): 44 × 44 px. Entre vecinos hay 48 px o más (medido de 320 a 430 px), así que las áreas no se pisan. · Serpentina de la Certificación: los puntitos de los módulos van a 15–17 px uno de otro, así que 44 px se montarían sobre 2 o 3 vecinos. Antes medían 28 px y ya se pisaban (tocar el borde de abajo de un puntito abría el módulo siguiente): ahora cada uno toca exactamente hasta la mitad del camino a sus vecinos (15 px; 13 px los «densos», que van a 13,4 px o más), sin pisarse. */ @media (max-width: 900px) { .pm-full a.pmB-piedra::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; } a.pm-pt::after { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; } /* los puntitos cerrados (no se tocan: no abren nada) dejan pasar el toque; antes el cerrado que sigue al módulo donde vas le tapaba la mitad de abajo y, en 320 px, el puntito entero («Módulo 3 de 5 · En progreso» no se podía abrir) */ .mp-mapa span.pmB-piedra { pointer-events: none; } } @media (max-width: 560px) { .mp-mapa:not(.pm-full) a.pmB-piedra { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; } .mp-mapa:not(.pm-full) a.pmB-piedra.denso { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; } } /* teléfono en horizontal (561–900 px): ahí los puntitos van al 3,4 % del ancho uno de otro (23 px en 667, 26 en 740, 29 en 844): el área mide eso mismo, con tope en los 28 px de antes, así tampoco se pisan */ @media (min-width: 561px) and (max-width: 900px) { .mp-mapa:not(.pm-full) a.pmB-piedra:not(.denso) { width: min(28px, 3.4vw); height: min(28px, 3.4vw); margin: calc(min(28px, 3.4vw) / -2) 0 0 calc(min(28px, 3.4vw) / -2); } .mp-mapa:not(.pm-full) a.pmB-piedra.denso { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; } } /* [CERT] 14-oct · celular: ninguna etiqueta por debajo de 12 px en Inicio, Mis programas, Programa, Mapa, Clase y Entrega (había de 9 a 11,5 px). Se quedan como están, a propósito: el texto de las portadas «plano técnico» (es parte del dibujo y se escala con él), el diploma en miniatura de Certificados (dibujo), la cifra dentro de la barra del mini ranking de Inicio, las insignias «✦ GOLD» y el día del calendario del área, y las iniciales de los avatares. */ @media (max-width: 900px) { #main[data-ruta="inicio"] .in3-nivel-xp span, #main[data-ruta="inicio"] .rk-nom { font-size: 12px; } #main[data-ruta="programas"] .pt-etq, #main[data-ruta="programas"] .pv-etq { font-size: 12px; } #main[data-ruta="programa"] .pg-chip, #main[data-ruta="programa"] .mm-p small, #main[data-ruta="programa"] .pm-pt small, #main[data-ruta="programa"] .pg-sigue-chip, #main[data-ruta="programa"] .pg-etq, #main[data-ruta="programa"] .area-cierre b, #main[data-ruta="programa"] .pmC-area-mini, #main[data-ruta="programa"] .pmC-globo, #main[data-ruta="programa"] .pmC-globo b, #main .plano-pastilla { font-size: 12px; } #main[data-ruta="mapa"] .mp-ex-txt b, #main[data-ruta="mapa"] .mp-ex-txt span, #main[data-ruta="mapa"] .mp-chip, #main[data-ruta="mapa"] .mp-calmo .mp-clases, #main[data-ruta="mapa"] .mp-exl-k, #main[data-ruta="mapa"] .mp-exl-r, #main[data-ruta="mapa"] .pm-area { font-size: 12px; } #main[data-ruta="leccion"] .lc-p-txt small, #main[data-ruta="leccion"] .lc-mod-eti { font-size: 12px; } #main[data-ruta^="entrega"] .en-etq { font-size: 12px; } } /* (revisión) sin achicar nada: «días restantes / clases / exámenes» del Programa miden 11,5 px solo hasta 560 px (de 561 a 900 px ya miden 12,5 px), y «N de M clases» solo es chico en la serpentina de la Certificación (en los mapas de Empleabilidad y del 600/15 mide 12,5 px) */ @media (max-width: 560px) { #main[data-ruta="programa"] .pg-cifra-l { font-size: 12px; } } /* que la letra de 12 px no corte ni tape nada: en 320–360 px la pastilla del mapa («Área 5 · En progreso · 29 %») se salía por el borde y tapaba el círculo del módulo, y los nombres del mapa chico se cortaban con «…»; si no caben, bajan a dos líneas */ @media (max-width: 600px) { #main[data-ruta="mapa"] .mp-chip { white-space: normal; max-width: 100%; } #main[data-ruta="programa"] .mm-p small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; text-wrap: balance; } } /* (revisión) mapa por clases (Empleabilidad) en 320–389 px: la pastilla «Módulo 1 · Completado» a dos líneas y el nombre del área con una línea más empujaban «3 de 3 clases» encima del camino y del puntito de la clase 2 (en 320 px lo tapaba y al tocarlo abría la clase 1). Ahí el texto de cada módulo usa el ancho que queda hasta el borde del mapa, como ya hace la serpentina de la Certificación, y vuelve a caber como antes (desde 390 px ya cabía) */ @media (max-width: 389px) { #main[data-ruta="mapa"] .pm-full .mp-p:not(.mp-fin) .mp-info { width: calc(72cqw - 52px); } #main[data-ruta="mapa"] .pm-full .mp-p.is-actual .mp-info { width: calc(72cqw - 58px); } #main[data-ruta="mapa"] .pm-full .mp-p.is-gold.is-grupo .mp-info { width: calc(72cqw - 70px); } } /* [CERT] 14-oct · celular en HORIZONTAL: el video de la clase entra entero entre la barra de arriba y el menú de abajo (antes medía 812 × 457 px en una pantalla de 390 px de alto: había que bajar para ver los controles). */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { #main[data-ruta="leccion"] .player { width: min(100%, calc((100vh - var(--topbar-h) - var(--mb-nav-total) - 28px) * 16 / 9)); margin-left: auto; margin-right: auto; } @supports (height: 100dvh) { #main[data-ruta="leccion"] .player { width: min(100%, calc((100dvh - var(--topbar-h) - var(--mb-nav-total) - 28px) * 16 / 9)); } } } /* movil-juegos.css */ /* [CERT] Celular — Juega y gana (13-oct): Sala de juegos y los 9 juegos, Misiones, Tienda, Ranking y Logros. TODO va dentro de @media (max-width: 900px) o menos: la computadora no cambia. */ /* ===================================================================================================================== [CERT] 13-oct · Misiones en el celular (pedido del dueño: «que no haya mucho scroll»): la hoja de misiones más baja (el panda se apoya sobre el cajetín, la fecha en una línea, los dos relojes lado a lado y los totales más compactos) y las 9 tarjetas compactas: el plano con el dibujo y el anillo a la izquierda y el texto a la derecha. El sello «RECLAMADA» sigue cayendo sobre el anillo, a su medida. No se quita nada: solo se acomoda. ===================================================================================================================== */ @media (max-width: 900px) { /* el simulador cerrado no ocupa lugar (su contenido quedaba armado debajo del menú de abajo) */ .mn-sim:not([open]) > :not(summary) { display: none; } } @media (max-width: 600px) { .mi-raiz, .mi-cuerpo { gap: 18px; } /* la hoja: el globo y el panda arriba; el panda se apoya sobre la esquina del cajetín */ .mn-cab { --mn-oso-w: 104px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "globo panda" "caj caj"; column-gap: 14px; row-gap: 0; padding: 10px; border-radius: 22px; } .mn-esquinas { inset: 6px; } .mn-oso { display: contents; } .mn-globo { grid-area: globo; align-self: center; justify-self: end; max-width: 236px; margin: 0 0 4px; padding: 7px 11px; font-size: 12px; text-align: left; } .mn-globo::after { left: 100%; top: 50%; width: 12px; height: 1px; } .mn-globo::before { left: calc(100% + 11px); top: calc(50% - 3px); } .mn-panda { grid-area: panda; z-index: 2; width: var(--mn-oso-w); margin-bottom: -44px; } .mn-cajetin { grid-area: caj; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tit" "fecha" "reloj" "tot"; border-radius: 18px; } .mn-caj-tit { padding: 14px 16px 12px; } .mn-t1 { gap: 8px; font-size: 24px; } .mn-t1::after { height: 9px; margin-bottom: 3px; } .mn-t2 { font-size: 60px; } .mn-raya { height: 8px; margin-top: 7px; } .mn-sub { margin-top: 9px; font-size: 13px; line-height: 1.5; } /* la fecha en una línea y, debajo, los dos relojes lado a lado (el nombre arriba y la cuenta abajo) */ .mn-caj-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 9px 16px; border-left: 0; border-top: 1px solid var(--mn-linea); } .mn-caj-fecha .mn-etq { flex: 1 1 auto; margin: 0; letter-spacing: .12em; } .mn-caj-fecha .mn-etq::after { min-width: 0; } .mn-fecha-v { grid-template-columns: auto auto auto; grid-template-areas: "n m d"; align-items: baseline; column-gap: 7px; } .mn-fecha-v b { padding-top: 0; font-size: 34px; } .mn-fecha-m { align-self: baseline; font-size: 17px; } .mn-fecha-d { align-self: baseline; margin: 0; font-size: 12px; } .mn-caj-reloj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 9px 16px 11px; border-left: 0; border-top: 1px dashed var(--mn-linea); } .mn-caj-reloj .mn-etq { grid-column: 1 / -1; margin: 0 0 6px; letter-spacing: .12em; } .mn-reloj-v { display: grid; justify-content: start; gap: 2px; } .mn-reloj-p { font-size: 12px; } .mn-reloj b { font-size: 22px; } .mn-reloj + .mn-reloj { margin: 0; padding: 0 0 0 12px; border-top: 0; border-left: 1px dashed var(--mn-linea); } /* totales: de a dos, más bajos; las celdas del periodo se encogen para no salirse */ .mn-caj-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-dato { padding: 10px 12px 12px; border-left: 1px solid var(--mn-linea); } .mn-dato:nth-child(odd) { padding-left: 16px; border-left: 0; } .mn-dato:nth-child(n+3) { border-top: 1px solid var(--mn-linea); } .mn-dato dt { font-size: 11px; letter-spacing: .1em; } .mn-dato dd { margin-top: 6px; gap: 4px 6px; font-size: 12.5px; } .mn-dato dd > b, .mn-total b { font-size: 30px; } .mn-segs { gap: 4px; margin-top: 5px; } .mn-segs i { flex: 1 1 0; min-width: 0; width: auto; max-width: 24px; height: 11px; } .mn-caj-tot .mn-ficha { height: 28px; gap: 4px; padding: 0 10px 0 3px; } .mn-caj-tot .mn-ficha b { font-size: 19px; } .mn-caj-tot .mn-ficha .mn-moneda, .mn-caj-tot .mn-disco.mn-rango, .mn-caj-tot .mn-disco.mn-rango svg { width: 22px; height: 22px; } /* diarias y semanales */ .mn-sec { gap: 10px; } .mn-sec-t { gap: 10px; font-size: 26px; } .mn-sec-n { font-size: 11px; letter-spacing: .1em; } .mn-grid { gap: 10px; } .mn-sim { padding: 2px 14px; border-radius: 18px; } } /* la tarjeta compacta (con unidades del ancho de la tarjeta: en un navegador viejo queda la tarjeta de siempre). --mn-pl es el ancho del plano: el código y el premio se ubican con él en la fila de arriba del texto. */ @media (max-width: 600px) { @supports (width: 1cqw) { .mn-card { --mn-pl: 100px; border-radius: 20px; } .mn-card-in { display: grid; grid-template-columns: var(--mn-pl) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "plano txt" "pie pie"; column-gap: 12px; height: auto; padding: 8px 12px 0 8px; } .mn-plano { grid-area: plano; align-self: stretch; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "logo" "anillo"; justify-items: center; align-content: center; align-items: start; gap: 2px; min-height: 0; padding: 8px 6px 6px; border-radius: 14px; } .mn-plano::after { --mn-l: 9px; inset: 5px; } .mn-logo { width: 72px; max-width: 100%; } .mn-anillo { gap: 1px; } .mn-dial { width: 56px; height: 56px; } .mn-anillo-num { padding-top: 3px; } .mn-anillo-num b { font-size: 22px; } .mn-anillo-num small { font-size: 12.5px; } .mn-anillo-pie { font-size: 11px; } /* el sello «RECLAMADA» a la medida del anillo chico */ .mn-sello { top: calc(50% + 3px); width: 78px; height: 78px; margin: -39px 0 0 -39px; } /* el código de la misión y su premio, en la fila de arriba del texto */ .mn-cod { position: absolute; top: 6px; left: calc(100% + 12px); gap: 6px; padding: 0; font-size: 16px; } .mn-cod::after { width: 18px; } .mn-plano > .mn-ficha { position: absolute; top: -2px; right: calc(var(--mn-pl) + 20px - 100cqw); height: 30px; gap: 5px; padding: 0 11px 0 3px; } .mn-plano > .mn-ficha b { font-size: 20px; } .mn-plano > .mn-ficha .mn-moneda, .mn-plano > .mn-ficha .mn-disco.mn-rango, .mn-plano > .mn-ficha .mn-disco.mn-rango svg { width: 24px; height: 24px; } .mn-card-txt { grid-area: txt; align-self: start; margin: 0; padding: 36px 0 8px; } .mn-card-t { font-size: 15px; line-height: 1.3; } .mn-card-p { margin-top: 3px; font-size: 12.5px; line-height: 1.45; } .mn-pie { grid-area: pie; gap: 4px 10px; min-height: 46px; margin: 0; padding: 1px 0; } .mn-estado { gap: 6px; font-size: 12.5px; } .mn-ir { gap: 5px; font-size: 13px; } .mn-reclamar { padding: 0 20px; } /* con lugar (tarjeta de 320 px o más, desde los teléfonos de 360 px): el estado y la acción también van a la derecha, debajo del texto */ @container (min-width: 320px) { .mn-card-in { grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "plano txt" "plano pie"; padding-bottom: 8px; } .mn-card-txt { padding-bottom: 4px; } .mn-pie { min-height: 44px; } } } } /* teléfonos de 320 a 359 px: los totales con un poco menos de relleno para que «0/5 semanales» quepa en una línea */ @media (max-width: 359px) { .mn-dato { padding: 10px 10px 12px 12px; } .mn-dato:nth-child(odd) { padding-left: 14px; } .mn-dato dd > b, .mn-total b { font-size: 28px; } } /* teléfonos de 320 a 379 px: el plano un poco más angosto, el premio más chico y el código sin su rayita, para que el código y el premio quepan en su fila y el estado y la acción, en una sola línea */ @media (max-width: 379px) { @supports (width: 1cqw) { .mn-ir { font-size: 12.5px; } .mn-card { --mn-pl: 92px; } .mn-card-in { column-gap: 10px; } .mn-cod { left: calc(100% + 10px); } .mn-cod::after { display: none; } .mn-plano > .mn-ficha { height: 28px; gap: 4px; padding: 0 9px 0 3px; } .mn-plano > .mn-ficha b { font-size: 18px; } .mn-plano > .mn-ficha small { font-size: 11px; } .mn-plano > .mn-ficha .mn-moneda, .mn-plano > .mn-ficha .mn-disco.mn-rango, .mn-plano > .mn-ficha .mn-disco.mn-rango svg { width: 22px; height: 22px; } .mn-logo { width: 66px; } .mn-dial { width: 52px; height: 52px; } .mn-anillo-num b { font-size: 20px; } .mn-sello { width: 74px; height: 74px; margin: -37px 0 0 -37px; } } } /* ===================================================================================================================== [CERT] 13-oct · Sala de juegos en el celular: la cabecera «Panel del jugador» más baja (título, texto, el oso que asoma y el panel de energía, todo un poco más chico), el desafío del día más compacto y las tarjetas de los juegos en filas bajas: el plano del juego más chico a la izquierda y, en el pie, el premio y la energía en una sola línea cuando caben. ===================================================================================================================== */ @media (max-width: 600px) { [data-ruta="juegos"] .sala.pl-cab.h2-cab { --h2-asoma: 22px; padding: 16px 14px 12px; border-radius: 22px; } [data-ruta="juegos"] .h2-cab .h2-t1 { gap: 8px; font-size: 24px; } [data-ruta="juegos"] .h2-cab .h2-t1::after { height: 9px; margin-bottom: 3px; } [data-ruta="juegos"] .h2-cab .h2-t2 { font-size: 62px; } [data-ruta="juegos"] .h2-cab .h2-medida .pl-raya { height: 8px; margin-top: 7px; } :root:not([data-theme="dark"]) [data-ruta="juegos"] .sala.pl-cab.h2-cab .sala-txt p, :root[data-theme="dark"] [data-ruta="juegos"] .sala.pl-cab.h2-cab .sala-txt p { grid-area: txt; align-self: center; margin: 10px 0 14px; font-size: 13.5px; line-height: 1.6; } [data-ruta="juegos"] .h2-cab .h2-oso .sala-panda { width: 104px; height: 104px; } [data-ruta="juegos"] .h2-cab .h2-panel { padding: 10px 14px 10px; border-radius: 18px; } [data-ruta="juegos"] .h2-cab .energia.h2-energia { column-gap: 14px; } [data-ruta="juegos"] .h2-cab .h2-etq { margin: 0 0 5px; } [data-ruta="juegos"] .h2-cab .h2-cifra { padding-right: 14px; font-size: 20px; } [data-ruta="juegos"] .h2-cab .h2-cifra b { font-size: 48px; } [data-ruta="juegos"] .h2-cab .h2-estado { font-size: 12px; } [data-ruta="juegos"] .h2-cab .h2-regla { height: 34px; margin-top: 10px; background-position: 0 25px; } [data-ruta="juegos"] .h2-cab .h2-regla i::before { height: 20px; border-radius: 4px; } [data-ruta="juegos"] .h2-cab .h2-regla i::after, [data-ruta="juegos"] .h2-cab .h2-regla::after { top: 25px; } [data-ruta="juegos"] .h2-cab .h2-regla i::after { height: 4px; } [data-ruta="juegos"] .h2-cab .h2-regla i:nth-child(5n+1)::after, [data-ruta="juegos"] .h2-cab .h2-regla::after { height: 8px; } /* el desafío del día: el talón más chico y el botón a lo ancho, de 44 px */ [data-ruta="juegos"] .juegos-dia { margin-top: 12px; } [data-ruta="juegos"] .reto-dia.pl-ticket { gap: 0 12px; padding: 10px; border-radius: 18px; } [data-ruta="juegos"] .reto-dia .figura.pl-logo { width: 68px; height: 54px; border-radius: 12px; } [data-ruta="juegos"] .reto-dia .figura.pl-logo svg { padding: 3px; } [data-ruta="juegos"] .pl-talon { padding-right: 12px; } [data-ruta="juegos"] .pl-talon::after { top: -10px; bottom: -4px; } [data-ruta="juegos"] .pl-ticket .reto-cuerpo { gap: 4px; } [data-ruta="juegos"] .pl-ticket .reto-etq { font-size: 11px; letter-spacing: .1em; } [data-ruta="juegos"] .pl-ticket .reto-cuerpo b { font-size: 14.5px; line-height: 1.35; } [data-ruta="juegos"] .pl-ticket .btn { min-height: 44px; margin-top: 10px; } /* los juegos: filas bajas con el plano chico a la izquierda */ [data-ruta="juegos"] .juegos-grid { gap: 10px; margin-top: 12px; } [data-ruta="juegos"] .juego { grid-template-columns: 68px minmax(0, 1fr); gap: 0 8px; padding: 8px 10px 8px 8px; border-radius: 18px; } [data-ruta="juegos"] .juego .figura.pl-logo { width: 68px; height: 68px; border-radius: 12px; } [data-ruta="juegos"] .juego .figura.pl-logo svg { padding: 3px; } [data-ruta="juegos"] .juego-cuerpo { gap: 2px; margin: 2px 0 6px; } [data-ruta="juegos"] .juego-cuerpo b { font-size: 15px; line-height: 1.25; } [data-ruta="juegos"] .juego-cuerpo span { font-size: 12.5px; line-height: 1.4; } [data-ruta="juegos"] .juego-pie { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 10px; padding-top: 6px; } } @media (max-width: 359px) { [data-ruta="juegos"] .juego { grid-template-columns: 62px minmax(0, 1fr); } [data-ruta="juegos"] .juego .figura.pl-logo { width: 62px; height: 62px; } [data-ruta="juegos"] .h2-cab .h2-t2 { font-size: 56px; } [data-ruta="juegos"] .h2-cab .h2-oso .sala-panda { width: 90px; height: 90px; } [data-ruta="juegos"] .reto-dia .figura.pl-logo { width: 56px; height: 46px; } [data-ruta="juegos"] .pl-talon { padding-right: 10px; } [data-ruta="juegos"] .reto-dia.pl-ticket { gap: 0 10px; } } /* ===================================================================================================================== [CERT] 13-oct · Logros en el celular (diseño «Álbum por categorías»): la tarjeta de nivel y la cabecera más bajas, el índice de categorías siempre de a dos (en 320 px quedaba de a uno: 400 px de alto), el filtro con botones de 44 px y las páginas del álbum que se pasan de lado, como un álbum de verdad: se ve una página entera y asoma la siguiente; el índice de arriba lleva a cualquiera. Las medallas un poco más chicas. No se quita nada: todas las categorías y medallas siguen ahí. ===================================================================================================================== */ @media (max-width: 600px) { /* la tarjeta de nivel (la pinta app.js) */ .lg-nivel-cab { margin-bottom: 12px; } .lg-nivel-cab .level-card { gap: 12px; padding: 10px 14px 12px 10px; border-radius: 20px; } .lg-nivel-cab .level-badge { width: 52px; height: 52px; border-radius: 15px; } .lg-nivel-cab .level-badge.rango, .lg-nivel-cab .level-badge.rango > svg { width: 58px; height: 58px; } .lg-nivel-cab .level-card .grow { gap: 5px; } .lg-nivel-cab .level-card h3 { font-size: 22px; } .lg-nivel-cab .level-card small.muted { font-size: 12px; } .lg-raiz { gap: 14px; } /* cabecera: el anillo y el oso un poco más chicos */ .lg-cab { gap: 4px 10px; padding: 16px 14px 0 16px; border-radius: 22px; } .lg-cab-etq { margin-bottom: 4px; } .lg-titulo { font-size: 46px; } .lg-lema { margin-top: 8px; font-size: 13px; line-height: 1.45; } .lg-anillo { gap: 4px; padding: 2px 0 14px; } .lg-anillo-graf { width: 92px; height: 92px; } .lg-anillo-n b { font-size: 38px; padding-top: 5px; } .lg-anillo-n span { font-size: 11px; } .lg-anillo-l { font-size: 11px; letter-spacing: .1em; } .lg-panda { width: 116px; height: 116px; } /* índice: de a dos también en los teléfonos más angostos */ .lg-al-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lg-al-chip { column-gap: 8px; min-height: 56px; padding: 8px 10px 8px 8px; border-radius: 16px; } .lg-al-chip-aro { width: 36px; height: 36px; } /* filtro: botones de 44 px */ .lg-filtros { padding: 4px; } .lg-filtros button { min-height: 44px; } /* las páginas del álbum se pasan de lado; llegan hasta el borde de la pantalla (calc(50% - 50vw)) y la primera queda alineada con el resto del contenido. Todas las páginas tienen el alto de la más larga, como las hojas de un álbum. */ .lg-al-paginas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%; gap: 10px; margin-inline: calc(50% - 50vw); padding: 6px calc(50vw - 50%) 18px; scroll-padding-inline: var(--mb-lado, 16px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .lg-al-paginas::-webkit-scrollbar { display: none; } .lg-al-panel { scroll-snap-align: start; gap: 10px; padding: 14px 8px 8px; border-radius: 22px; } .lg-al-cab { gap: 10px; padding: 0 4px; } .lg-al-ic { width: 36px; height: 36px; border-radius: 12px; } .lg-al-titulo { font-size: 24px; } .lg-al-cuenta b { font-size: 28px; } .lg-al-barra { margin: 0 4px; } .lg-al-grid { gap: 0 2px; } .lg-al-ficha { padding: 10px 1px 8px; } .lg-al-med { --caja: 64px; margin: 2px 0 11px; } .lg-al-nom { font-size: 11.5px; } /* las etiquetas chicas a 11 px (medían 9,5 px) */ .lg-al-tag, .lg-al-ok { font-size: 11px; letter-spacing: .06em; } } /* ===================================================================================================================== [CERT] 13-oct · Tienda en el celular: cabecera, inventario y mostrador más bajos; las pestañas de 44 px para tocarlas y las baldosas más compactas (la etiqueta de arriba se apoya sobre el pedestal, el dibujo un poco más chico, menos relleno). ===================================================================================================================== */ @media (max-width: 600px) { .tda.tdB { gap: 14px; } .tdB-cab { padding: 14px 14px 14px; border-radius: 22px; } .tdB-txt { padding-right: 92px; } .tdB-eyebrow { font-size: 11px; } .tdB-titulo { margin: 3px 0 4px; font-size: 48px; } .tdB-sub { margin: 0 0 10px; font-size: 13px; line-height: 1.45; } .tdB-saldo-box { margin-right: -92px; } .tdB-saldo { gap: 10px; padding: 6px 18px 6px 6px; } .tdB-saldo-ic { width: 36px; height: 36px; } .tdB-saldo-txt b { font-size: 36px; } .tdB-oso { right: -6px; top: 8px; width: 100px; height: 112px; } .tdB-inv { padding: 12px 12px 10px; border-radius: 22px; } .tdB-inv-cab { margin-bottom: 8px; } .tdB-h2 { font-size: 24px; } .tdB-slots { grid-auto-columns: 146px; gap: 8px; margin: 0 -12px; padding: 2px 12px 4px; scroll-padding-inline: 12px; } .tdB-slot { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; padding: 6px 10px 6px 6px; } .tdB-anillo { width: 46px; height: 46px; } .tdB-ic { width: 22px; height: 22px; } .tdB-escudo { width: 25px; height: 29px; } .tdB-llama { width: 13px; height: 13px; left: 16px; top: 17px; } .tdB-inf { width: 26px; height: 16px; } .tdB-5050 { font-size: 15px; } .tdB-slot-txt b { font-size: 13px; } .tdB-mostrador-cab { gap: 8px; margin-bottom: 10px; } .tdB-tabs { padding: 4px; } .tdB-tabs label { min-height: 44px; padding: 0 14px; } .tdB-grid { gap: 10px; } .tdB-tile { gap: 4px; padding: 10px 8px 10px; border-radius: 18px; } .tdB-etq { top: 8px; right: 8px; z-index: 1; font-size: 11px; } .tdB-pedestal { height: 74px; margin: 12px 0 2px; } .tdB-pedestal .tda-arte { width: 92px; height: 72px; } .tdB-pedestal::before { width: 104px; height: 22px; bottom: 2px; } .tdB-pedestal::after { width: 90px; height: 90px; } .tdB-tile .tda-ficha-t { font-size: 14px; } .tdB-que { font-size: 12px; line-height: 1.4; -webkit-line-clamp: unset; line-clamp: unset; } /* la descripción completa, sin cortarse con «…» */ .tdB-tile .tda-ficha-estado { font-size: 12px; } .tdB-precio { min-height: 44px; margin-top: auto; padding: 0 10px; } .tdB-precio b { font-size: 24px; } .tdB-precio.falta:disabled { font-size: 12px; } } /* teléfonos angostos: las 4 pestañas caben a lo ancho, sin cortarse a la derecha */ @media (max-width: 400px) { .tdB-tabs { display: flex; width: 100%; overflow: visible; } .tdB-tabs label { flex: 1 1 auto; justify-content: center; padding: 0 8px; font-size: 13px; } } /* ===================================================================================================================== [CERT] 13-oct · Ranking en el celular: cabecera más baja con los dos selectores a lo ancho y con botones de 44 px (medían 36), «Tu puesto» con el número y los XP en una fila, «Los 3 primeros» más bajo y la lista desde el #4 con filas más bajas. ===================================================================================================================== */ @media (max-width: 600px) { .rkg-cab { gap: 0 10px; margin-top: 0; } .rkg-ceja { margin: 0 0 6px; font-size: 11px; } .rkg-titulo { font-size: 50px; } .rkg-sub { margin-top: 8px; font-size: 13.5px; line-height: 1.5; } .rkg-oso { width: 104px; height: 104px; } .rkg-controles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 12px 0 12px; } [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) { display: flex; width: 100%; flex-wrap: nowrap; padding: 3px; } [data-ruta="ranking"] :is(.rkg-progs, .rkg-controles .seg) button { flex: 1 1 0; justify-content: center; min-width: 0; min-height: 44px; padding: 0 10px; } [data-ruta="ranking"] .rkg-tu { gap: 10px; padding: 14px 16px 14px; border-radius: 22px; } .rkg-tu-num { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "etq etq" "cifra xp"; align-items: end; column-gap: 12px; } .rkg-tu-num .rkg-etq { grid-area: etq; } .rkg-cifra { grid-area: cifra; margin: 8px 0 0; font-size: 64px; } .rkg-xp { grid-area: xp; margin: 0 0 6px; font-size: 24px; } .rkg-tu-meta p { font-size: 14px; line-height: 1.5; } .rkg-nivel { gap: 2px 8px; margin-top: 8px; font-size: 13.5px; line-height: 1.4; } .rkg-nivel .rng-ins { width: 40px; height: 40px; } [data-ruta="ranking"] .rkg-podio { margin-top: 14px; padding: 14px 12px 12px; border-radius: 22px; } .rkg-podio ol { gap: 8px; margin-top: 2px; } .rkg-av { margin-bottom: 16px; } .rkg-podio .avatar { margin-bottom: 0; } .rkg-podio-ins { right: -30px; bottom: -12px; } .rkg-podio-ins .rng-ins { width: 44px; height: 44px; } .rkg-podio li.p1 .rkg-podio-ins { right: -34px; bottom: -13px; } .rkg-podio li.p1 .rkg-podio-ins .rng-ins { width: 52px; height: 52px; } /* el nombre completo: si no cabe, baja a una segunda línea (antes se cortaba con «…» en 320 px) */ .rkg-podio li b { font-size: 13px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; } .rkg-podio-xp { font-size: 15px; } .rkg-podio li i { font-size: 36px; } .rkg-podio li.p1 i { font-size: 46px; } [data-ruta="ranking"] .rkg-tabla { margin-top: 14px; padding: 4px 6px; border-radius: 22px; } .rkg-f { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 12px; } /* filas que solo se leen (no se tocan) */ .rkg-pos { font-size: 20px; } .rkg-n { flex-wrap: wrap; row-gap: 2px; padding-block: 4px; white-space: normal; overflow: visible; font-size: 14px; line-height: 1.3; } /* el nombre completo (antes «Ronaldo Mayorga Tú» se cortaba en 320 px) */ .rkg-pxp { font-size: 19px; } .rkg-pxp small { font-size: 12px; } .rkg-chip { font-size: 11px; } .rkg-salto { margin: 2px 50px; } .rkg-pie { margin-top: 12px; font-size: 12.5px; line-height: 1.5; } /* el aviso «¡Subiste al #N!»: la etiqueta a 11 px y la X y «Ver el ranking» con 44 px para el dedo (sin agrandar el aviso) */ .rk-sube-etq { font-size: 11px; } .rk-sube-x, .rk-sube-ir { position: relative; } .rk-sube-x::before { content: ""; position: absolute; inset: -6px; } .rk-sube-ir::before { content: ""; position: absolute; inset: -13px -8px; } } /* ===================================================================================================================== [CERT] 13-oct · Los 9 juegos en el celular: «Antes de jugar» con el dibujo del juego al lado del título (antes ocupaba una fila entera), el Jackpot que ya no se sale por la derecha (en 320 px se cortaban la máquina y la tabla de premios), la Memoria en 3 columnas también en 320 px (para ver el tablero entero de un vistazo), la Entrevista con las flechas al lado del texto, las teclas del Ahorcado de 44 px y las letras chicas a 11 px o más. ===================================================================================================================== */ @media (max-width: 600px) { /* antes de jugar: el dibujo a la derecha del título */ [data-ruta="juegos"] .partida.p2-intro { grid-template-columns: minmax(0, 1fr) clamp(96px, 32%, 132px); grid-template-areas: "volver fig" "tit fig" "txt txt" "premio premio" "ener ener" "btn btn"; column-gap: 12px; row-gap: 12px; padding: 14px 14px 18px; } [data-ruta="juegos"] .p2-intro > .p2-pantalla { align-self: start; padding: 8px; border-radius: 18px; } [data-ruta="juegos"] .p2-intro .p2-pantalla .figura.pl-logo { height: 96px; } [data-ruta="juegos"] .p2-intro .p2-pantalla .figura.pl-logo svg { padding: 6px; } [data-ruta="juegos"] .p2-intro .partida-titulo { font-size: 36px; } /* Jackpot: la máquina a lo ancho de la tarjeta, sin salirse (la columna ya no se estira con el letrero) */ [data-ruta="juegos"] .jx-ruleta .jx-ru-juego { grid-template-columns: minmax(0, 1fr); } [data-ruta="juegos"] .jx-jackpot { width: 100%; margin-top: 6px; padding: 10px 8px 10px; border-radius: 24px; } [data-ruta="juegos"] .jx-jp-letrero { gap: 8px; margin-bottom: 10px; padding: 8px 10px; border-radius: 16px; } [data-ruta="juegos"] .jx-jp-titulo { font-size: 30px; letter-spacing: .08em; } [data-ruta="juegos"] .jx-jp-luces { gap: 4px; } [data-ruta="juegos"] .jx-jp-luces i { width: 5px; height: 5px; } [data-ruta="juegos"] .jx-jp-ventana { padding: 8px 14px; border-radius: 18px; } [data-ruta="juegos"] .jx-jackpot .jx-rodillo { --celda: 76px; --asoma: 20px; } [data-ruta="juegos"] .jx-jackpot .jx-sim { --t: 40px; } [data-ruta="juegos"] .jx-jackpot .jx-sim b { font-size: 16px; } [data-ruta="juegos"] .jx-jp-pagos { margin-top: 10px; padding: 10px 8px 8px; border-radius: 16px; } [data-ruta="juegos"] .jx-jp-pagos ul { gap: 5px; } [data-ruta="juegos"] .jx-jp-pagos li { padding: 6px 1px; } [data-ruta="juegos"] .jx-jp-pagos li .jx-sim.mini { --t: 32px; } [data-ruta="juegos"] .jx-jp-pago-n { font-size: 11px; } [data-ruta="juegos"] .jx-jp-nota { font-size: 12px; } /* Memoria: 3 columnas también en los teléfonos más angostos */ [data-ruta="juegos"] .jx-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } [data-ruta="juegos"] .jx-tablero .jx-carta:last-child:nth-child(3n + 1) { grid-column: 2; } [data-ruta="juegos"] .jx-carta { --alto: 100px; } [data-ruta="juegos"] .jx-tablero .jx-texto { font-size: 12px; line-height: 1.2; } [data-ruta="juegos"] .jx-tablero .jx-texto.largo { font-size: 11.5px; } [data-ruta="juegos"] .jx-tablero .jx-texto-c { font-size: 12.5px; line-height: 1.18; } [data-ruta="juegos"] .jx-mem .jx-ayuda { margin-bottom: 10px; font-size: 12.5px; } /* Entrevista: las flechas de subir y bajar al lado del texto (antes, una fila más por tarjeta) */ [data-ruta="juegos"] .jx-entrevista-juego .jx-star { gap: 10px; margin-top: 18px; } [data-ruta="juegos"] .jx-star-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 8px 10px 10px; } [data-ruta="juegos"] .jx-star-btns { grid-column: auto; flex-direction: column; gap: 6px; } [data-ruta="juegos"] :is(.jx-star-n, .jx-star-letra) { width: 34px; height: 34px; font-size: 21px; } [data-ruta="juegos"] .jx-star-txt { font-size: 14px; line-height: 1.4; } /* Ahorcado: teclas de 44 px; desafío del día: la etiqueta de arriba a 11 px */ .ah-tecla { min-height: 44px; } .p2-juego { font-size: 11px; letter-spacing: .08em; } } @media (max-width: 400px) { [data-ruta="juegos"] .jx-jp-luces i:nth-child(n+6) { display: none; } /* 5 luces por lado (adorno), para que el letrero quepa */ [data-ruta="juegos"] .p2-intro .partida-titulo { font-size: 32px; } } /* [CERT] 14-oct · celular: ninguna etiqueta por debajo de 12 px en Ranking, Logros, Tienda, Misiones y Juegos (había de 11 a 11,5 px). A propósito no se tocan: las insignias («Tú» del ranking, «¡Casi!» de las medallas, el nivel dentro de su insignia, «1 hora» de la tienda), las cifras dentro de los anillos de Logros y Misiones y el texto dentro de los logos de los juegos (dibujos). */ @media (max-width: 900px) { #main[data-ruta="ranking"] .rkg-ceja, #main[data-ruta="ranking"] .rkg-etq { font-size: 12px; } #main[data-ruta="logros"] .lg-cab-etq, #main[data-ruta="logros"] .lg-al-meta { font-size: 12px; } #main[data-ruta="tienda"] .tdB-eyebrow { font-size: 12px; } #main[data-ruta="misiones"] .mn-etq, #main[data-ruta="misiones"] .mn-dato dt, #main[data-ruta="misiones"] .mn-ficha small, #main[data-ruta="misiones"] .mn-sec-n { font-size: 12px; } #main[data-ruta="juegos"] .energia .h2-etq, #main[data-ruta="juegos"] .reto-etq, #main[data-ruta="juegos"] .jx-jp-pagos-t, #main[data-ruta="juegos"] .jx-jp-pago-n, #main[data-ruta="juegos"] .p2-juego, #main[data-ruta="juegos"] .jx-jp-nota { font-size: 12px; } } /* (revisión) el nombre de cada medalla (y el «XP» de su línea) mide menos de 12 px solo hasta 600 px; más ancho (celular en horizontal) ya mide 12–12,5 px y no se achica */ @media (max-width: 600px) { #main[data-ruta="logros"] .lg-al-nom, #main[data-ruta="logros"] .lg-al-meta .xp-txt { font-size: 12px; } } @media (max-width: 359px) { #main[data-ruta="juegos"] .p2-juego { letter-spacing: .04em; } } /* en 320 px «Gana 25 monedas» se cortaba con «…» */ /* perfil.css */ /* Campus Remotos Academy · Perfil · Propuesta C «Mi carrera» (13-oct). Prefijo «per-». Vidrio: el de .perfil .card que ya aprobó el dueño (velo blanco .52 → .18, sin desenfoque, filo de luz y grano), sin figuras detrás. Los paneles de adentro son el mismo vidrio más fino. Azul de marca para cifras y acentos; amarillo solo en los íconos de los datos y en el subrayado de «te faltan». */ .per { --per-acento: var(--azul, #0400bc); --per-pista: rgba(4, 0, 188, .09); --per-barra: linear-gradient(90deg, #0012fd, #0400bc); --per-panel: linear-gradient(145deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16)); --per-panel-borde: rgba(255, 255, 255, .72); --per-linea: rgba(4, 0, 188, .08); --per-ic-fondo: #0400bc; --per-ic-color: #ffe400; display: grid; gap: 18px; min-width: 0; } .per > * { min-width: 0; margin: 0; } .per .section { margin: 0; } /* ---------- 1. Tarjeta del alumno ---------- */ .per .per-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: center; padding: 26px; border-radius: 26px; } .per .per-hero.per-hero-solo { grid-template-columns: minmax(0, 1fr); } .per-quien { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; min-width: 0; } .per-quien > .avatar { grid-column: 1; grid-row: 1 / span 4; align-self: start; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 14px 26px -14px rgba(4, 0, 188, .55); } .per .per-nombre { grid-column: 2; margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; color: var(--text); } .per-correo { grid-column: 2; margin: 0; font-size: 14px; color: var(--text-3); overflow-wrap: anywhere; } .per-hechos { grid-column: 2; list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; font-weight: 550; color: var(--text-2); } .per-hechos li { display: inline-flex; align-items: center; gap: 5px; } .per-hechos .ic { color: var(--per-acento); flex: none; } .per .per-editar { grid-column: 2; justify-self: start; margin-top: 10px; gap: 6px; } .per-carrera { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 20px; border-radius: 20px; background: var(--per-panel); border: 1px solid var(--per-panel-borde); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 30px -24px rgba(4, 0, 188, .45); } .per-insignia { width: 92px; height: 92px; display: grid; place-items: center; filter: drop-shadow(0 10px 14px rgba(4, 0, 188, .25)); } .per-insignia svg { display: block; width: 100%; height: 100%; } .per-carrera-txt { min-width: 0; } .per-etq { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); } .per-nivel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 10px; } .per-nivel b { font-family: var(--font-display, "Bebas Neue", Impact, sans-serif); font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: .02em; color: var(--per-acento); } .per-nivel span { font-size: 13px; font-weight: 600; color: var(--text-2); } .per-xpbar, .per-barra { height: 10px; border-radius: 99px; background: var(--per-pista); overflow: hidden; } .per-xpbar > span, .per-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--per-barra); transform-origin: left center; animation: per-crece .9s cubic-bezier(.2, .8, .2, 1) both; } .per-xp-txt { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); } .per-xp-txt b { color: var(--text); font-weight: 700; } .per-falta { background: linear-gradient(transparent 62%, rgba(255, 228, 0, .6) 62%); padding: 0 1px; } @keyframes per-crece { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- 2. Fila de datos ---------- */ .per-datos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--per-n, 3), minmax(0, 1fr)); gap: 14px; } .per-datos > li { min-width: 0; display: flex; } .per .per-dato { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; min-width: 0; color: inherit; text-decoration: none; } .per-dato-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--per-ic-fondo); color: var(--per-ic-color); box-shadow: 0 10px 18px -10px rgba(4, 0, 188, .7); } .per-dato-txt { display: grid; min-width: 0; } .per-dato-txt b { font-family: var(--font-display, "Bebas Neue", Impact, sans-serif); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: .02em; color: var(--text); } .per-dato-txt small { font-size: 12.5px; font-weight: 550; color: var(--text-3); line-height: 1.3; } .per .per-dato-link { transition: transform .2s ease; } .per .per-dato-link:hover { transform: translateY(-2px); } .per .per-dato-link:focus-visible, .per .per-prog:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* ---------- 3. Mis programas ---------- */ .per-progs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; } .per .per-prog { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px 20px; border-radius: 22px; color: inherit; text-decoration: none; min-width: 0; transition: transform .2s ease; } .per-prog-avance { align-self: end; } /* las barras y el pie quedan a la misma altura en todas las tarjetas */ .per .per-prog:hover { transform: translateY(-2px); } .per-prog-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; } .per-prog-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--pc, #0400bc); background: rgba(4, 0, 188, .08); background: color-mix(in srgb, var(--pc, #0400bc) 13%, transparent); } .per-prog-tit { min-width: 0; } .per-prog-tit b { display: block; font-size: 15.5px; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; } .per-prog-tit small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; } .per-fila { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-3); } .per-fila b { color: var(--text); } .per .per-barra { height: 8px; } .per-barra > span { background: var(--pc, #0400bc); } .per-vencido .per-barra > span { background: var(--text-3); opacity: .55; } .per-prog-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--per-linea); font-size: 13px; } .per-prog-nivel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); } .per-mini { width: 30px; height: 30px; display: grid; place-items: center; flex: none; } .per-mini svg { display: block; width: 100%; height: 100%; } .per-prog-ir { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--per-acento); margin-left: auto; } .per .per-prog:hover .per-prog-ir .ic { transform: translateX(2px); } .per-prog-ir .ic { transition: transform .2s ease; } /* ---------- 4. Ajustes de la cuenta ---------- */ .per .per-ajustes { padding: 0; border-radius: 24px; } .per-ajustes summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 22px; cursor: pointer; list-style: none; border-radius: 24px; } .per-ajustes summary::-webkit-details-marker { display: none; } .per-ajustes summary::marker { content: ""; } .per-ajustes summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; } .per-sum-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--per-acento); } .per-sum-txt { min-width: 0; display: grid; gap: 2px; } .per-sum-txt b { font-size: 16px; color: var(--text); } .per-sum-txt small { font-size: 12.5px; color: var(--text-3); } .per-sum-flecha { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: rgba(255, 255, 255, .55); border: 1px solid var(--per-panel-borde); transition: transform .25s ease; } .per-ajustes details[open] .per-sum-flecha { transform: rotate(180deg); } .per-ajustes-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 2px 22px 22px; } .per-grupo { min-width: 0; padding: 16px 18px 6px; border-radius: 18px; background: var(--per-panel); border: 1px solid var(--per-panel-borde); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); } .per-grupo.per-ancho { grid-column: 1 / -1; padding-bottom: 16px; } .per-h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--text); } .per-h3 .ic { color: var(--per-acento); } .per-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 9px 14px; margin: 10px 0 0; font-size: 13.5px; } .per-kv dt { color: var(--text-3); font-weight: 550; } .per-kv dd { margin: 0; font-weight: 550; color: var(--text); overflow-wrap: anywhere; } .per-pend { display: block; font-size: 12px; color: var(--warning); font-weight: 600; } .per-vacio { color: var(--text-3); font-weight: 500; } .per-nota { display: flex; align-items: center; gap: 6px; margin: 14px 0 10px; font-size: 12.5px; color: var(--text-3); } .per-grupo .toggle-row { border-color: var(--per-linea); } .per-tema { flex-wrap: wrap; } .per-tema > .grow { flex: 1 1 180px; } .per-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; } .per-accion { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .36); border: 1px solid var(--per-linea); min-width: 0; } .per-accion-txt { min-width: 0; } .per-accion .btn { border: 1px solid var(--border-strong); } .per-baja { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 2px 4px 0; font-size: 13px; color: var(--text-3); } .per-baja > span { display: inline-flex; align-items: center; gap: 7px; } /* ---------- Tableta: la tarjeta del alumno en una columna ---------- */ @media (max-width: 1080px) { .per .per-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; } } /* ---------- Celular ---------- */ @media (max-width: 560px) { .per { gap: 14px; } .per .per-hero { padding: 18px 16px; border-radius: 22px; gap: 16px; } .per-quien { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; } .per-quien > .avatar { grid-row: 1 / span 2; align-self: center; width: 58px; height: 58px; font-size: 20px; } .per .per-nombre { grid-column: 2; grid-row: 1; align-self: end; font-size: 21px; } .per-correo { grid-column: 2 / -1; grid-row: 2; align-self: start; font-size: 13px; } .per-hechos { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; gap: 6px 12px; } .per .per-editar { grid-column: 3; grid-row: 1; align-self: end; margin: 0; padding-inline: 12px; } .per-carrera { padding: 14px; gap: 14px; border-radius: 18px; } .per-insignia { width: 70px; height: 70px; } .per-nivel b { font-size: 30px; } .per-nivel { margin-bottom: 8px; } .per-datos { gap: 8px; } .per .per-dato { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 18px; } .per-dato-ic { width: 32px; height: 32px; border-radius: 10px; } .per-dato-ic .ic { width: 16px; height: 16px; } .per-dato-txt b { font-size: 28px; } .per-dato-txt small { font-size: 11.5px; } .per .per-prog { padding: 16px; border-radius: 20px; } .per-ajustes summary { padding: 16px; gap: 12px; } .per-ajustes-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 12px 14px; } .per-grupo { padding: 14px 14px 4px; } .per-grupo.per-ancho { padding-bottom: 14px; } .per-kv { grid-template-columns: minmax(0, 1fr); gap: 0; } .per-kv dd + dt { margin-top: 10px; } .per-acciones { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; } .per-accion, :root[data-theme="dark"] .per-accion { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 0; border: 0; border-radius: 0; background: none; } .per-accion + .per-accion { border-top: 1px solid var(--per-linea); } .per-baja { padding: 2px 2px 0; } /* el menú de abajo mide 62 px más la franja del iPhone: ese aire queda libre al final (además del margen del contenido) */ .per { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 360px) { .per-dato-txt b { font-size: 24px; } .per .per-dato { padding: 10px; } } /* ---------- Modo oscuro ---------- */ :root[data-theme="dark"] .per { --per-pista: rgba(255, 255, 255, .10); --per-barra: linear-gradient(90deg, #4a57ff, #a3abff); --per-panel: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); --per-panel-borde: rgba(255, 255, 255, .09); --per-linea: rgba(255, 255, 255, .08); --per-ic-fondo: #2a37e8; } :root[data-theme="dark"] .per-quien > .avatar { box-shadow: 0 0 0 4px rgba(255, 255, 255, .08), 0 14px 26px -14px rgba(0, 0, 0, .8); } :root[data-theme="dark"] .per-carrera, :root[data-theme="dark"] .per-grupo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } :root[data-theme="dark"] .per-insignia { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); } :root[data-theme="dark"] .per-falta { background: linear-gradient(transparent 62%, rgba(255, 228, 0, .3) 62%); } :root[data-theme="dark"] .per-dato-ic { box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .8); } :root[data-theme="dark"] .per-prog-ic { color: color-mix(in srgb, var(--pc, #0400bc) 40%, #fff); background: color-mix(in srgb, var(--pc, #0400bc) 30%, transparent); } :root[data-theme="dark"] .per-barra > span { background: color-mix(in srgb, var(--pc, #0400bc) 50%, #fff); } :root[data-theme="dark"] .per-vencido .per-barra > span { background: var(--text-3); opacity: .5; } :root[data-theme="dark"] .per-sum-ic { background: rgba(142, 151, 255, .16); color: #c7ccff; } :root[data-theme="dark"] .per-sum-flecha { background: rgba(255, 255, 255, .06); } :root[data-theme="dark"] .per-accion { background: rgba(255, 255, 255, .03); } :root[data-theme="dark"] .per-accion .btn { border-color: rgba(255, 255, 255, .16); } /* ---------- Accesibilidad ---------- */ @media (prefers-reduced-motion: reduce) { .per-xpbar > span, .per-barra > span { animation: none; } .per .per-prog, .per .per-dato-link, .per-sum-flecha, .per-prog-ir .ic { transition: none; } .per .per-prog:hover, .per .per-dato-link:hover { transform: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .per-carrera, .per-grupo, .per-accion { background: #f6f7ff; } :root[data-theme="dark"] .per-carrera, :root[data-theme="dark"] .per-grupo, :root[data-theme="dark"] .per-accion { background: #1c1f3c; } } /* 03-nov · contrato 0.46.0 · «Cuenta de Google» en Ajustes: el botón es el oficial de Google (lo pinta su script). Solo aparece si el servidor tiene Google encendido. */ .per-google[hidden] { display: none; } .per-google-fila { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; } .per-google-fila .per-accion-txt { flex: 1 1 220px; } .per-google-btn { min-height: 32px; } .per-google-espera { opacity: .6; pointer-events: none; } .per-google-confirma { margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--per-linea); background: rgba(255, 255, 255, .5); } .per-google-confirma[hidden] { display: none; } .per-google-confirma p { margin: 0 0 10px; } .per-google-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .per-google .per-error { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--danger, #c0262d); } .per-google .per-error[hidden] { display: none; } :root[data-theme="dark"] .per-google-confirma { background: rgba(255, 255, 255, .04); } /* certificados.css */ /* Campus Remotos Academy · Certificados · Propuesta C «Credencial digital» (13-oct, vista previa local). Prefijo cer-. Vidrio claro (la receta de la Tienda y la Sala de juegos) y su versión oscura. Azul de marca en la insignia y los botones, amarillo solo para «listo» y «donde vas», dorado para el sello de lo logrado. Las tarjetas se acomodan al ancho del contenido (container query) y al celular (@media 560 px). */ .cer { --cer-azul: var(--azul, #0400bc); --cer-azul2: var(--azul-brillante, #0012fd); --cer-am: var(--amarillo, #ffe400); --cer-negro: var(--negro, #11111a); --cer-t2: #3a3d55; --cer-t3: #5d6078; --cer-lav: #6c78ff; --cer-display: var(--font-display, "Bebas Neue"), Impact, sans-serif; container: cer / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 1120px; margin: 0 auto; color: var(--cer-negro); } .cer > * { min-width: 0; } .cer .page-head { margin-bottom: 0; } .cer-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .cer-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .cer p { margin: 0; } /* ---------- vidrio ---------- */ .cer-vidrio { position: relative; isolation: isolate; border-radius: 24px; background: radial-gradient(120% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%), linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.14) 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.4), inset 0 0 30px rgba(255,255,255,.3), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 8px rgba(4,0,188,.07), 0 30px 60px -30px rgba(4,0,188,.6); } .cer-vidrio::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--cer-grano, none); opacity: .07; mix-blend-mode: soft-light; } .cer-vidrio::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(0,18,253,.22) 84%, rgba(0,18,253,.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .cer-vidrio { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); } } /* ---------- resumen: cuántos tienes y cuántos te faltan ---------- */ .cer-res { display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "ins num txt regla"; align-items: center; gap: 12px 20px; padding: 18px 24px; } .cer-res-ins { grid-area: ins; display: flex; gap: 6px; } .cer-mini { display: block; width: 34px; height: 34px; overflow: visible; } .cer-mini polygon { stroke-width: 12; stroke-linejoin: round; } .cer-mini path { fill: none; stroke: #5a3d00; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; } .cer-mini.is-emitido polygon { fill: url(#cer-g-oro); stroke: url(#cer-g-oro); } .cer-mini.is-listo polygon { fill: url(#cer-g-am); stroke: url(#cer-g-am); } .cer-mini.is-progreso polygon { fill: rgba(255,255,255,.75); stroke: var(--cer-lav); stroke-width: 8; } .cer-mini.is-bloqueado polygon, .cer-mini.is-anulado polygon { fill: rgba(255,255,255,.45); stroke: #b4b8cc; stroke-width: 7; stroke-dasharray: 10 9; } .cer-res-n { grid-area: num; display: flex; align-items: baseline; gap: 6px; font-family: var(--cer-display); line-height: .9; white-space: nowrap; } .cer-res-n b { font-weight: 400; font-size: 46px; color: var(--cer-azul); } .cer-res-n span { font-size: 26px; color: var(--cer-t3); letter-spacing: .02em; } .cer-res-txt { grid-area: txt; min-width: 0; } .cer-res-t { font-size: 15px; font-weight: 700; color: var(--cer-negro); } .cer-res-s { margin-top: 2px !important; font-size: 14px; color: var(--cer-t2); } .cer-res-s mark { padding: 1px 8px; border-radius: 999px; font-weight: 700; color: #11111a; background: var(--cer-am); } .cer-res-regla { grid-area: regla; display: flex; gap: 10px; align-items: flex-start; padding-left: 20px; border-left: 1px solid rgba(4,0,188,.12); font-size: 12.5px; line-height: 1.45; color: var(--cer-t3); } .cer-res-regla .ic { flex: none; margin-top: 1px; color: var(--cer-azul2); } /* ---------- la credencial ---------- */ .cer-lista { display: grid; gap: 18px; } .cer-cred { display: grid; grid-template-columns: 148px minmax(0, 1fr) minmax(260px, 330px); grid-template-rows: auto 1fr; grid-template-areas: "ins cab ver" "ins cuerpo ver"; gap: 10px 26px; padding: 22px 24px; animation: cer-sube .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms); } .cer-cred.sin-ver { grid-template-columns: 148px minmax(0, 1fr); grid-template-areas: "ins cab" "ins cuerpo"; } .cer-cab { grid-area: cab; display: grid; gap: 6px; justify-items: start; align-self: end; min-width: 0; } .cer-cuerpo { grid-area: cuerpo; display: grid; gap: 12px; align-content: start; min-width: 0; } /* la insignia: hexágono de vidrio dentro de un anillo de avance, con su cinta */ .cer-ins { grid-area: ins; align-self: center; position: relative; width: 148px; aspect-ratio: 1; } .cer-ins-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 16px rgba(4,0,188,.18)); } .cer-pista { fill: none; stroke: rgba(4,0,188,.10); stroke-width: 7; } .cer-anillo { fill: none; stroke: url(#cer-g-anillo); stroke-width: 7; stroke-linecap: round; animation: cer-llena 1.1s cubic-bezier(.2,.7,.2,1) .25s both; } .cer-hex, .cer-hex-brillo { stroke-width: 9; stroke-linejoin: round; } .cer-hex { fill: url(#cer-g-vidrio); stroke: url(#cer-g-vidrio); } .cer-hex-brillo { fill: url(#cer-g-brillo); stroke: url(#cer-g-brillo); } .cer-hex-filo { fill: none; stroke: rgba(4,0,188,.16); stroke-width: 1.5; stroke-linejoin: round; } .cer-ins-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -66%); display: grid; place-items: center; color: var(--cer-azul2); } .cer-ins-ic .ic { width: 30px; height: 30px; } .cer-cinta { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); padding: 4px 13px 3px; font-family: var(--cer-display); font-size: 15px; line-height: 1; letter-spacing: .06em; white-space: nowrap; color: var(--cer-azul); background: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%); } .cer-ins.is-emitido .cer-ins-svg { filter: drop-shadow(0 14px 18px rgba(150,105,0,.28)); } .cer-ins.is-emitido .cer-pista { stroke: rgba(224,165,38,.18); } .cer-ins.is-emitido .cer-anillo { stroke: url(#cer-g-oro); } .cer-ins.is-emitido .cer-hex { fill: url(#cer-g-azul); stroke: url(#cer-g-azul); } .cer-ins.is-emitido .cer-hex-filo { stroke: rgba(255,255,255,.42); } .cer-ins.is-emitido .cer-ins-ic { color: #fff; } .cer-ins.is-emitido .cer-cinta { color: #3b2a00; background: linear-gradient(135deg, #fff3cc, #f6d365 45%, #e0a526); } .cer-ins.is-listo .cer-anillo { stroke: url(#cer-g-am); animation: cer-llena 1.1s cubic-bezier(.2,.7,.2,1) .25s both, cer-late 2.4s ease-in-out 1.5s infinite; } .cer-ins.is-listo .cer-cinta { color: #11111a; background: var(--cer-am); } .cer-ins.is-bloqueado .cer-pista { stroke: rgba(17,17,26,.07); } .cer-ins.is-bloqueado .cer-anillo { stroke: #b4b8cc; } .cer-ins.is-anulado .cer-pista { stroke: #c4c7d6; stroke-width: 2; stroke-dasharray: 3 7; } .cer-ins.is-bloqueado .cer-ins-svg, .cer-ins.is-anulado .cer-ins-svg { filter: drop-shadow(0 10px 14px rgba(17,17,26,.10)); } .cer-ins.is-bloqueado .cer-hex-filo, .cer-ins.is-anulado .cer-hex-filo { stroke: rgba(17,17,26,.10); } .cer-ins.is-bloqueado .cer-ins-ic, .cer-ins.is-anulado .cer-ins-ic { color: #8a8fa3; } .cer-ins.is-bloqueado .cer-cinta, .cer-ins.is-anulado .cer-cinta { color: #5d6078; background: #eceef5; } /* estado, nombre y emisor */ .cer-est { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--cer-azul); background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(4,0,188,.14); } .cer-est .ic { width: 13px; height: 13px; flex: none; } .cer-est.is-emitido { color: #5a3d00; background: linear-gradient(135deg, #fff6d8, #fbe3a0); box-shadow: inset 0 0 0 1px rgba(224,165,38,.55); } .cer-est.is-listo { color: #11111a; background: var(--cer-am); box-shadow: inset 0 0 0 1px #fff3a0, 0 4px 10px -6px rgba(150,110,0,.6); } .cer-est.is-bloqueado { color: var(--cer-t3); background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(17,17,26,.12); } .cer-est.is-anulado { color: #b42318; background: #fff1f0; box-shadow: inset 0 0 0 1px rgba(180,35,24,.25); } .cer-tit { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--cer-negro); text-wrap: balance; } .cer-meta { font-size: 13px; color: var(--cer-t3); } /* lo que acredita o lo que falta, los hitos y las acciones */ .cer-linea { font-size: 14.5px; line-height: 1.5; color: var(--cer-t2); } .cer-linea b { font-weight: 700; color: var(--cer-azul); } .cer-linea.is-valida { display: flex; gap: 8px; align-items: flex-start; } .cer-linea.is-valida .ic { flex: none; margin-top: 3px; color: #b07d00; } .cer-hitos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .cer-hitos-l { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; } .cer-hito { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cer-t3); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(4,0,188,.12); } .cer-hito .ic { width: 13px; height: 13px; } .cer-hito.is-ok { color: #fff; background: linear-gradient(145deg, #4b58ff, #0012fd 55%, #0400bc); box-shadow: 0 3px 8px -4px rgba(0,18,253,.7); } .cer-hito.is-ok.is-oro { color: #3b2a00; background: linear-gradient(135deg, #fff3cc, #f6d365 50%, #e0a526); box-shadow: 0 3px 8px -4px rgba(160,110,0,.7); } .cer-hito.is-actual { color: #11111a; background: var(--cer-am); box-shadow: 0 0 0 3px rgba(255,228,0,.32), 0 4px 10px -6px rgba(150,110,0,.6); } .cer-hito.is-pend.is-oro { color: #a07400; } .cer-hitos-t { font-size: 12.5px; color: var(--cer-t3); white-space: nowrap; } .cer-acc { display: flex; flex-wrap: wrap; gap: 8px; } .cer-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 15px; border: 0; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; color: var(--cer-azul); background: rgba(255,255,255,.66); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(4,0,188,.14), 0 6px 14px -10px rgba(4,0,188,.5); transition: transform .15s, background-color .15s, box-shadow .15s; } .cer-btn:hover { text-decoration: none; background-color: #fff; transform: translateY(-1px); } .cer-btn .ic { width: 16px; height: 16px; flex: none; } .cer-btn-pri { width: 100%; color: #fff; background: linear-gradient(145deg, #3d4bff, #0012fd 50%, #0400bc); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -10px rgba(0,18,253,.8); } .cer-btn-pri:hover { color: #fff; background: linear-gradient(145deg, #5562ff, #1424ff 50%, #0a06d0); } .cer-btn:focus-visible, .cer-copiar:focus-visible, .cer-ver-url:focus-visible { outline: 2px solid var(--cer-azul2); outline-offset: 2px; } /* la verificación pública, en primer plano */ .cer-ver { grid-area: ver; align-self: center; display: grid; gap: 10px; min-width: 0; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(240,242,255,.6)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(4,0,188,.10), 0 14px 30px -22px rgba(4,0,188,.55); } .cer-ver-cab { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cer-negro); } .cer-ver-cab .ic { flex: none; color: var(--cer-azul2); } .cer-ver-sub { margin-top: -4px !important; font-size: 12.5px; line-height: 1.45; color: var(--cer-t3); } .cer-ver-url { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--cer-azul2); text-decoration: none; background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(4,0,188,.12); } .cer-ver-url span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; word-break: break-all; } .cer-ver-url .ic { flex: none; } .cer-ver-url:hover span { text-decoration: underline; } .cer-cod { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l b" "v b"; align-items: center; gap: 1px 10px; min-width: 0; padding: 7px 7px 7px 12px; border-radius: 12px; background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(4,0,188,.12); } .cer-cod-l { grid-area: l; font-size: 11.5px; line-height: 1.3; color: var(--cer-t3); } .cer-cod-v { grid-area: v; padding: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; line-height: 1.35; font-weight: 700; letter-spacing: .02em; color: var(--cer-negro); background: none; overflow-wrap: anywhere; } .cer-copiar { grid-area: b; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--cer-azul); background: rgba(4,0,188,.07); cursor: pointer; } .cer-copiar:hover { background: rgba(4,0,188,.12); } .cer-copiar .ic { width: 14px; height: 14px; } .cer-ver.is-pendiente { background: rgba(255,255,255,.28); box-shadow: none; outline: 1.5px dashed rgba(4,0,188,.2); outline-offset: -1.5px; } .cer-ver.is-pendiente .cer-ver-cab { color: var(--cer-t2); } .cer-ver.is-pendiente .cer-ver-cab .ic { color: var(--cer-t3); } /* ---------- movimiento (con calma) ---------- */ @keyframes cer-sube { from { opacity: 0; transform: translateY(10px); } } @keyframes cer-llena { from { stroke-dashoffset: 326.73; } } @keyframes cer-late { 50% { opacity: .7; } } @media (prefers-reduced-motion: reduce) { .cer-cred, .cer-anillo, .cer-ins.is-listo .cer-anillo { animation: none; } .cer-btn { transition: none; } .cer-btn:hover { transform: none; } } /* ---------- contenido angosto (tableta, ventana chica): la verificación baja debajo ---------- */ @container cer (max-width: 860px) { .cer-cred { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "ins cab" "ins cuerpo" "ver ver"; } .cer-cred.sin-ver { grid-template-columns: 124px minmax(0, 1fr); } .cer-ins { width: 124px; } .cer-ver { align-self: stretch; } .cer-btn-pri { width: auto; justify-self: start; } .cer-res { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "ins num txt" "regla regla regla"; } .cer-res-regla { padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(4,0,188,.12); } } /* ---------- celular ---------- */ @media (max-width: 560px) { .cer { gap: 14px; } .cer-res { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num ins" "txt txt" "regla regla"; gap: 10px 14px; padding: 16px; border-radius: 20px; } .cer-res-ins { justify-self: end; } .cer-res-n b { font-size: 42px; } .cer-mini { width: 30px; height: 30px; } .cer-cred, .cer-cred.sin-ver { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "ins cab" "cuerpo cuerpo" "ver ver"; gap: 14px; padding: 16px; border-radius: 20px; } .cer-cred.sin-ver { grid-template-areas: "ins cab" "cuerpo cuerpo"; } .cer-ins { width: 92px; align-self: center; } .cer-ins-ic .ic { width: 21px; height: 21px; } .cer-cinta { top: 61%; padding: 3px 9px 2px; font-size: 12px; } .cer-cab { align-self: center; gap: 5px; } .cer-tit { font-size: 17px; } .cer-meta { font-size: 12.5px; } .cer-linea { font-size: 14px; } .cer-btn { min-height: 44px; } .cer-acc .cer-btn { flex: 1 1 auto; } .cer-btn-pri { width: 100%; } .cer-ver { padding: 14px; } .cer-copiar { min-height: 36px; } } /* ---------- modo oscuro ---------- */ :root[data-theme="dark"] .cer { --cer-azul: #b3baff; --cer-azul2: #a7aeff; --cer-negro: #eef0ff; --cer-t2: #e4e6f8; --cer-t3: #c0c4e5; --cer-lav: #8e97ff; } :root[data-theme="dark"] .cer-vidrio { background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), linear-gradient(145deg, rgba(30,33,72,.74) 0%, rgba(22,24,56,.62) 60%, rgba(18,20,46,.56) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.10), 0 26px 50px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] .cer-vidrio::before { opacity: .04; } :root[data-theme="dark"] .cer-vidrio::after { background: linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 64%, rgba(142,151,255,.36) 100%); } :root[data-theme="dark"] .cer-mini path { stroke: #4a3300; } :root[data-theme="dark"] .cer-mini.is-progreso polygon { fill: rgba(255,255,255,.08); stroke: #8e97ff; } :root[data-theme="dark"] .cer-mini.is-bloqueado polygon, :root[data-theme="dark"] .cer-mini.is-anulado polygon { fill: rgba(255,255,255,.05); stroke: #5d6383; } :root[data-theme="dark"] .cer-res-regla { border-color: rgba(179,186,255,.18); } :root[data-theme="dark"] .cer-res-regla .ic { color: #a7aeff; } :root[data-theme="dark"] .cer-ins-svg { filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); } :root[data-theme="dark"] .cer-pista { stroke: rgba(179,186,255,.14); } :root[data-theme="dark"] .cer-anillo { stroke: url(#cer-g-anillo-o); } :root[data-theme="dark"] .cer-hex { fill: url(#cer-g-vidrio-o); stroke: url(#cer-g-vidrio-o); } :root[data-theme="dark"] .cer-hex-brillo { opacity: .3; } :root[data-theme="dark"] .cer-hex-filo { stroke: rgba(179,186,255,.25); } :root[data-theme="dark"] .cer-ins-ic { color: #c9ceff; } :root[data-theme="dark"] .cer-cinta { color: #dde0ff; background: #2c3170; } :root[data-theme="dark"] .cer-ins.is-emitido .cer-ins-svg { filter: drop-shadow(0 12px 20px rgba(0,0,0,.5)); } :root[data-theme="dark"] .cer-ins.is-emitido .cer-pista { stroke: rgba(246,211,101,.16); } :root[data-theme="dark"] .cer-ins.is-emitido .cer-anillo { stroke: url(#cer-g-oro); } :root[data-theme="dark"] .cer-ins.is-emitido .cer-hex { fill: url(#cer-g-azul-o); stroke: url(#cer-g-azul-o); } :root[data-theme="dark"] .cer-ins.is-emitido .cer-ins-ic { color: #fff; } :root[data-theme="dark"] .cer-ins.is-emitido .cer-cinta { color: #3b2a00; background: linear-gradient(135deg, #fff3cc, #f6d365 45%, #e0a526); } :root[data-theme="dark"] .cer-ins.is-listo .cer-anillo { stroke: url(#cer-g-am); } :root[data-theme="dark"] .cer-ins.is-listo .cer-cinta { color: #11111a; background: #ffe400; } :root[data-theme="dark"] .cer-ins.is-bloqueado .cer-pista { stroke: rgba(255,255,255,.07); } :root[data-theme="dark"] .cer-ins.is-bloqueado .cer-anillo { stroke: #5d6383; } :root[data-theme="dark"] .cer-ins.is-anulado .cer-pista { stroke: #4a4f6e; } :root[data-theme="dark"] .cer-ins.is-bloqueado .cer-ins-ic, :root[data-theme="dark"] .cer-ins.is-anulado .cer-ins-ic { color: #8b90ab; } :root[data-theme="dark"] .cer-ins.is-bloqueado .cer-cinta, :root[data-theme="dark"] .cer-ins.is-anulado .cer-cinta { color: #a9aec8; background: #262a46; } :root[data-theme="dark"] .cer-est { color: #c9ceff; background: rgba(142,151,255,.14); box-shadow: inset 0 0 0 1px rgba(142,151,255,.25); } :root[data-theme="dark"] .cer-est.is-emitido { color: #3b2a00; background: linear-gradient(135deg, #fff3cc, #f6d365); box-shadow: none; } :root[data-theme="dark"] .cer-est.is-listo { color: #11111a; background: #ffe400; box-shadow: none; } :root[data-theme="dark"] .cer-est.is-bloqueado { color: #c0c4e5; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } :root[data-theme="dark"] .cer-est.is-anulado { color: #ffb4ad; background: rgba(255,107,111,.12); box-shadow: inset 0 0 0 1px rgba(255,107,111,.3); } :root[data-theme="dark"] .cer-linea.is-valida .ic { color: #f6d365; } :root[data-theme="dark"] .cer-hito { color: #c0c4e5; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } :root[data-theme="dark"] .cer-hito.is-ok { color: #fff; background: linear-gradient(145deg, #8d96ff, #4a57ff 55%, #2a37e8); box-shadow: none; } :root[data-theme="dark"] .cer-hito.is-ok.is-oro { color: #3b2a00; background: linear-gradient(135deg, #fff3cc, #f6d365 50%, #e0a526); } :root[data-theme="dark"] .cer-hito.is-actual { color: #11111a; background: #ffe400; box-shadow: 0 0 0 3px rgba(255,228,0,.22); } :root[data-theme="dark"] .cer-hito.is-pend.is-oro { color: #f6d365; } :root[data-theme="dark"] .cer-btn { color: #dde0ff; background: rgba(142,151,255,.15); box-shadow: inset 0 0 0 1px rgba(142,151,255,.22); } :root[data-theme="dark"] .cer-btn:hover { background: rgba(142,151,255,.25); } :root[data-theme="dark"] .cer-btn-pri { color: #fff; background: linear-gradient(145deg, #6f7aff, #4a57ff 50%, #2a37e8); box-shadow: 0 10px 20px -12px rgba(74,87,255,.9); } :root[data-theme="dark"] .cer-btn-pri:hover { background: linear-gradient(145deg, #828cff, #5a66ff 50%, #3542f0); } :root[data-theme="dark"] .cer-ver { background: rgba(10,12,40,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } :root[data-theme="dark"] .cer-ver-url { color: #c9ceff; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } :root[data-theme="dark"] .cer-cod { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } :root[data-theme="dark"] .cer-copiar { color: #dde0ff; background: rgba(142,151,255,.15); } :root[data-theme="dark"] .cer-copiar:hover { background: rgba(142,151,255,.25); } :root[data-theme="dark"] .cer-ver.is-pendiente { background: rgba(255,255,255,.03); outline-color: rgba(179,186,255,.28); } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root[data-theme="dark"] .cer-vidrio { background: #161a3a; } } /* instalar.css */ /* [CERT] 15-oct · #20 «Ancla el campus y activa los avisos» (instalar.js), solo en el teléfono. Diseño A «Ventana de vidrio» (elegido por el dueño): vidrio «grueso» del campus (velo blanco, filo de luz con reflejo azul, brillo arriba a la izquierda, grosor, grano al 7 %, sombra azulada), versión clara; el oscuro solo si la persona lo eligió. Entra entera, sin scroll. */ .ins-capa { position: fixed; inset: 0; z-index: 8500; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); font-family: Poppins, system-ui, sans-serif; color: var(--negro, #11111a); } @media (min-width: 901px) { html.ins-abierta, html.ins-abierta body { overflow: hidden; } } /* 15-oct, 17:20: en el teléfono NO se bloquea el desplazamiento (overflow: hidden en html/body hace que Safari 26 deje de mostrar la página detrás de su barra y la rellene con su franja gris). Mientras la ventana está abierta, la ventana ES la página: el campus de atrás se oculta y la ventana va en el flujo normal, como el Panel de ventas. */ /* 15-oct (el dueño, con captura del iPhone): la ventana usa la pantalla completa y el menú de abajo se vuelve transparente mientras está abierta (antes la tarjeta se veía montada sobre el menú). El contenido se acomoda al alto que hay (consultas de contenedor sobre .ins-capa). */ @media (max-width: 900px) { .ins-capa { container-type: size; } /* 15-oct · display: none y no solo transparentes: Safari 26 lee el fondo de las barras fijas pegadas a los bordes AUNQUE estén con opacity 0 o visibility hidden (por eso en el iPhone seguían saliendo las franjas blancas). Quitadas, lo único fijo en los bordes es el fondo sólido de la ventana. */ html.ins-abierta .bottom-nav, html.ins-abierta .topbar { display: none !important; } /* 15-oct (captura del iPhone, «que la pantalla llegue abajo y arriba»; «en el Panel de ventas no pasa»): Safari 26 pinta la franja de la hora y la de su barra de abajo con el color de fondo OPACO del elemento fijo pegado al borde o, si no hay, con el de la página (ya no usa theme-color). Un oscurecido translúcido no le sirve y dejaba las franjas en blanco. Como en el Panel de ventas (la página es del mismo color que lo que se ve en los bordes), mientras la ventana está abierta en el teléfono la capa es un fondo SÓLIDO del tono del campus, de borde a borde, con la R de marca de agua a un lado (igual que en el campus), y la página toma ese mismo color: Safari pinta sus franjas con él. 15-oct, 16:40 (captura del iPhone): el campus se transparentaba detrás y abajo quedaba una franja gris → el color sólido no se aplicaba. Ahora, sin variables ni fundido: color directo en la capa (lo que lee Safari), la capa siempre opaca (sin opacity) y, además, una segunda capa sólida (.ins-fondo) con la R. El color es el del fondo de la página (blanco; oscuro #0b0c1d), que es el que Safari ya pintó en sus franjas al cargar. */ .ins-capa { background: #ffffff !important; opacity: 1 !important; transition: none !important; } /* 15-oct, 17:00 (capturas del iPhone: campus vs Panel de ventas): Safari 26 deja los elementos FIJOS dentro de la zona visible SIN su barra de abajo (la ventana se cortaba justo encima y Safari rellenaba debajo con gris). En el Panel de ventas el contenido es normal y pasa por detrás de la barra. Igual aquí: en el teléfono la ventana deja de ser fija, va arriba de la página (instalar.js sube a 0 antes de abrirla) y mide el alto GRANDE de la pantalla (100lvh: con la barra escondida), así su fondo continúa por detrás de la barra de Safari. La tarjeta se centra en la parte visible (100svh): el relleno de abajo es lo que tapa la barra. */ .ins-capa { position: relative !important; inset: auto !important; width: 100%; height: 100vh; height: 100lvh; padding-bottom: calc(100lvh - 100svh + max(14px, env(safe-area-inset-bottom))); } html.ins-abierta #app, html.ins-abierta .skip, html.ins-abierta #toasts { display: none !important; } html[data-theme="dark"] .ins-capa { background: #0b0c1d !important; } .ins-capa .ins-fondo { opacity: 1 !important; transition: none !important; background: linear-gradient(rgba(255,255,255,.945), rgba(255,255,255,.945)) 0 0 / 100% 100% no-repeat, url("assets/marca-agua-r.png") right -6vw bottom -10vh / min(78vw, 460px) auto no-repeat, #ffffff !important; } html[data-theme="dark"] .ins-capa .ins-fondo { background: linear-gradient(rgba(11,12,29,.93), rgba(11,12,29,.93)) 0 0 / 100% 100% no-repeat, url("assets/marca-agua-r.png") right -6vw bottom -10vh / min(78vw, 460px) auto no-repeat, #0b0c1d !important; } html.ins-abierta, html.ins-abierta body { background-color: #ffffff !important; } html[data-theme="dark"].ins-abierta, html[data-theme="dark"].ins-abierta body { background-color: #0b0c1d !important; } } .ins-fondo { position: absolute; inset: 0; background: rgba(17,17,26,.26); opacity: 0; transition: opacity .28s ease; } .ins-capa.ver .ins-fondo { opacity: 1; } .ins-vidrio { position: relative; border: 1.5px solid transparent; border-radius: 28px; color: var(--negro, #11111a); background: radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 60%) padding-box, linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.64)) padding-box, linear-gradient(135deg, #fff, rgba(255,255,255,.4) 45%, rgba(0,18,253,.42)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -14px 24px -16px rgba(4,0,188,.24), 0 2px 6px rgba(4,0,188,.08), 0 40px 90px -30px rgba(4,0,188,.55); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .3s ease, transform .42s cubic-bezier(.2,1,.3,1); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .ins-vidrio { -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); } } .ins-vidrio::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: url("assets/textura-mate.png"); opacity: .07; mix-blend-mode: soft-light; } .ins-capa.ver .ins-vidrio { opacity: 1; transform: none; } .ins-capa.sale .ins-vidrio { opacity: 0; transform: translateY(10px) scale(.985); transition-duration: .2s; } .ins-capa h2 { outline: none; text-wrap: balance; } .ins-capa h2:focus-visible { outline: none !important; box-shadow: none; } /* el título recibe el foco al abrir (lectores de pantalla), sin el anillo */ .ins-capa b { font-weight: 600; } .ins-app { display: block; width: 56px; height: 56px; border-radius: 15px; background: #fff; box-shadow: 0 12px 26px -12px rgba(4,0,188,.6), 0 0 0 1px rgba(4,0,188,.08); } .ins-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #0012fd, #0400bc); color: #fff; font: 600 14px/1 Poppins, system-ui, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 20px -10px rgba(0,18,253,.75), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .14s ease, filter .2s ease, box-shadow .2s ease; } .ins-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } .ins-btn:active { transform: scale(.98); } .ins-btn.cargando { opacity: .7; pointer-events: none; } .ins-luego { justify-self: center; background: none; border: 0; border-radius: 999px; padding: 10px 16px; color: var(--text-2); font: 500 14px/1 Poppins, system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s; } .ins-luego:hover { color: #0400bc; background: rgba(0,18,253,.06); } /* el dibujo del botón del teléfono que hay que tocar (⋮, Compartir, ≡, candado) */ .ins-tecla { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 1px; border-radius: 7px; vertical-align: -6px; color: #0012fd; background: #fff; box-shadow: 0 0 0 1px rgba(0,18,253,.2), 0 2px 5px -2px rgba(4,0,188,.45); } @keyframes ins-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .ia-caja { width: min(440px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 24px 18px 10px; display: grid; gap: 16px; } .ia-cab { display: grid; justify-items: center; text-align: center; gap: 8px; } .ia-cab h2 { margin: 6px 0 0; font: 800 21px/1.2 Poppins, system-ui, sans-serif; letter-spacing: -.01em; } .ia-cab p { margin: 0; max-width: 38ch; color: var(--text-2); font-size: 13.5px; line-height: 1.5; } .ia-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ia-paso { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; align-items: start; padding: 13px 13px 13px 12px; border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.36)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 8px 18px -14px rgba(4,0,188,.5); transition: opacity .3s; } .ia-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #0012fd; background: rgba(0,18,253,.08); box-shadow: inset 0 0 0 1.5px rgba(0,18,253,.25); } .ia-txt { display: grid; gap: 2px; min-width: 0; } .ia-txt > b { font-size: 15px; font-weight: 700; line-height: 1.3; } .ia-txt > span { font-size: 13px; line-height: 1.45; color: var(--text-2); } .ia-botones { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .ins-btn-suave { background: rgba(0,18,253,.08); color: #0400bc; box-shadow: inset 0 0 0 1.5px rgba(0,18,253,.22); } .ins-ver { background: none; border: 0; padding: 4px 0; color: #0012fd; font: 600 13px/1.2 Poppins, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .ia-nota { grid-column: 2; margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--danger); font-weight: 600; } /* esperando que la persona toque «Permitir» en el aviso del teléfono: la campana late */ .ia-paso.is-espera .ia-num { color: #fff; background: linear-gradient(180deg, #0012fd, #0400bc); box-shadow: none; animation: ia-late 1.2s ease-in-out infinite; } .ia-paso.is-espera .ia-txt > b { color: #0012fd; } @keyframes ia-late { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,18,253,.45); } 50% { box-shadow: 0 0 0 8px rgba(0,18,253,0); } } .ia-paso.is-hecho .ia-txt > span { display: none; } /* lo hecho queda solo con su título y el ✓: menos ruido */ .ia-paso.is-hecho { align-items: center; } .ia-caja.con-guia .ins-app { display: none; } .ia-paso.is-hecho .ia-num { background: var(--success); color: #fff; box-shadow: none; animation: ins-pop .4s cubic-bezier(.2,1.6,.4,1); } .ia-paso.is-alerta .ia-num { color: var(--danger); background: var(--danger-soft); box-shadow: inset 0 0 0 1.5px rgba(194,39,45,.25); } .ia-paso.is-alerta .ia-txt > b { color: var(--danger); } .ia-paso.is-apagado { opacity: .62; } /* los pasos para anclar el campus */ .ia-guia { grid-column: 2; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; } .ia-guia li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; font-size: 13px; line-height: 1.55; } .ia-guia li > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 11.5px/1 Poppins, system-ui, sans-serif; font-style: normal; color: #fff; background: linear-gradient(180deg, #0012fd, #0400bc); box-shadow: 0 4px 10px -4px rgba(0,18,253,.7); } /* teléfonos bajos: primero se va lo decorativo (el subtítulo, después el ícono) para que todo entre sin scroll */ /* teléfonos angostos: la guía y el botón usan todo el ancho de la tarjeta */ @media (max-width: 380px) { .ins-capa { padding-left: 10px; padding-right: 10px; } .ia-caja { padding-left: 14px; padding-right: 14px; } .ia-paso { grid-template-columns: 30px 1fr; align-items: center; gap: 4px 10px; } .ia-num { width: 30px; height: 30px; } .ia-num svg { width: 15px; height: 15px; } .ia-guia, .ia-botones, .ia-nota { grid-column: 1 / -1; } .ia-botones { gap: 6px; } .ia-botones .ins-btn { padding: 0 13px; font-size: 13.5px; } } @container (max-height: 760px) { .ia-cab p { display: none; } .ia-caja { gap: 14px; } } @container (max-height: 600px) { .ia-cab .ins-app { display: none; } .ia-cab h2 { margin: 0; font-size: 19px; } .ia-caja { padding-top: 18px; gap: 12px; } .ia-paso { padding: 11px 11px 11px 10px; } .ia-guia { gap: 6px; margin-top: 7px; } .ia-guia li { line-height: 1.45; } } /* con la guía de los ajustes a la vista y poco alto, el título queda solo para lectores de pantalla (es el nombre de la ventana) */ @container (max-height: 560px) { .ia-caja.con-guia .ia-cab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* teléfonos muy bajos (iPhone SE con las barras de Safari: quedan ~400 px): sin las frases de apoyo de los pasos, letra un poco menor */ @container (max-height: 470px) { .ia-caja { padding: 14px 12px 4px; gap: 10px; } .ia-cab h2 { font-size: 17px; } .ia-paso.is-guia .ia-txt > span, .ia-paso.is-accion .ia-txt > span { display: none; } .ia-paso { padding: 9px 10px; } .ia-guia { margin-top: 4px; gap: 4px; } .ia-guia li { font-size: 12.5px; line-height: 1.4; } .ia-txt > span { font-size: 12.5px; line-height: 1.4; } .ia-botones { margin-top: 4px; } .ia-paso .ins-btn { height: 36px; } .ins-luego { padding: 7px 14px; } } /* movimiento y transparencia reducidos */ @media (prefers-reduced-motion: reduce) { .ins-vidrio, .ins-fondo { transition: opacity .2s ease; transform: none !important; } .ia-paso.is-hecho .ia-num, .ia-paso.is-espera .ia-num { animation: none; } } @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .ins-vidrio { background: linear-gradient(155deg, #ffffff 0%, #f6f7ff 100%); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* modo oscuro (solo si la persona lo eligió en su Perfil) */ :root[data-theme="dark"] .ins-vidrio { background: radial-gradient(120% 70% at 0% 0%, rgba(142,151,255,.16), rgba(142,151,255,0) 60%) padding-box, linear-gradient(150deg, rgba(30,34,110,.86), rgba(14,15,40,.8)) padding-box, linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 45%, rgba(142,151,255,.45)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -14px 24px -16px rgba(0,0,0,.5), 0 40px 90px -30px rgba(0,0,0,.7); } :root[data-theme="dark"] .ins-btn-suave { background: rgba(142,151,255,.14); color: #dfe2ff; box-shadow: inset 0 0 0 1.5px rgba(142,151,255,.3); } :root[data-theme="dark"] .ins-ver { color: #b3baff; } :root[data-theme="dark"] .ins-btn:not(.ins-btn-suave), :root[data-theme="dark"] .ia-guia li > i { background: linear-gradient(180deg, #3d4bff, #2a37e8); } :root[data-theme="dark"] .ins-luego:hover { color: #dfe2ff; background: rgba(142,151,255,.12); } :root[data-theme="dark"] .ins-tecla { color: #dfe2ff; background: rgba(142,151,255,.18); box-shadow: 0 0 0 1px rgba(142,151,255,.32); } :root[data-theme="dark"] .ia-paso { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } :root[data-theme="dark"] .ia-num { color: #c9ceff; background: rgba(142,151,255,.14); box-shadow: inset 0 0 0 1.5px rgba(142,151,255,.32); } /* oscuro-arreglos.css */ /* Campus Remotos Academy — Arreglos del MODO OSCURO (12-oct-2026, revisión de todo el campus con contraste medido en cada pantalla). Va al final del : solo actúa con :root[data-theme="dark"] y no cambia nada del modo claro. Se juntan aquí para no tocar los archivos de cada pantalla; si el dueño de una pantalla prefiere llevarlos a su archivo, se pueden mover. */ /* ---------- Sala de juegos: la cabecera y el desafío del día volvían al azul sólido y al amarillo viejos ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] .sala.pl-cab { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 18%, transparent), 0 30px 60px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] [data-ruta="juegos"] .sala.pl-cab .sala-txt p { color: var(--jg-chispa, #c9cdf0); } :root[data-theme="dark"] [data-ruta="juegos"] .reto-dia.pl-ticket { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); color: var(--jg-papel, #eef0ff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 20%, transparent), 0 24px 48px -30px rgba(0,0,0,.75); } :root[data-theme="dark"] [data-ruta="juegos"] .reto-dia.pl-ticket .reto-etq { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .reto-dia.pl-ticket .reto-cuerpo b { color: var(--jg-papel, #eef0ff); } /* ---------- Partida (Trivia y los demás): ficha del premio, marcador del final y pistas ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] .p2-premio { background: rgba(255,255,255,.07); color: var(--jg-papel, #eef0ff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 22%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .p2-premio .p2-moneda { background: color-mix(in srgb, var(--jg-chispa, #b3baff) 16%, transparent); color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .p2-marcador { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 18%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.p2-cifra b, .p2-cifra .ic, .p2-etq) { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.p2-cifra small, .p2-sub, .jx-fin-datos) { color: var(--jg-chispa, #c9cdf0); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-fin-datos b, .jx-fin-datos .ic) { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-pista-ic { background: color-mix(in srgb, var(--jg-chispa, #b3baff) 16%, transparent); color: var(--jg-chispa, #b3baff); } /* ---------- Phishing y Entrevista: textos que quedaban gris oscuro sobre oscuro ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] .jx-msg-linea { color: var(--jg-chispa, #c9cdf0); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-msg-k { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-msg-texto { color: var(--jg-papel, #eef0ff); border-top-color: color-mix(in srgb, var(--jg-chispa, #b3baff) 25%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-ayuda, .jx-carta-ronda .jx-ayuda) { color: var(--jg-chispa, #c9cdf0); } :root[data-theme="dark"] [data-ruta="juegos"] :is(.jx-star-n, .jx-star-letra) { color: var(--jg-chispa, #b3baff); background: color-mix(in srgb, var(--jg-chispa, #b3baff) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-chispa, #b3baff) 25%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-mover { color: var(--jg-chispa, #b3baff); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #b3baff) 25%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-mover:hover:not(:disabled) { background: var(--jg-1, #3d4bff); color: #fff; } /* ---------- Jackpot y Memoria: las piezas con logos azules se ven como «pantallas encendidas» (claras) para que se lean ---------- */ :root[data-theme="dark"] [data-ruta="juegos"] .jx-jackpot .jx-rodillo { background: linear-gradient(180deg, var(--jg-chispa, #c3c8f5) 0%, var(--jg-papel, #eef0ff) 30%, var(--jg-papel, #eef0ff) 70%, var(--jg-chispa, #c3c8f5) 100%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 35%, transparent), inset 0 12px 22px -14px color-mix(in srgb, var(--jg-3, #0400bc) 45%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-jackpot .jx-sim b { color: var(--jg-3, #0400bc); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-jp-ventana .jx-marca { background: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-jp-pagos li { background: color-mix(in srgb, var(--jg-papel, #eef0ff) 92%, transparent); box-shadow: none; } :root[data-theme="dark"] [data-ruta="juegos"] .jx-jp-pagos li b { color: var(--jg-3, #0400bc); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-jp-pagos li .jx-jp-pago-n { color: #3a3d55; } :root[data-theme="dark"] [data-ruta="juegos"] .jx-ganado .jx-sim.mini { padding: 4px; border-radius: 16px; background: var(--jg-papel, #eef0ff); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-inv li { background: rgba(255,255,255,.07); color: var(--jg-chispa, #c9cdf0); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-inv li .ic, :root[data-theme="dark"] [data-ruta="juegos"] .jx-inv b { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-dorso { background: linear-gradient(160deg, var(--jg-papel, #e9ecff), var(--jg-chispa, #cdd2ff)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #6c78ff) 35%, transparent), 0 18px 28px -22px rgba(0,0,0,.7); } /* ---------- Mapa de progreso: el texto de la Zona Gold (dorado oscuro) no se leía sobre el fondo oscuro ---------- */ :root[data-theme="dark"] .mp-p.is-gold .mp-clases { color: #ecd27e; } /* ---------- Lección: el número de las clases ya vistas casi desaparecía ---------- */ :root[data-theme="dark"] .lc-m-fila.is-hecha .lc-m-num { color: #8f99ff; } /* ---------- Portadas «Plano técnico»: el número del área en lavanda tenía poco contraste sobre el azul de la portada ---------- */ :root[data-theme="dark"] .plano__num { color: #c3c8ff; } /* Jackpot: los logos de premios no llevan ficha detrás (una regla vieja del oscuro le ponía un cuadro azul al de +100 XP) */ :root[data-theme="dark"] [data-ruta="juegos"] .jx-fig.jx-arte { background: none; box-shadow: none; border-radius: 0; } /* jackpot.css */ /* ===================================================================================================================== Jackpot de premios · Opción A «Casino clásico» (15-oct) Tragamonedas de casino: gabinete de metal dorado, letrero crema con bombillas, rodillos cilíndricos, línea roja, palanca cromada, pantallas LED ámbar, consola con botón redondo, tabla de pagos y bandeja de monedas. Paleta del Jackpot: #fcd34d / #f59e0b / #92400e / #fef3c7 / #fde68a. Clases con prefijo .jpk- ===================================================================================================================== */ .jpk-conj { --oro1: #fef3c7; --oro2: #fcd34d; --oro3: #f59e0b; --oro4: #92400e; --chispa: #fde68a; --cromo: linear-gradient(180deg, #ffffff 0%, #d9dde3 28%, #8d949e 52%, #e9ecf0 78%, #aeb4bd 100%); position: relative; width: min(100%, 660px); margin: 8px auto 0; padding-right: 60px; box-sizing: border-box; } .jpk-conj *, .jpk-conj *::before, .jpk-conj *::after { box-sizing: border-box; } /* ---------- Gabinete (metal dorado pulido) ---------- */ .jpk-maq { position: relative; padding: 14px 14px 18px; border-radius: 96px 96px 26px 26px / 64px 64px 26px 26px; background: linear-gradient(100deg, #92400e 0%, #f59e0b 5%, #fef3c7 14%, #fcd34d 27%, #f59e0b 46%, #fde68a 62%, #fcd34d 76%, #fef3c7 88%, #d97706 96%, #92400e 100%); box-shadow: inset 0 0 0 2px rgba(254,243,199,.95), inset 0 0 0 4px rgba(146,64,14,.75), inset 0 3px 8px 3px rgba(255,255,255,.55), 0 3px 0 #92400e, 0 6px 0 #6b2f0a, 0 38px 50px -26px rgba(40,18,0,.75), 0 18px 24px -18px rgba(40,18,0,.55); } .jpk-cuerpo { position: relative; padding: 12px 12px 14px; border-radius: 82px 82px 16px 16px / 54px 54px 16px 16px; background: linear-gradient(180deg, #2a1a10 0%, #170f08 100%); box-shadow: inset 0 0 0 2px #8d949e, inset 0 0 0 4px #e9ecf0, inset 0 0 0 5px #5b616b, inset 0 10px 22px rgba(0,0,0,.6); display: grid; gap: 12px; } /* ---------- Letrero «JACKPOT» con bombillas ---------- */ .jpk-letrero { position: relative; display: grid; place-items: center; min-height: 92px; padding: 22px 30px; border-radius: 58px 58px 12px 12px / 40px 40px 12px 12px; background: linear-gradient(180deg, #fffdf2 0%, #fef3c7 55%, #fde68a 100%); box-shadow: inset 0 0 0 2px #fcd34d, inset 0 0 0 3.5px #92400e, inset 0 -8px 14px -8px rgba(146,64,14,.45), 0 4px 10px -4px rgba(0,0,0,.6); } .jpk-titulo { font: 400 clamp(44px, 9.2vw, 64px)/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .09em; text-indent: .09em; text-transform: uppercase; color: #b91c1c; text-shadow: 0 1px 0 #fff, 0 2px 0 #92400e, 0 3px 0 #6b2f0a, 0 6px 8px rgba(80,20,0,.4); } .jpk-bombs { position: absolute; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } .jpk-bombs.arriba, .jpk-bombs.abajo { left: 18px; right: 18px; height: 12px; } .jpk-bombs.arriba { top: 5px; } .jpk-bombs.abajo { bottom: 5px; } .jpk-bombs.izq, .jpk-bombs.der { top: 24px; bottom: 24px; width: 12px; flex-direction: column; } .jpk-bombs.izq { left: 5px; } .jpk-bombs.der { right: 5px; } .jpk-bombs i { --dur: 3.4s; position: relative; display: block; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #b8860b 0%, #92400e 70%); box-shadow: inset 0 0 0 1px rgba(80,30,0,.6), 0 1px 1px rgba(0,0,0,.45); } .jpk-bombs i::after { /* la luz encendida: bulbo incandescente con halo cálido */ content: ""; position: absolute; inset: -1px; border-radius: 50%; background: radial-gradient(circle at 40% 34%, #ffffff 0%, #fffbe6 22%, #fde68a 55%, #f59e0b 100%); box-shadow: 0 0 6px 2px rgba(253,224,71,.85), 0 0 14px 5px rgba(245,158,11,.55); opacity: 1; animation: jpk-bombilla var(--dur) linear infinite; animation-delay: calc(var(--k) * var(--dur) / -30); } .jpk-maq.girando .jpk-bombs i { --dur: .8s; } .jpk-maq.gana .jpk-bombs i::after { animation: jpk-todas .38s steps(1, end) 6; animation-delay: 0s; } @keyframes jpk-bombilla { 0%, 38% { opacity: 1; } 46%, 92% { opacity: .1; } 100% { opacity: 1; } } @keyframes jpk-todas { 0% { opacity: 1; } 50% { opacity: .12; } 100% { opacity: 1; } } /* ---------- Ventana de rodillos ---------- */ .jpk-marco { padding: 9px; border-radius: 20px; background: var(--cromo); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1.5px #3b3f46, 0 5px 10px -4px rgba(0,0,0,.7); } .jpk-ventana { position: relative; padding: 8px; border-radius: 13px; background: #0a0706; box-shadow: inset 0 0 0 2px #000, inset 0 6px 14px rgba(0,0,0,.9); overflow: hidden; } .jpk-rodillos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .jpk-rodillo { --celda: 118px; --asoma: 26px; position: relative; overflow: hidden; height: calc(var(--celda) + 2 * var(--asoma)); border-radius: 8px; /* [CERT] 20-oct · rodillos más claros y luminosos (el dueño los veía oscuros): crema casi blanca, con luz cálida por dentro */ background: radial-gradient(120% 62% at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%), linear-gradient(90deg, #eadfba 0%, #faf3dc 9%, #fffef7 26%, #ffffff 46%, #fffdf2 64%, #f6edd0 88%, #e3d6ab 100%); box-shadow: inset 0 0 0 1px rgba(146,64,14,.45), inset 0 0 18px 2px rgba(255,236,170,.75), 0 0 12px rgba(253,224,71,.28); } /* cilindro: sombra suave arriba y abajo (antes casi negra) y brillo curvo al centro */ .jpk-rodillo::before, .jpk-rodillo::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; } .jpk-rodillo::before { top: 0; height: 46%; background: linear-gradient(180deg, rgba(120,66,8,.42) 0%, rgba(170,110,30,.14) 36%, rgba(0,0,0,0) 100%); } .jpk-rodillo::after { bottom: 0; height: 46%; background: linear-gradient(0deg, rgba(120,66,8,.42) 0%, rgba(170,110,30,.14) 36%, rgba(0,0,0,0) 100%); } .jpk-rodillo > .jpk-tira { position: relative; z-index: 1; } .jpk-tira { padding-top: var(--asoma); will-change: transform; } .jpk-tira.quieta { transform: translateY(calc(var(--celda) * -1)); } .jpk-celda { height: var(--celda); display: grid; place-items: center; } .jpk-rodillo.gira .jpk-celda { filter: blur(2.6px); } .jpk-rodillo.gira .jpk-celda .jpk-sim { transform: scaleY(1.28); } /* [CERT] 20-oct · el rebote al frenar lo hace la tira (con «translate», sin tocar su transform) y no el rodillo entero: así el rodillo nunca pasa por encima de la línea roja */ .jpk-rodillo.frena .jpk-tira { animation: jpk-asienta .55s ease-out, jpk-rebote .55s cubic-bezier(.3,1.6,.5,1); } @keyframes jpk-rebote { 0% { translate: 0 0; } 30% { translate: 0 4px; } 60% { translate: 0 -2px; } 100% { translate: 0 0; } } @keyframes jpk-asienta { 0% { filter: blur(1px); } 100% { filter: none; } } /* los símbolos (curvados hacia los bordes del cilindro) */ .jpk-sim { --t: 76px; display: grid; justify-items: center; gap: 1px; color: #7c2d12; } .jpk-sim b { font: 400 19px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .06em; color: #7c2d12; } .jpk-fig { display: block; width: var(--t); height: var(--t); } .jpk-fig svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 3px 3px rgba(80,30,0,.35)); } .jpk-sim.mini { --t: 38px; } /* línea de premio roja con marcadores. [CERT] 20-oct · va DETRÁS de los símbolos (z-index 0: encima del fondo del rodillo y debajo de la tira, que tiene 1): ya no tapa las letras «XP»; se ve entre los símbolos y en las flechas */ .jpk-linea { position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; z-index: 0; pointer-events: none; border-radius: 2px; background: linear-gradient(180deg, #fca5a5, #dc2626 45%, #7f1d1d); box-shadow: 0 0 6px 1px rgba(239,68,68,.7), 0 1px 0 rgba(0,0,0,.5); } .jpk-flecha { position: absolute; top: 50%; z-index: 5; width: 0; height: 0; margin-top: -9px; pointer-events: none; border: 9px solid transparent; filter: drop-shadow(0 0 4px rgba(239,68,68,.8)); } .jpk-flecha.izq { left: 0; border-left: 12px solid #dc2626; border-right: 0; } .jpk-flecha.der { right: 0; border-right: 12px solid #dc2626; border-left: 0; } .jpk-vidrio { /* reflejo del vidrio sobre los rodillos */ position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 13px; background: linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.14) 74%, rgba(255,255,255,0) 82%); } .jpk-maq.girando .jpk-linea { animation: jpk-pulso .5s ease-in-out infinite alternate; } .jpk-maq.gana .jpk-linea { animation: jpk-pulso .24s ease-in-out 8 alternate; } @keyframes jpk-pulso { from { opacity: .45; } to { opacity: 1; box-shadow: 0 0 12px 3px rgba(255,90,90,.95); } } /* al ganar, el premio de la línea se ilumina */ .jpk-maq.gana .jpk-tira.quieta .jpk-celda:nth-child(2) .jpk-sim { animation: jpk-salta .7s cubic-bezier(.2,.8,.3,1.4) both; } @keyframes jpk-salta { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } /* ---------- Visor del resultado (pantalla ámbar) ---------- */ .jpk-visor { min-height: 64px; display: grid; align-items: center; padding: 6px 12px; border-radius: 10px; background: #080503; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px #4b4f57, inset 0 4px 10px rgba(0,0,0,.9); } .jpk-visor:empty::before { content: "Tira de la palanca o pulsa el botón"; text-align: center; font: 400 15px/1.2 "Bebas Neue", Impact, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,158,11,.55); } .jpk-ganado { display: flex; align-items: center; gap: 10px; outline: none; min-width: 0; } .jpk-ganado.viejo { opacity: .35; } .jpk-ganado .jpk-sim.mini { --t: 46px; flex: none; } .jpk-ganado-txt { display: grid; gap: 1px; min-width: 0; color: #fde68a; font: 500 12.5px/1.3 "Poppins", system-ui, sans-serif; } .jpk-ganado-txt b { font: 400 25px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .06em; color: #fcd34d; text-shadow: 0 0 8px rgba(245,158,11,.85); text-transform: uppercase; } .jpk-ganaste { font: 400 13px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #fb923c; } .jpk-ganado.nuevo { animation: jpk-visor-in .5s ease-out; } @keyframes jpk-visor-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* ---------- Consola: LED + botón redondo ---------- */ .jpk-consola { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #f59e0b 0%, #fcd34d 12%, #fef3c7 24%, #fcd34d 50%, #d97706 100%); box-shadow: inset 0 0 0 1.5px #92400e, inset 0 2px 3px rgba(255,255,255,.75), 0 4px 8px -3px rgba(0,0,0,.7); } .jpk-led { display: grid; gap: 4px; justify-items: center; min-width: 0; } .jpk-led-r { font: 600 10.5px/1 "Poppins", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #5a2706; text-shadow: 0 1px 0 rgba(255,255,255,.6); } .jpk-led-v { display: block; width: 100%; max-width: 124px; padding: 8px 6px 6px; border-radius: 7px; text-align: center; white-space: nowrap; overflow: hidden; font: 400 34px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .12em; text-indent: .12em; color: #ffb21f; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 3px), #0a0603; text-shadow: 0 0 6px rgba(255,170,0,.95), 0 0 14px rgba(255,120,0,.6); box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px #5b616b, inset 0 3px 8px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.7); } .jpk-accion { display: grid; justify-items: center; } .jpk-boton { position: relative; width: 138px; height: 138px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center; background: radial-gradient(circle at 36% 26%, #ff8a8a 0%, #ef4444 26%, #b91c1c 62%, #7f1d1d 100%); box-shadow: inset 0 3px 5px rgba(255,255,255,.55), inset 0 -8px 12px rgba(80,0,0,.55), 0 0 0 5px #e9ecf0, 0 0 0 7px #7a808a, 0 0 0 9px #fef3c7, 0 0 0 10.5px #92400e, 0 9px 0 6px #8a1a1a, 0 18px 14px -3px rgba(0,0,0,.55); transition: transform .12s, box-shadow .12s, filter .2s; -webkit-tap-highlight-color: transparent; } .jpk-boton::before { content: ""; position: absolute; left: 20%; right: 20%; top: 7%; height: 28%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; } .jpk-boton:hover { filter: brightness(1.08); } .jpk-boton:active, .jpk-boton[aria-disabled="true"] { transform: translateY(6px); box-shadow: inset 0 3px 5px rgba(255,255,255,.4), inset 0 -8px 12px rgba(80,0,0,.55), 0 0 0 5px #e9ecf0, 0 0 0 7px #7a808a, 0 0 0 9px #fef3c7, 0 0 0 10.5px #92400e, 0 3px 0 6px #8a1a1a, 0 8px 8px -3px rgba(0,0,0,.55); } .jpk-boton[aria-disabled="true"] { cursor: default; filter: saturate(.7) brightness(.9); } .jpk-boton:focus-visible { outline: 3px solid #0012FD; outline-offset: 13px; } .jpk-b-t { position: relative; font: 400 30px/.95 "Bebas Neue", Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(80,0,0,.65); max-width: 104px; } .jpk-b-c { position: relative; max-width: 100px; font: 600 10.5px/1.15 "Poppins", system-ui, sans-serif; color: #fee2e2; letter-spacing: .02em; } .jpk-aviso { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 8px; background: #080503; color: #fde68a; font: 500 12.5px/1.4 "Poppins", system-ui, sans-serif; text-align: center; box-shadow: inset 0 0 0 2px #000; } /* ---------- Tabla de pagos ---------- */ .jpk-pagos { padding: 10px 10px 9px; border-radius: 12px; background: linear-gradient(180deg, #fffdf2, #fef3c7); box-shadow: inset 0 0 0 2px #fcd34d, inset 0 0 0 3.5px #92400e, 0 3px 6px -2px rgba(0,0,0,.6); } .jpk-pagos-t { margin: 2px 0 8px; text-align: center; font: 400 17px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #92400e; } .jpk-pagos ul { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; } .jpk-pagos li { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 6px 1px 6px; border-radius: 8px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(146,64,14,.3); } .jpk-pagos li b { font: 400 17px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .02em; color: #0400BC; white-space: nowrap; } .jpk-pago-n { font: 600 10px/1.15 "Poppins", system-ui, sans-serif; color: #5a2706; text-align: center; } .jpk-nota { margin: 8px 4px 1px; text-align: center; font: 500 11px/1.4 "Poppins", system-ui, sans-serif; color: #6b3a14; } /* ---------- Bandeja de monedas ---------- */ .jpk-bandeja { position: relative; height: 62px; margin: 2px 16px 0; border-radius: 12px 12px 22px 22px; overflow: hidden; background: linear-gradient(180deg, #4a4f57 0%, #1b1d21 38%, #2b2e33 100%); box-shadow: inset 0 0 0 2px #e9ecf0, inset 0 0 0 4px #6c727c, inset 0 8px 14px rgba(0,0,0,.8), 0 2px 0 #fff; } .jpk-bandeja::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--cromo); opacity: .9; } .jpk-ranura { position: absolute; left: 50%; top: 8px; width: 46%; height: 8px; margin-left: -23%; border-radius: 4px; background: #000; box-shadow: 0 1px 0 rgba(255,255,255,.35), inset 0 2px 3px rgba(0,0,0,.9); } .jpk-monedas { position: absolute; inset: 0; z-index: 2; } .jpk-moneda { position: absolute; bottom: 12px; width: 26px; height: 26px; margin-left: -13px; display: grid; place-items: center; border-radius: 50%; font: 400 15px/1 "Bebas Neue", Impact, sans-serif; color: #92400e; transform: rotate(var(--r, 0deg)); background: radial-gradient(circle at 35% 28%, #fffbe6 0%, #fcd34d 40%, #f59e0b 80%, #b45309 100%); box-shadow: inset 0 0 0 1.5px #b45309, inset 0 0 0 4px rgba(254,243,199,.45), 0 2px 2px rgba(0,0,0,.6); animation: jpk-cae .65s cubic-bezier(.45,0,.9,.6) backwards; } @keyframes jpk-cae { 0% { transform: translateY(-62px) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 78% { transform: translateY(0) rotate(var(--r)); } 90% { transform: translateY(-7px) rotate(var(--r)); } 100% { transform: translateY(0) rotate(var(--r)); } } /* ---------- Palanca cromada ---------- */ .jpk-palanca { position: absolute; right: 0; top: 168px; width: 62px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 3; } .jpk-pal-base { /* placa de montaje en el costado del gabinete */ position: absolute; left: 0; bottom: 6px; width: 30px; height: 56px; border-radius: 8px 14px 14px 8px; background: var(--cromo); box-shadow: inset 0 0 0 1.5px #3b3f46, 0 3px 5px rgba(0,0,0,.5); } .jpk-pal-base::after { content: ""; position: absolute; left: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9aa1ab 60%, #4b4f57); box-shadow: 0 1px 2px rgba(0,0,0,.6); } .jpk-pal-brazo { position: absolute; left: 20px; bottom: 33px; width: 12px; height: 104px; border-radius: 6px; transform-origin: 50% 100%; background: linear-gradient(90deg, #6e747d, #ffffff 35%, #c3c8cf 60%, #6e747d); box-shadow: 0 0 0 1px rgba(40,44,50,.8); } .jpk-pal-bola { position: absolute; left: 50%; top: -22px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; transform-origin: 50% 50%; background: radial-gradient(circle at 34% 26%, #ffd0d0 0%, #ff4d4d 20%, #dc2626 52%, #7f1d1d 100%); box-shadow: inset 0 -4px 6px rgba(80,0,0,.5), 0 0 0 1.5px #7f1d1d, 0 6px 8px rgba(0,0,0,.45); } .jpk-pal-bola::after { content: ""; position: absolute; left: 18%; top: 12%; width: 34%; height: 24%; border-radius: 50%; background: rgba(255,255,255,.75); filter: blur(.5px); } .jpk-palanca:hover .jpk-pal-bola { filter: brightness(1.1); } .jpk-maq.tira ~ .jpk-palanca .jpk-pal-brazo { animation: jpk-tira .85s cubic-bezier(.3,.4,.3,1) both; } .jpk-maq.tira ~ .jpk-palanca .jpk-pal-bola { animation: jpk-tira-bola .85s cubic-bezier(.3,.4,.3,1) both; } /* baja (hacia el jugador) y vuelve con resorte */ @keyframes jpk-tira { 0% { transform: scaleY(1); } 32% { transform: scaleY(.38); } 44% { transform: scaleY(.38); } 66% { transform: scaleY(1.08); } 82% { transform: scaleY(.97); } 100% { transform: scaleY(1); } } @keyframes jpk-tira-bola { 0% { transform: scale(1, 1); } 32% { transform: scale(1.28, 3.37); } 44% { transform: scale(1.28, 3.37); } 66% { transform: scale(1, .93); } 82% { transform: scale(1, 1.03); } 100% { transform: scale(1, 1); } } /* ---------- Modo oscuro: la máquina es un objeto metálico, solo se baja un poco el brillo del entorno ---------- */ :root[data-theme="dark"] .jpk-maq { box-shadow: inset 0 0 0 2px rgba(254,243,199,.8), inset 0 0 0 4px rgba(146,64,14,.8), inset 0 3px 8px 3px rgba(255,255,255,.3), 0 3px 0 #92400e, 0 6px 0 #6b2f0a, 0 0 70px -10px rgba(245,158,11,.28), 0 38px 50px -26px rgba(0,0,0,.95); } :root[data-theme="dark"] .jpk-letrero { background: linear-gradient(180deg, #f6edc9 0%, #efdfa0 55%, #e3c96f 100%); } :root[data-theme="dark"] .jpk-pagos { background: linear-gradient(180deg, #f6edc9, #ecdba0); } /* ---------- Celular (390 px): entra entera y la palanca sigue visible (más chica) ---------- */ @media (max-width: 640px) { .jpk-conj { padding-right: 34px; margin-top: 4px; } .jpk-maq { padding: 9px 9px 12px; border-radius: 64px 64px 20px 20px / 44px 44px 20px 20px; } .jpk-cuerpo { padding: 9px 8px 10px; gap: 9px; border-radius: 54px 54px 12px 12px / 38px 38px 12px 12px; } .jpk-letrero { min-height: 66px; padding: 16px 22px; border-radius: 40px 40px 10px 10px / 28px 28px 10px 10px; } .jpk-titulo { font-size: 40px; } .jpk-bombs i { width: 8px; height: 8px; } .jpk-bombs.arriba, .jpk-bombs.abajo { left: 12px; right: 12px; height: 9px; } .jpk-bombs.izq, .jpk-bombs.der { width: 9px; top: 18px; bottom: 18px; } .jpk-bombs.arriba { top: 4px; } .jpk-bombs.abajo { bottom: 4px; } .jpk-bombs.izq { left: 4px; } .jpk-bombs.der { right: 4px; } .jpk-marco { padding: 6px; border-radius: 14px; } .jpk-ventana { padding: 5px; } .jpk-rodillos { gap: 4px; } .jpk-rodillo { --celda: 88px; --asoma: 18px; } .jpk-sim { --t: 50px; } .jpk-sim b { font-size: 14px; } .jpk-sim.mini { --t: 30px; } .jpk-visor { min-height: 58px; padding: 5px 9px; } .jpk-ganado .jpk-sim.mini { --t: 38px; } .jpk-ganado-txt { font-size: 11px; } .jpk-ganado-txt b { font-size: 21px; } .jpk-consola { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 8px; padding: 10px 8px 14px; } .jpk-accion { grid-column: 1 / -1; grid-row: 2; padding: 6px 0 8px; } .jpk-led.l-energia { grid-column: 1; grid-row: 1; } .jpk-led.l-premio { grid-column: 2; grid-row: 1; } .jpk-led-v { font-size: 28px; padding: 7px 4px 5px; } .jpk-boton { width: 116px; height: 116px; } .jpk-b-t { font-size: 25px; max-width: 88px; } .jpk-b-c { font-size: 9.5px; max-width: 84px; } .jpk-pagos { padding: 8px 6px 7px; } .jpk-pagos ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .jpk-pagos li b { font-size: 16px; } .jpk-bandeja { height: 54px; margin: 2px 8px 0; } .jpk-moneda { width: 22px; height: 22px; margin-left: -11px; font-size: 13px; } .jpk-palanca { width: 38px; height: 100px; top: 112px; right: -2px; } .jpk-pal-base { width: 20px; height: 38px; bottom: 4px; } .jpk-pal-base::after { left: 3px; width: 15px; height: 15px; margin-top: -7.5px; } .jpk-pal-brazo { left: 12px; bottom: 22px; width: 8px; height: 68px; } .jpk-pal-bola { width: 25px; height: 25px; margin-left: -12.5px; top: -16px; } } /* ---------- Reducir movimiento: sin animaciones, el resultado sale al instante ---------- */ @media (prefers-reduced-motion: reduce) { .jpk-bombs i::after, .jpk-maq.girando .jpk-bombs i::after, .jpk-maq.gana .jpk-bombs i::after, .jpk-maq.girando .jpk-linea, .jpk-maq.gana .jpk-linea, .jpk-moneda, .jpk-ganado.nuevo, .jpk-rodillo.frena .jpk-tira, .jpk-maq.gana .jpk-tira.quieta .jpk-celda:nth-child(2) .jpk-sim, .jpk-maq.tira ~ .jpk-palanca .jpk-pal-brazo, .jpk-maq.tira ~ .jpk-palanca .jpk-pal-bola { animation: none; } .jpk-boton { transition: none; } } /* juegos-animacion.css */ /* [CERT] 20-oct · ANIMACIONES DENTRO DE LAS PARTIDAS (pedido del dueño: «más animación dentro»; el fondo no se toca). Se mueven solo las piezas que ya existen (cartas, respuestas, ficha, mazo, camino, casillas, teclas): nada de confeti ni partículas. 250–700 ms por pieza; entre una pregunta y la siguiente: ~300 ms de salida + ~580 ms de llegada. 20-oct (tarde) · el dueño las vio «iguales»: recorridos más largos, giros, rebotes y anillos de luz que se expanden (sin confeti). COMUNES (Trivia, Completa, Ahorcado y también Memoria, Phishing, Entrevista y Zona horaria, que usan las mismas clases .pc-* y .p2-*): · la carta llega desde el mazo (desliza y gira un poco); las respuestas entran en cascada (60 ms entre una y otra); · al pasar el ratón la respuesta se levanta con un brillo del color del juego; al presionar se hunde un poco; · acierto: pulso de luz verde y la ✓ salta; fallo: la elegida tiembla ANTES de voltearse y la correcta se ilumina; · «Siguiente»: app.js pone main.ja-saliendo + .ja-sale (la carta) + .ja-sale-op (respuestas o teclado) y la carta sale hacia un lado; del mazo sale la carta de arriba y su número cambia con un giro; · la ficha de monedas da un saltito (la moneda gira) y su número sube contando (app.js, jaContar); · final: el oso entra con un saltito, las cifras cuentan desde 0 (app.js, jaFinal) y los ✓/✗ del camino aparecen uno por uno. PROPIAS: Completa (la palabra vuela al hueco: .ja-vuela / .ja-lleno), Ahorcado (.ja-pulsada, .ja-nueva, .ja-apaga, .ja-ola) y Desafío del día (contador .ja-barra que se llena y sello .ja-sello «¡Hecho!»). Colores: var(--jg-*) de juegos-identidad.css, con el azul de la marca de respaldo. Con «menos movimiento» (prefers-reduced-motion: reduce) NADA de este archivo se mueve: todo el movimiento va dentro de @media (prefers-reduced-motion: no-preference) y app.js (jaQuieto) se salta la salida, el vuelo y los conteos. */ /* ---------- Estados quietos (valen siempre, también con menos movimiento) ---------- */ /* el brillo de las respuestas (detrás de la carta, del color del juego); la correcta queda con luz verde */ [data-ruta="juegos"] .pc-opciones .opcion { position: relative; isolation: isolate; } [data-ruta="juegos"] .pc-opciones .opcion::before { content: ""; position: absolute; inset: 8% 4% -6%; z-index: -1; border-radius: 28px; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--jg-1, #4a54ff) 55%, transparent), transparent); filter: blur(14px); } [data-ruta="juegos"] .pc-opciones .opcion:is(:hover, :focus-visible):not(:disabled)::before { opacity: 1; } [data-ruta="juegos"] .pc-opciones .opcion.correcta::before { opacity: .6; background: radial-gradient(closest-side, rgba(52,185,139,.62), transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .pc-opciones .opcion::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--jg-1, #6c78ff) 42%, transparent), transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .pc-opciones .opcion.correcta::before { background: radial-gradient(closest-side, rgba(69,211,154,.42), transparent); } /* Completa la frase: el hueco lleno con la palabra elegida */ [data-ruta="juegos"] .pc-carta .hueco-txt.ja-lleno { padding: 0 .22em; border-bottom-style: solid; border-radius: 8px 8px 0 0; color: var(--jg-3, #0400bc); background: color-mix(in srgb, var(--jg-papel, #eef0ff) 80%, transparent); } [data-ruta="juegos"] .pc-carta .hueco-txt.ja-bien { color: #0b6b4c; border-bottom-color: #12805c; background: #e3f5ec; } [data-ruta="juegos"] .pc-carta .hueco-txt.ja-mal { color: #a1161c; border-bottom-color: #c2272d; background: #fbe3e4; } :root[data-theme="dark"] [data-ruta="juegos"] .pc-carta .hueco-txt.ja-bien { color: #8ff0c4; background: rgba(69,211,154,.16); } :root[data-theme="dark"] [data-ruta="juegos"] .pc-carta .hueco-txt.ja-mal { color: #ffb3b6; background: rgba(255,122,126,.16); } /* la palabra que vuela (va fuera de #main, por eso app.js le copia los colores del juego) */ .ja-vuela { position: fixed; z-index: 60; display: grid; place-items: center; box-sizing: border-box; padding: 0 .4em; border-radius: 10px; pointer-events: none; max-width: calc(100vw - 32px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15px/1.2 var(--font); color: var(--jg-3, #0400bc); background: #fff; box-shadow: 0 0 0 2px var(--jg-1, #6c78ff), 0 16px 28px -12px color-mix(in srgb, var(--jg-3, #0400bc) 70%, transparent); } :root[data-theme="dark"] .ja-vuela { color: #fff; background: var(--jg-3, #0400bc); box-shadow: 0 0 0 2px var(--jg-chispa, #b3baff), 0 16px 28px -12px rgba(0,0,0,.7); } /* Ahorcado: palabra completa, las casillas quedan con su línea verde */ [data-ruta="juegos"] .ah-palabra.ja-ola .ah-casilla { box-shadow: inset 0 -3px 0 #34b98b, 0 6px 14px -10px rgba(18,128,92,.6); } /* Desafío del día: el contador también es una barra que se llena en el color del juego */ [data-ruta="juegos"] .ja-barra { display: inline-grid; gap: 6px; flex: 0 1 220px; min-width: 0; } [data-ruta="juegos"] .ja-barra::after { content: ""; display: block; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--jg-3, #0400bc), var(--jg-2, #0012fd)) 0 0 / calc(var(--ja-p, 0) * 100%) 100% no-repeat, color-mix(in srgb, var(--jg-1, #6c78ff) 22%, transparent); } [data-ruta="juegos"] .ja-barra.ja-listo::after { box-shadow: 0 0 0 1px color-mix(in srgb, var(--jg-2, #0012fd) 35%, transparent), 0 0 12px color-mix(in srgb, var(--jg-1, #6c78ff) 60%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .ja-barra::after { background: linear-gradient(90deg, var(--jg-2, #4a54ff), var(--jg-chispa, #b3baff)) 0 0 / calc(var(--ja-p, 0) * 100%) 100% no-repeat, rgba(255,255,255,.1); } /* el sello «¡Hecho!» sobre la carta del reto, recién enviado */ [data-ruta="juegos"] .ja-sello { position: absolute; right: 14px; bottom: 12px; z-index: 2; padding: 7px 14px 4px; border: 3px solid var(--jg-2, #0012fd); border-radius: 12px; font: 400 28px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--jg-2, #0012fd); pointer-events: none; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jg-2, #0012fd) 22%, transparent); transform: rotate(-9deg); } :root[data-theme="dark"] [data-ruta="juegos"] .ja-sello { color: var(--jg-chispa, #b3baff); border-color: var(--jg-chispa, #b3baff); background: rgba(0,0,0,.28); } @media (max-width: 760px) { [data-ruta="juegos"] .ja-sello { right: 8px; bottom: 8px; font-size: 22px; padding: 6px 10px 3px; } } /* mientras la carta sale, nada se puede tocar dos veces */ #main.ja-saliendo .partida { pointer-events: none; } /* ---------- Movimiento (solo si la persona no pidió «menos movimiento») ---------- */ @media (prefers-reduced-motion: no-preference) { /* 1 · la carta llega desde el mazo (a la derecha; en el celular el mazo está arriba) */ /* [CERT] 20-oct · MÁS NOTORIO (el dueño los vio «iguales»): recorridos 2–3 veces más largos, giros visibles y rebote al llegar */ [data-ruta="juegos"] .pc-juego .pc-carta { animation: jaLlega .58s cubic-bezier(.2,1.18,.35,1) backwards; } @keyframes jaLlega { 0% { opacity: 0; transform: perspective(1400px) translate(62%, -14%) rotate(11deg) rotateY(-48deg) rotateX(3deg) scale(.68); } 55% { opacity: 1; } } @media (max-width: 760px) { [data-ruta="juegos"] .pc-juego .pc-carta { animation-name: jaLlegaCel; } @keyframes jaLlegaCel { 0% { opacity: 0; transform: perspective(1400px) translateY(-90px) rotate(-8deg) rotateX(3deg) scale(.7); } 55% { opacity: 1; } } } [data-ruta="juegos"] .pc-juego .pc-carta > .pc-medallon { animation: jaMedallon .55s .28s cubic-bezier(.3,1.6,.5,1) backwards; } @keyframes jaMedallon { from { opacity: 0; scale: .2; rotate: -40deg; } } /* el número del mazo cambia con un giro */ [data-ruta="juegos"] .pc-juego .pc-mazo-n span { display: inline-block; animation: jaCifra .45s .14s cubic-bezier(.3,1.6,.5,1) backwards; } @keyframes jaCifra { from { opacity: 0; transform: translateY(-90%) rotateX(90deg) scale(1.6); } } /* 2 · las respuestas entran en cascada; al pasar se levantan con brillo; al presionar se hunden */ [data-ruta="juegos"] .pc-opciones .opcion { animation: jaReparte .5s cubic-bezier(.2,1.35,.4,1) backwards; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(1) { animation-delay: .16s; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(2) { animation-delay: .24s; --ja-g: -5deg; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(3) { animation-delay: .32s; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(4) { animation-delay: .4s; --ja-g: -5deg; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(5) { animation-delay: .48s; } [data-ruta="juegos"] .pc-opciones .opcion:nth-child(6) { animation-delay: .56s; --ja-g: -5deg; } @keyframes jaReparte { 0% { opacity: 0; transform: translateY(110px) rotate(var(--ja-g, 6deg)) scale(.7); } 50% { opacity: 1; } } [data-ruta="juegos"] .pc-opciones .opcion::before { transform: scale(.9); transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); } [data-ruta="juegos"] .pc-opciones .opcion:is(:hover, :focus-visible):not(:disabled)::before { transform: scale(1.04); } [data-ruta="juegos"] .pc-opciones .opcion:active:not(:disabled) { transform: translateY(-2px) scale(.965); } /* 3 · al responder: el volteo es más corto; acierto = pulso de luz verde, la ✓ salta y la carta da un saltito */ [data-ruta="juegos"] .pc-giro { transition-duration: .5s; } [data-ruta="juegos"] .pc-opciones .opcion.correcta.elegida { animation: jaSi .6s .4s cubic-bezier(.3,1.5,.5,1) backwards; } @keyframes jaSi { 40% { transform: translateY(-46px) scale(1.12) rotate(-2deg); } 70% { transform: translateY(-6px) scale(.98); } } @media (max-width: 760px) { @keyframes jaSi { 40% { transform: translateY(-26px) scale(1.07) rotate(-2deg); } 70% { transform: translateY(-4px) scale(.98); } } } [data-ruta="juegos"] .pc-opciones .opcion.correcta.elegida::before { animation: jaLuz .8s .3s ease-out both; } [data-ruta="juegos"] .pc-opciones .opcion.elegida .pc-marca { animation: jaMarca .5s .38s cubic-bezier(.3,1.7,.5,1) backwards; } @keyframes jaLuz { 0% { opacity: 0; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.3); } 100% { opacity: .65; transform: scale(1); } } @keyframes jaMarca { from { opacity: 0; transform: scale(.1) rotate(-120deg); } 60% { transform: scale(1.35) rotate(8deg); } } /* anillos de luz que se expanden desde la carta (verde si acertaste, rojo si no) */ [data-ruta="juegos"] .pc-opciones .opcion:is(.correcta.elegida, .incorrecta.elegida, .correcta)::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 22px; pointer-events: none; border: 3px solid #34b98b; opacity: 0; animation: jaAnillo .7s .5s cubic-bezier(.2,.7,.3,1); } [data-ruta="juegos"] .pc-opciones .opcion.incorrecta.elegida::after { border-color: #e2575d; animation-delay: .62s; } [data-ruta="juegos"] .pc-opciones .opcion.correcta:not(.elegida)::after { animation-delay: .78s; } @keyframes jaAnillo { 0% { opacity: .95; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.32); } } @media (max-width: 760px) { @keyframes jaAnillo { 0% { opacity: .95; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.14); } } } /* 4 · fallo: la elegida tiembla ANTES de voltearse (y mostrar ✗); después la correcta se ilumina */ [data-ruta="juegos"] .pc-opciones .opcion.incorrecta.elegida { animation: jaTiembla .36s ease-in-out, jaCae .45s .62s cubic-bezier(.3,1.4,.5,1); } @keyframes jaCae { 40% { transform: translateY(14px) scale(.94) rotate(2deg); } } [data-ruta="juegos"] .pc-opciones .opcion.incorrecta.elegida .pc-giro { transition-delay: .3s; } [data-ruta="juegos"] .pc-opciones .opcion.incorrecta.elegida .pc-marca { animation-delay: .62s; } [data-ruta="juegos"] .pc-opciones .opcion.correcta:not(.elegida)::before { animation: jaLuz .7s .5s ease-out both; } [data-ruta="juegos"] .pc-opciones .opcion.correcta:not(.elegida) { animation: jaIlumina .55s .6s cubic-bezier(.3,1.5,.5,1) backwards; } @keyframes jaTiembla { 0%, 100% { translate: 0 0; rotate: 0deg; } 15%, 55% { translate: -16px 0; rotate: -3deg; } 35%, 75% { translate: 16px 0; rotate: 3deg; } } @keyframes jaIlumina { 45% { scale: 1.1; translate: 0 -18px; } } @media (max-width: 760px) { @keyframes jaIlumina { 45% { scale: 1.04; translate: 0 -12px; } } } /* la ficha de arriba da un saltito y la moneda gira (el número sube contando: app.js) */ [data-ruta="juegos"] .pc-ficha.sube { animation: jaSaltito .6s .2s cubic-bezier(.3,1.5,.5,1); } [data-ruta="juegos"] .pc-ficha.sube .pc-ficha-ic { animation: jaMoneda .7s .2s cubic-bezier(.3,.7,.3,1); } @keyframes jaSaltito { 40% { transform: translateY(-16px) scale(1.24) rotate(-3deg); } 70% { transform: translateY(2px) scale(.97); } } @keyframes jaMoneda { to { transform: rotateY(720deg); } } /* 5 · «Siguiente»: la carta jugada sale hacia un lado; las respuestas (o el teclado) y el pie se van; del mazo sale la de arriba */ [data-ruta="juegos"] .pc-carta.ja-sale { animation: jaSale .3s cubic-bezier(.5,-.3,.8,.4) forwards; } @keyframes jaSale { to { opacity: 0; transform: perspective(1400px) translate(-80%, 10%) rotate(-15deg) rotateY(45deg) rotateX(3deg) scale(.75); } } [data-ruta="juegos"] .ja-sale-op { animation: jaSaleOp .28s cubic-bezier(.5,-.4,.8,.4) forwards; } #main.ja-saliendo .partida-pie { animation: jaSaleOp .22s ease-in forwards; } @keyframes jaSaleOp { to { opacity: 0; transform: translateY(70px) scale(.9); } } #main.ja-saliendo .pc-pila .pc-naipe:last-child { animation: jaDeal .3s ease-in forwards; } @keyframes jaDeal { to { opacity: 0; translate: -120px 14px; rotate: -24deg; } } #main.ja-saliendo .pc-mazo-n span { animation: jaCifraSale .2s ease-in forwards; } @keyframes jaCifraSale { to { opacity: 0; transform: translateY(45%) rotateX(-70deg); } } @media (max-width: 760px) { @keyframes jaDeal { to { opacity: 0; translate: -40px 10px; rotate: -20deg; } } } /* 6 · camino de progreso: el punto actual late suave; el tramo se llena animado (juegos-sala.css) */ [data-ruta="juegos"] .p2-punto.ya { animation: jaLate 1.8s ease-in-out infinite; } @keyframes jaLate { 50% { scale: 1.18; } } /* 7 · final: el oso entra con un saltito; el marcador sube; los ✓/✗ del camino aparecen uno por uno */ [data-ruta="juegos"] .p2-final .pl-oso-fin { position: relative; animation: jaOso .65s .06s cubic-bezier(.3,1.5,.5,1) backwards; } @keyframes jaOso { 0% { opacity: 0; transform: translateY(90px) scale(.4) rotate(-14deg); } 50% { opacity: 1; } 75% { transform: translateY(-8px) scale(1.06) rotate(3deg); } } /* dos anillos de luz del color del juego salen detrás del oso */ [data-ruta="juegos"] .p2-final .pl-oso-fin::before, [data-ruta="juegos"] .p2-final .pl-oso-fin::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; pointer-events: none; opacity: 0; border: 3px solid var(--jg-1, #5563ff); box-shadow: 0 0 22px color-mix(in srgb, var(--jg-1, #5563ff) 60%, transparent); animation: jaAnilloFin 1s .45s cubic-bezier(.2,.7,.3,1); } [data-ruta="juegos"] .p2-final .pl-oso-fin::after { animation-delay: .7s; } @keyframes jaAnilloFin { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2); } } [data-ruta="juegos"] .p2-final .p2-celda { animation: jaSube .5s .2s cubic-bezier(.2,1.3,.4,1) backwards; } [data-ruta="juegos"] .p2-final .p2-cifra b { display: inline-block; animation: jaCifraFin .5s .3s cubic-bezier(.3,1.6,.5,1) backwards; } @keyframes jaCifraFin { from { opacity: 0; transform: scale(2.2); } } [data-ruta="juegos"] .p2-final .p2-celda + .p2-celda { animation-delay: .24s; } [data-ruta="juegos"] .p2-final .pl-fin-acciones > * { animation: jaSube .35s .5s cubic-bezier(.2,.8,.2,1) backwards; } [data-ruta="juegos"] .p2-final .pl-fin-acciones > * + * { animation-delay: .56s; } @keyframes jaSube { from { opacity: 0; transform: translateY(40px) scale(.9); } } [data-ruta="juegos"] .p2-final .p2-camino > li { --ja-d: .45s; } [data-ruta="juegos"] .p2-final .p2-camino > li:nth-child(2) { --ja-d: .52s; } [data-ruta="juegos"] .p2-final .p2-camino > li:nth-child(3) { --ja-d: .59s; } [data-ruta="juegos"] .p2-final .p2-camino > li:nth-child(4) { --ja-d: .66s; } [data-ruta="juegos"] .p2-final .p2-camino > li:nth-child(5) { --ja-d: .73s; } [data-ruta="juegos"] .p2-final .p2-camino > li:nth-child(6) { --ja-d: .8s; } [data-ruta="juegos"] .p2-final .p2-camino > li:nth-child(7) { --ja-d: .87s; } [data-ruta="juegos"] .p2-final .p2-camino > li:nth-child(8) { --ja-d: .94s; } [data-ruta="juegos"] .p2-final .p2-camino > li:nth-child(n+9) { --ja-d: 1.01s; } [data-ruta="juegos"] .p2-final .p2-punto { animation: jaPunto .3s var(--ja-d) cubic-bezier(.3,1.6,.5,1) backwards; } [data-ruta="juegos"] .p2-final .p2-tramo::after { animation: jaTramo .16s var(--ja-d) ease-out backwards; } @keyframes jaPunto { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.4); } } @keyframes jaTramo { from { transform: scaleX(0); } } /* Completa la frase: el hueco se llena al llegar la palabra */ [data-ruta="juegos"] .pc-carta .hueco-txt.ja-lleno { animation: jaLlena .4s .58s cubic-bezier(.3,1.7,.5,1) backwards; } @keyframes jaLlena { from { transform: scale(.5) rotate(-6deg); } } /* Ahorcado: el teclado, las casillas y las vidas entran con cada palabra (solo antes de la primera letra) */ [data-ruta="juegos"] .ah-juego:not(.ja-jugada) .ah-tecla { animation: jaTecla .3s .16s cubic-bezier(.2,.8,.2,1) backwards; } [data-ruta="juegos"] .ah-juego:not(.ja-jugada) .ah-tecla:nth-child(n+10) { animation-delay: .22s; } [data-ruta="juegos"] .ah-juego:not(.ja-jugada) .ah-tecla:nth-child(n+19) { animation-delay: .28s; } @keyframes jaTecla { from { opacity: 0; transform: translateY(12px) scale(.9); } } [data-ruta="juegos"] .ah-juego:not(.ja-jugada) .ah-casilla { animation: jaSube .32s .2s cubic-bezier(.2,.8,.2,1) backwards; } [data-ruta="juegos"] .ah-juego:not(.ja-jugada) .ah-vida { animation: jaPunto .3s .3s cubic-bezier(.3,1.6,.5,1) backwards; } /* la tecla pulsada se hunde y vuelve */ [data-ruta="juegos"] .ah-tecla.ja-pulsada { animation: jaHunde .3s cubic-bezier(.3,1.4,.5,1); } @keyframes jaHunde { 0% { transform: translateY(3px) scale(.9); } } /* solo las casillas de la letra acertada se dan vuelta (antes se volteaban todas en cada letra) */ [data-ruta="juegos"] .ah-casilla.ver { animation: none; } [data-ruta="juegos"] .ah-casilla.ver.ja-nueva { animation: jaVoltea .38s calc(var(--n, 0) * 60ms) cubic-bezier(.3,1.5,.5,1) backwards; } @keyframes jaVoltea { from { transform: perspective(300px) rotateY(90deg); background-color: color-mix(in srgb, var(--jg-1, #6c78ff) 45%, #fff); } } /* al fallar, una vida se apaga (se encoge y pierde el color) */ [data-ruta="juegos"] .ah-vida.ja-apaga { animation: jaApaga .42s ease-in backwards; } @keyframes jaApaga { 0% { opacity: 1; transform: scale(1.25); filter: none; } 35% { opacity: 1; transform: scale(1.3); filter: none; } } /* palabra completa: las casillas hacen una ola */ [data-ruta="juegos"] .ah-palabra.ja-ola .ah-casilla { animation: jaOla .42s calc(.4s + var(--i, 0) * 40ms) ease-in-out backwards; } [data-ruta="juegos"] .ah-palabra.ja-ola .ah-casilla.ja-nueva { animation: jaVoltea .38s calc(var(--n, 0) * 60ms) cubic-bezier(.3,1.5,.5,1) backwards, jaOla .42s calc(.4s + var(--i, 0) * 40ms) ease-in-out; } @keyframes jaOla { 40% { transform: translateY(-10px); } } /* Desafío del día: la barra se llena suave; al llegar a 20, el botón se enciende; al enviar, cae el sello */ [data-ruta="juegos"] .ja-barra::after { transition: background-size .25s ease-out, box-shadow .3s; } [data-ruta="juegos"] .p2-reto #reto-ok:not(:disabled) { animation: jaListo .4s cubic-bezier(.3,1.6,.5,1); } @keyframes jaListo { 45% { transform: scale(1.06); } } [data-ruta="juegos"] .ja-sello { animation: jaSello .42s .14s cubic-bezier(.3,1.3,.5,1) backwards; } @keyframes jaSello { from { opacity: 0; transform: rotate(-3deg) scale(2.2); } 70% { opacity: 1; } } [data-ruta="juegos"] .p2-pantalla:has(> .ja-sello) { animation: jaGolpe .26s .44s ease-out; } @keyframes jaGolpe { 40% { transform: translateY(3px) scale(.995); } } [data-ruta="juegos"] .p2-reto .reto-hecho { animation: jaSube .4s .2s cubic-bezier(.2,.8,.2,1) backwards; } } /* [CERT] 20-oct · celular alto: la escena propia del inicio de cada juego va arriba, a todo el ancho (antes un cuadrito de ~110 px junto al título). En celulares bajos (menos de 760 px de alto) se queda como estaba, para que el botón «Jugar» siga a la vista. */ @media (max-width: 600px) and (min-height: 760px) { [data-ruta="juegos"] .partida.p2-intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "volver" "fig" "tit" "txt" "premio" "ener" "btn"; } [data-ruta="juegos"] .p2-intro > .volver { justify-self: start; } [data-ruta="juegos"] .p2-intro > .p2-pantalla { width: 100%; height: 188px; align-self: stretch; padding: 10px; } [data-ruta="juegos"] .p2-intro .p2-pantalla .figura.pl-logo { height: 100%; } } /* juegos-animacion-extra.css */ /* [CERT] 20-oct · Animaciones propias de Memoria, Detecta el phishing, Ordena la entrevista y Zona horaria. Solo piezas que ya existen (sin confeti ni partículas), 150–500 ms por pieza, en el color de cada juego (--jg-*). Lo común de cartas y respuestas (.pc-carta, .pc-opciones, .pc-ficha, .p2-cifra…) vive en juegos-animacion.css: aquí no se toca. Con «reducir movimiento» todo aparece quieto: el movimiento va dentro de @media (prefers-reduced-motion: no-preference). */ /* ---------- Zona horaria: reloj pequeño de la pregunta ---------- */ .jx-raiz .jxa-reloj { display: block; width: 62px; height: 62px; margin: 0 auto 4px; overflow: visible; } .jx-raiz .jxa-r-cara { fill: var(--jg-papel, #fff); stroke: var(--jg-2, #0012fd); stroke-width: 4; } .jx-raiz .jxa-r-marca { stroke: var(--jg-2, #0012fd); stroke-width: 4; stroke-linecap: round; opacity: .55; } .jx-raiz .jxa-reloj .jxa-r-h, .jx-raiz .jxa-reloj .jxa-r-m { stroke: var(--jg-tx, #1b1f4a); stroke-linecap: round; transform-box: view-box; transform-origin: 50px 50px; } .jx-raiz .jxa-reloj .jxa-r-h { stroke-width: 6; } .jx-raiz .jxa-reloj .jxa-r-m { stroke-width: 4; stroke: var(--jg-2, #0012fd); } .jx-raiz .jxa-r-c { fill: var(--jg-2, #0012fd); } :root[data-theme="dark"] .jx-raiz .jxa-r-cara { fill: rgba(255,255,255,.06); stroke: var(--jg-1, #6c78ff); } :root[data-theme="dark"] .jx-raiz .jxa-r-marca { stroke: var(--jg-1, #6c78ff); } :root[data-theme="dark"] .jx-raiz .jxa-reloj .jxa-r-m, :root[data-theme="dark"] .jx-raiz .jxa-r-c { stroke: var(--jg-1, #6c78ff); fill: var(--jg-1, #6c78ff); } /* ---------- Detecta el phishing: sello sobre el mensaje ---------- */ .jx-raiz .jx-msg { position: relative; } .jx-raiz .jxa-sello { position: absolute; right: 12px; top: -15px; /* sobre el borde de arriba: no tapa el texto del mensaje */ padding: 3px 12px 2px; border: 3px solid currentColor; border-radius: 8px; font: 800 17px/1.2 var(--font-2, inherit); letter-spacing: .1em; rotate: -9deg; opacity: .92; pointer-events: none; background: color-mix(in srgb, currentColor 9%, var(--jg-papel, #fff) 70%); } .jx-raiz .jxa-legit { color: #14833b; } .jx-raiz .jxa-fraude { color: #c2272d; } :root[data-theme="dark"] .jx-raiz .jxa-sello { background: color-mix(in srgb, currentColor 14%, #0b0d24 80%); } :root[data-theme="dark"] .jx-raiz .jxa-legit { color: #4ade80; } :root[data-theme="dark"] .jx-raiz .jxa-fraude { color: #ff7a7e; } /* ---------- Ordena la entrevista: ✓ / ✗ de cada parte al comprobar ---------- */ .jx-raiz .jxa-resuelta .jx-star-item { position: relative; } .jx-raiz .jxa-resuelta .jx-star-item::after { content: "✓"; position: absolute; top: -8px; right: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #14833b; color: #fff; font: 700 14px/1 var(--font-2, inherit); box-shadow: 0 0 0 2px var(--jg-papel, #fff); } .jx-raiz .jxa-resuelta .jx-star-item.jxa-mal::after { content: "✗"; background: #c2272d; } :root[data-theme="dark"] .jx-raiz .jxa-resuelta .jx-star-item::after { box-shadow: 0 0 0 2px #0b0d24; } /* ---------- Memoria: la pareja encontrada queda con brillo de su color ---------- */ .jx-raiz .jx-carta.hecha { box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--jg-2, #0012fd) 80%, transparent); } @media (prefers-reduced-motion: no-preference) { /* Memoria: las cartas se reparten una tras otra (solo al empezar; la clase .jxa-reparto se quita sola) */ .jx-raiz .jx-tablero.jxa-reparto > .jx-carta .jx-carta-in { animation: jxa-reparte .34s cubic-bezier(.2,.8,.3,1) both; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(2) .jx-carta-in { animation-delay: 25ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(3) .jx-carta-in { animation-delay: 50ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(4) .jx-carta-in { animation-delay: 75ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(5) .jx-carta-in { animation-delay: 100ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(6) .jx-carta-in { animation-delay: 125ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(7) .jx-carta-in { animation-delay: 150ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(8) .jx-carta-in { animation-delay: 175ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(9) .jx-carta-in { animation-delay: 200ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(10) .jx-carta-in { animation-delay: 225ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(11) .jx-carta-in { animation-delay: 250ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(12) .jx-carta-in { animation-delay: 275ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(13) .jx-carta-in { animation-delay: 300ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(14) .jx-carta-in { animation-delay: 325ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(15) .jx-carta-in { animation-delay: 350ms; } .jx-raiz .jx-tablero.jxa-reparto > .jx-carta:nth-child(16) .jx-carta-in { animation-delay: 375ms; } /* Volteo 3D (el giro ya existe): la carta se levanta un poco mientras gira */ .jx-raiz .jx-tablero > .jx-carta.volteada .jx-carta-in { animation: jxa-alza .5s cubic-bezier(.3,.7,.3,1); } .jx-raiz .jx-carta .jx-carta-in { transition: transform .5s cubic-bezier(.2,.7,.2,1), translate .2s ease-out; } /* Pareja: las dos laten dos veces y se encienden en el color del juego */ .jx-raiz .jx-carta.hecha { animation: jxa-latido .3s ease-in-out .3s 2, jxa-brilla .5s ease-out .3s backwards; } /* No coinciden: destello rojo en la cara mientras tiemblan (la sacudida ya existe) */ .jx-raiz .jx-carta.fallo .jx-frente { animation: jxa-error .45s ease-out .3s; } /* Phishing: el correo entra, sus líneas aparecen una tras otra y el sello cae con un golpe */ .jx-raiz .jx-msg { animation: jxa-correo .4s cubic-bezier(.2,.8,.3,1) both; } .jx-raiz .jx-msg > p { animation: jxa-linea .3s ease-out both; } .jx-raiz .jx-msg > p:nth-child(1) { animation-delay: 140ms; } .jx-raiz .jx-msg > p:nth-child(2) { animation-delay: 200ms; } .jx-raiz .jx-msg > p:nth-child(3) { animation-delay: 260ms; } .jx-raiz .jxa-sello { animation: jxa-sella .3s cubic-bezier(.3,1.4,.5,1) both; } .jx-raiz .jx-msg.jxa-sellado { animation: jxa-golpe .22s ease-out .22s; } /* Entrevista: las partes entran en cascada; al comprobar, los ✓ / ✗ saltan uno tras otro (después del deslizado) */ .jx-raiz .jx-star.jxa-entra > .jx-star-item { animation: jxa-entra .32s cubic-bezier(.2,.8,.3,1) both; } .jx-raiz .jx-star.jxa-entra > .jx-star-item:nth-child(1) { animation-delay: 120ms; } .jx-raiz .jx-star.jxa-entra > .jx-star-item:nth-child(2) { animation-delay: 180ms; } .jx-raiz .jx-star.jxa-entra > .jx-star-item:nth-child(3) { animation-delay: 240ms; } .jx-raiz .jx-star.jxa-entra > .jx-star-item:nth-child(4) { animation-delay: 300ms; } .jx-raiz .jx-mover:not(:disabled):active { scale: .9; } .jx-raiz .jx-mover { transition: scale .12s ease-out; } .jx-raiz .jxa-resuelta .jx-star-item::after { animation: jxa-pop .28s cubic-bezier(.3,1.5,.5,1) both; } .jx-raiz .jxa-resuelta .jx-star-item:nth-child(1)::after { animation-delay: 220ms; } .jx-raiz .jxa-resuelta .jx-star-item:nth-child(2)::after { animation-delay: 310ms; } .jx-raiz .jxa-resuelta .jx-star-item:nth-child(3)::after { animation-delay: 400ms; } .jx-raiz .jxa-resuelta .jx-star-item:nth-child(4)::after { animation-delay: 490ms; } .jx-raiz .jx-star.ok.jxa-resuelta .jx-star-item { animation: jxa-ola .3s ease-out both; } .jx-raiz .jx-star.ok.jxa-resuelta .jx-star-item:nth-child(2) { animation-delay: 90ms; } .jx-raiz .jx-star.ok.jxa-resuelta .jx-star-item:nth-child(3) { animation-delay: 180ms; } .jx-raiz .jx-star.ok.jxa-resuelta .jx-star-item:nth-child(4) { animation-delay: 270ms; } /* Zona horaria: el reloj aparece, sus agujas giran hasta la hora pedida y da un tic al llegar */ .jx-raiz .jxa-reloj { animation: jxa-pop .3s ease-out .1s both; } .jx-raiz .jxa-reloj .jxa-r-h, .jx-raiz .jxa-reloj .jxa-r-m { transition: transform .5s cubic-bezier(.35,.1,.25,1); } .jx-raiz .jxa-reloj.jxa-girado { animation: jxa-tic .24s ease-out .48s; } } @media (prefers-reduced-motion: no-preference) and (hover: hover) { .jx-raiz .jx-carta:not(.volteada):hover .jx-carta-in { translate: 0 -3px; } /* con ratón, la carta boca abajo se asoma */ } @keyframes jxa-reparte { from { opacity: 0; scale: .82; translate: 0 -14px; } } @keyframes jxa-alza { 50% { scale: 1.06; } } @keyframes jxa-latido { 50% { scale: 1.06; } } @keyframes jxa-brilla { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--jg-1, #6c78ff) 70%, transparent), 0 0 30px 4px color-mix(in srgb, var(--jg-2, #0012fd) 60%, transparent); } } @keyframes jxa-error { from { box-shadow: inset 0 0 0 3px rgba(194,39,45,.8), 0 0 22px -4px rgba(194,39,45,.7); } } @keyframes jxa-correo { from { opacity: 0; translate: 0 -22px; rotate: -1.5deg; scale: .97; } } @keyframes jxa-linea { from { opacity: 0; translate: 8px 0; } } @keyframes jxa-sella { from { opacity: 0; scale: 2.2; } 70% { opacity: 1; } } @keyframes jxa-golpe { 40% { scale: .985; } } @keyframes jxa-entra { from { opacity: 0; translate: 0 12px; } } @keyframes jxa-pop { from { opacity: 0; scale: .4; } } @keyframes jxa-ola { 50% { translate: 0 -4px; } } @keyframes jxa-tic { 50% { scale: 1.1; } } /* juegos-mundo-preguntas.css */ /* [CERT] 20-oct · mundo propio del juego (ver BRIEF_IDENTIDAD.md): Trivia remota (azul de la marca) y Completa la frase (verde agua). Pedido del dueño: «YO LOS VEO IGUALES». Cada uno con su dibujo, su pantalla, su fondo animado y su movimiento. · Trivia = concurso de TV elegante: la carta es una pantalla de vidrio con marco, focos de estudio, luces de ronda (una por pregunta) y una tira de bombillas que se encienden alternadas; las letras A/B/C/D son pulsadores redondos que se hunden. · Completa = cuaderno: la frase va sobre renglones con margen; el hueco es una RANURA hundida que late esperando su ficha; las respuestas son teselas con una ficha de palabra que vuela a la ranura (app.js, jaVolar) y encaja con un anillo de luz. · Fondo: app.js pinta .mp-fondo (10 dibujos del juego, aria-hidden) detrás de la partida; flotan y giran despacio (16–36 s). --mp-t (app.js) es el segundo en que iba el fondo: así no salta al repintar cada carta. Colores solo var(--jg-*) (Trivia no los define: respaldo = azul de la marca). Con «menos movimiento» nada se mueve. */ /* ---------- Fondo propio (detrás de la partida) ---------- */ #main:is([data-juego="trivia"], [data-juego="completa"]) { position: relative; isolation: isolate; } #main .mp-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--jg-2, #0012fd); } #main .mp-p { position: absolute; display: block; width: var(--s, 72px); height: var(--s, 72px); opacity: var(--o, .1); transform: rotate(var(--r, 0deg)); } #main .mp-p svg { display: block; width: 100%; height: 100%; overflow: visible; } #main .mp-p1 { left: 2%; top: 7%; --s: 96px; --o: .12; --r: -14deg; --d: 26s; --x: 22px; --y: 30px; } #main .mp-p2 { left: 88%; top: 5%; --s: 78px; --o: .1; --r: 8deg; --d: 31s; --x: -26px; --y: 24px; } #main .mp-p3 { left: 91%; top: 44%; --s: 70px; --o: .1; --r: -6deg; --d: 22s; --x: -18px; --y: -28px; } #main .mp-p4 { left: 1%; top: 50%; --s: 46px; --o: .14; --r: 0deg; --d: 18s; --x: 16px; --y: -20px; } #main .mp-p5 { left: 46%; top: -3%; --s: 120px; --o: .06; --r: 0deg; --d: 36s; --x: 30px; --y: 10px; } #main .mp-p6 { left: 5%; top: 80%; --s: 74px; --o: .1; --r: 10deg; --d: 28s; --x: 24px; --y: -24px; } #main .mp-p7 { left: 82%; top: 79%; --s: 86px; --o: .09; --r: -10deg; --d: 34s; --x: -28px; --y: -18px; } #main .mp-p8 { left: 60%; top: 88%; --s: 58px; --o: .1; --r: 16deg; --d: 24s; --x: 18px; --y: -26px; } #main .mp-p9 { left: 28%; top: 90%; --s: 54px; --o: .11; --r: -8deg; --d: 20s; --x: -16px; --y: -22px; } #main .mp-p10 { left: 74%; top: 28%; --s: 38px; --o: .14; --r: 0deg; --d: 16s; --x: 14px; --y: 18px; } :root[data-theme="dark"] #main .mp-fondo { color: var(--jg-chispa, #b3baff); } :root[data-theme="dark"] #main .mp-p { opacity: calc(var(--o, .1) * .8); } @media (max-width: 760px) { #main .mp-p { width: calc(var(--s, 72px) * .66); height: calc(var(--s, 72px) * .66); } #main .mp-p:nth-child(n+7) { display: none; } #main .mp-p3 { left: 84%; } #main .mp-p2 { left: 80%; } } /* ---------- TRIVIA · concurso de TV ---------- */ /* la pantalla: marco de vidrio doble y luz azul por dentro */ #main[data-juego="trivia"] .pc-juego .pc-carta { border-radius: 32px; --pc-sombra: inset 0 0 0 7px rgba(255,255,255,.34), inset 0 0 0 8.5px color-mix(in srgb, var(--jg-1, #5563ff) 34%, transparent), inset 0 0 46px -8px color-mix(in srgb, var(--jg-1, #5563ff) 30%, transparent), 0 2px 8px color-mix(in srgb, var(--jg-3, #0400bc) 8%, transparent), 0 50px 70px -38px color-mix(in srgb, var(--jg-3, #0400bc) 72%, transparent); } :root[data-theme="dark"] #main[data-juego="trivia"] .pc-juego .pc-carta { --pc-sombra: inset 0 0 0 7px rgba(255,255,255,.05), inset 0 0 0 8.5px color-mix(in srgb, var(--jg-1, #5563ff) 40%, transparent), inset 0 0 50px -6px color-mix(in srgb, var(--jg-1, #5563ff) 34%, transparent), 0 40px 60px -34px rgba(0,0,0,.7); } /* focos de estudio desde las esquinas de arriba + tira de bombillas abajo (dos capas que se encienden alternadas) */ #main .mp-focos { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; background: radial-gradient(48% 95% at 12% -14%, color-mix(in srgb, var(--jg-1, #5563ff) 30%, transparent), transparent 70%), radial-gradient(48% 95% at 88% -14%, color-mix(in srgb, var(--jg-1, #5563ff) 30%, transparent), transparent 70%); } #main .mp-focos::before, #main .mp-focos::after { content: ""; position: absolute; left: 34px; right: 34px; bottom: 14px; height: 8px; pointer-events: none; background: radial-gradient(circle, var(--jg-chispa, #b3baff) 0 2px, color-mix(in srgb, var(--jg-1, #5563ff) 70%, transparent) 2.6px, transparent 4px) 0 50% / 22px 8px repeat-x; } #main .mp-focos::after { left: 45px; opacity: .25; } /* luces de ronda: una por pregunta (verde = acierto, roja = fallo, la de ahora late) */ #main .mp-ronda { position: absolute; top: 20px; right: 24px; display: flex; gap: 7px; pointer-events: none; } #main .mp-ronda i { width: 13px; height: 13px; border-radius: 50%; background: color-mix(in srgb, var(--jg-1, #5563ff) 22%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,.12), inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #5563ff) 30%, transparent); } #main .mp-ronda i.ya { background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--jg-1, #5563ff) 40%, var(--jg-2, #0012fd)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jg-1, #5563ff) 22%, transparent), 0 0 12px var(--jg-1, #5563ff); } #main .mp-ronda i.si { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #34b98b 40%, #12805c); box-shadow: 0 0 10px rgba(52,185,139,.75); } #main .mp-ronda i.no { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #e2575d 40%, #c2272d); box-shadow: 0 0 10px rgba(226,87,93,.7); } /* el logo del juego, más grande sobre la pantalla */ #main[data-juego="trivia"] .pc-medallon .figura.pl-logo, #main[data-juego="completa"] .pc-medallon .figura.pl-logo { width: 138px; height: 92px; } /* respuestas = pulsadores de concurso: la letra es un botón redondo con relieve, centrado como en un atril */ #main[data-juego="trivia"] .pc-opciones .pc-frente { align-items: center; text-align: center; gap: 10px; } #main[data-juego="trivia"] .pc-opciones .pl-letra { width: 52px; height: 52px; border-radius: 50%; padding-top: 3px; font-size: 25px; color: #fff; background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.85) 0 9%, var(--jg-1, #5563ff) 34%, var(--jg-2, #0012fd) 68%, var(--jg-3, #0400bc)); box-shadow: inset 0 -4px 0 rgba(0,0,40,.22), 0 5px 0 var(--jg-3, #0400bc), 0 12px 16px -8px color-mix(in srgb, var(--jg-3, #0400bc) 80%, transparent); transition: transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .18s, background .2s; } #main[data-juego="trivia"] .pc-opciones .opcion:is(:hover, :focus-visible):not(:disabled) .pl-letra { color: #fff; transform: translateY(2px); background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.9) 0 9%, var(--jg-1, #5563ff) 30%, var(--jg-2, #0012fd) 62%, var(--jg-3, #0400bc)); box-shadow: inset 0 -3px 0 rgba(0,0,40,.22), 0 3px 0 var(--jg-3, #0400bc), 0 0 0 5px color-mix(in srgb, var(--jg-1, #5563ff) 24%, transparent), 0 0 22px color-mix(in srgb, var(--jg-1, #5563ff) 70%, transparent); } #main[data-juego="trivia"] .pc-opciones .opcion:active:not(:disabled) .pl-letra { transform: translateY(5px); box-shadow: inset 0 -2px 0 rgba(0,0,40,.22), 0 0 0 var(--jg-3, #0400bc), 0 0 26px var(--jg-1, #5563ff); } #main[data-juego="trivia"] .pc-opciones .opcion.correcta:not(.elegida) .pl-letra { background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.85) 0 9%, #34b98b 36%, #12805c); box-shadow: inset 0 -4px 0 rgba(0,40,20,.22), 0 5px 0 #0b6b4c, 0 0 18px rgba(52,185,139,.6); } #main[data-juego="trivia"] .pc-opciones .opcion:disabled:not(.correcta) .pl-letra { background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.7) 0 9%, #b9bccb 40%, #8e93a8); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 3px 0 #7d8196; } :root[data-theme="dark"] #main[data-juego="trivia"] .pc-opciones .pl-letra { color: #fff; } /* ---------- COMPLETA · cuaderno con ranura y fichas de palabra ---------- */ /* renglones del cuaderno bajo la frase y la línea del margen */ #main[data-juego="completa"] .pc-juego .pc-carta .enunciado { padding: 0 6px; background: repeating-linear-gradient(to bottom, transparent 0 calc(1.32em - 2px), color-mix(in srgb, var(--jg-1, #14b8a6) 34%, transparent) calc(1.32em - 2px) 1.32em); } #main .mp-renglones { position: absolute; top: 18px; bottom: 18px; left: clamp(18px, 4vw, 44px); width: 6px; z-index: -1; pointer-events: none; border-left: 2px solid color-mix(in srgb, var(--jg-1, #14b8a6) 45%, transparent); border-right: 2px solid color-mix(in srgb, var(--jg-1, #14b8a6) 25%, transparent); } /* el hueco es una ranura hundida (el «___» sigue ahí para los lectores de pantalla) */ #main[data-juego="completa"] .pc-carta .hueco-txt { position: relative; display: inline-block; min-width: 128px; height: 1.2em; margin: 0 .12em; padding: 0 .3em; vertical-align: -.16em; border: 2.5px dashed color-mix(in srgb, var(--jg-2, #0d9488) 70%, transparent); border-radius: 12px; color: transparent; line-height: 1.12; background: color-mix(in srgb, var(--jg-papel, #ccfbf1) 78%, transparent); box-shadow: inset 0 4px 8px -2px color-mix(in srgb, var(--jg-3, #0f766e) 35%, transparent), inset 0 -1px 0 rgba(255,255,255,.8); } :root[data-theme="dark"] #main[data-juego="completa"] .pc-carta .hueco-txt { background: color-mix(in srgb, var(--jg-1, #14b8a6) 14%, transparent); border-color: color-mix(in srgb, var(--jg-chispa, #5eead4) 60%, transparent); box-shadow: inset 0 4px 8px -2px rgba(0,0,0,.5); } /* la ranura llena: la ficha encajada (verde si era, roja si no) */ #main[data-juego="completa"] .pc-carta .hueco-txt.ja-lleno { min-width: 0; border-style: solid; color: var(--jg-3, #0f766e); background: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--jg-1, #14b8a6) 55%, transparent), 0 10px 18px -10px color-mix(in srgb, var(--jg-3, #0f766e) 70%, transparent); } #main[data-juego="completa"] .pc-carta .hueco-txt.ja-bien { color: #0b6b4c; border-color: #12805c; background: #e3f5ec; box-shadow: 0 3px 0 #34b98b, 0 0 0 4px rgba(52,185,139,.18); } #main[data-juego="completa"] .pc-carta .hueco-txt.ja-mal { color: #a1161c; border-color: #c2272d; background: #fbe3e4; box-shadow: 0 3px 0 #e2575d, 0 0 0 4px rgba(226,87,93,.16); } :root[data-theme="dark"] #main[data-juego="completa"] .pc-carta .hueco-txt.ja-bien { color: #8ff0c4; background: rgba(69,211,154,.16); } :root[data-theme="dark"] #main[data-juego="completa"] .pc-carta .hueco-txt.ja-mal { color: #ffb3b6; background: rgba(255,122,126,.16); } /* respuestas = teselas con una ficha de palabra en el centro (la que vuela) */ #main[data-juego="completa"] .pc-opciones .pc-frente { position: relative; align-items: center; justify-content: center; min-height: 128px; padding: 34px 12px 16px; } #main[data-juego="completa"] .pc-opciones .pl-letra { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 9px; font-size: 16px; } #main[data-juego="completa"] .pc-opciones .pc-op-txt { margin: 0; padding: 9px 16px; border-radius: 12px; text-align: center; font-size: 17px; color: var(--jg-3, #0f766e); background: color-mix(in srgb, var(--jg-papel, #ccfbf1) 82%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #14b8a6) 50%, transparent), 0 4px 0 color-mix(in srgb, var(--jg-1, #14b8a6) 45%, transparent); transition: transform .22s cubic-bezier(.3,1.4,.5,1), box-shadow .22s; } #main[data-juego="completa"] .pc-opciones .opcion:is(:hover, :focus-visible):not(:disabled) .pc-op-txt { transform: translateY(-4px) rotate(-1.5deg); box-shadow: inset 0 0 0 1.5px var(--jg-1, #14b8a6), 0 8px 0 color-mix(in srgb, var(--jg-1, #14b8a6) 40%, transparent), 0 16px 20px -10px color-mix(in srgb, var(--jg-3, #0f766e) 60%, transparent); } #main[data-juego="completa"] .pc-opciones .opcion.elegida .pc-op-txt { visibility: hidden; } /* la ficha se fue volando a la ranura */ :root[data-theme="dark"] #main[data-juego="completa"] .pc-opciones .pc-op-txt { color: #fff; background: color-mix(in srgb, var(--jg-2, #0d9488) 40%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-chispa, #5eead4) 45%, transparent), 0 4px 0 color-mix(in srgb, var(--jg-3, #0f766e) 80%, transparent); } /* la ficha voladora con forma de tesela */ .ja-vuela { font-size: 17px; border-radius: 12px; } @media (max-width: 760px) { #main[data-juego="completa"] .pc-opciones .pc-frente { min-height: 0; padding: 30px 8px 12px; } #main[data-juego="completa"] .pc-opciones .pl-letra { top: 7px; left: 7px; width: 22px; height: 22px; border-radius: 7px; font-size: 13px; } #main[data-juego="completa"] .pc-opciones .pc-op-txt { padding: 7px 10px; font-size: 15px; } #main[data-juego="completa"] .pc-carta .hueco-txt { min-width: 96px; } #main .mp-ronda { top: 14px; right: 16px; gap: 5px; } #main .mp-ronda i { width: 10px; height: 10px; } #main[data-juego="trivia"] .pc-opciones .pl-letra { width: 42px; height: 42px; font-size: 21px; } #main[data-juego="trivia"] .pc-medallon .figura.pl-logo, #main[data-juego="completa"] .pc-medallon .figura.pl-logo { width: 96px; height: 62px; } #main:is([data-juego="trivia"], [data-juego="completa"]) .pc-juego .pc-carta { padding-top: 46px; } } /* ---------- Movimiento propio (solo sin «menos movimiento») ---------- */ @media (prefers-reduced-motion: no-preference) { /* el fondo flota y gira despacio; --mp-t lo continúa donde iba */ #main .mp-p { animation: mpFlota var(--d, 24s) ease-in-out var(--mp-t, 0s) infinite; } #main .mp-p:nth-child(even) { animation-direction: reverse; } @keyframes mpFlota { 0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); } 33% { transform: translate(var(--x, 18px), calc(var(--y, -24px) * -.4)) rotate(calc(var(--r, 0deg) + 12deg)); } 66% { transform: translate(calc(var(--x, 18px) * -.5), var(--y, -24px)) rotate(calc(var(--r, 0deg) - 8deg)); } } /* TRIVIA: bombillas alternadas, focos que respiran, la luz de la ronda late; al responder la pantalla destella */ #main .mp-focos { animation: mpFocos 5s ease-in-out infinite; } @keyframes mpFocos { 50% { opacity: .55; } } #main .mp-focos::before { animation: mpBombilla 1.1s steps(1) infinite; } #main .mp-focos::after { animation: mpBombilla 1.1s .55s steps(1) infinite; } @keyframes mpBombilla { 0% { opacity: 1; } 50% { opacity: .2; } } #main .mp-ronda i.ya { animation: mpLate 1.2s ease-in-out infinite; } @keyframes mpLate { 50% { transform: scale(1.35); } } #main .mp-ronda i.mp-nueva { animation: mpLuz .5s .3s cubic-bezier(.3,1.7,.5,1) backwards; } @keyframes mpLuz { from { transform: scale(2.2); box-shadow: 0 0 0 10px transparent; } } #main .pc-carta.mp-bien .mp-focos { animation: mpPantallaBien .8s .3s ease-out; } #main .pc-carta.mp-mal .mp-focos { animation: mpPantallaMal .8s .3s ease-out; } @keyframes mpPantallaBien { 25% { box-shadow: inset 0 0 0 4px rgba(52,185,139,.7), inset 0 0 60px rgba(52,185,139,.45); } } @keyframes mpPantallaMal { 25% { box-shadow: inset 0 0 0 4px rgba(226,87,93,.6), inset 0 0 60px rgba(226,87,93,.35); } } #main[data-juego="trivia"] .pc-opciones .opcion.elegida .pl-letra { animation: mpPulsa .3s cubic-bezier(.3,1.4,.5,1); } @keyframes mpPulsa { 40% { transform: translateY(6px) scale(.9); } } /* COMPLETA: la ranura late esperando su ficha; al encajar, sacudón corto de la carta */ #main[data-juego="completa"] .pc-carta .hueco-txt:not(.ja-lleno) { animation: mpRanura 1.6s ease-in-out infinite; } @keyframes mpRanura { 50% { border-color: var(--jg-1, #14b8a6); background-color: color-mix(in srgb, var(--jg-1, #14b8a6) 26%, transparent); } } #main[data-juego="completa"] .pc-carta.mp-bien, #main[data-juego="completa"] .pc-carta.mp-mal { animation: mpEncaja .32s .6s cubic-bezier(.3,1.5,.5,1); } @keyframes mpEncaja { 40% { transform: perspective(1400px) translateY(6px) rotateX(3deg) scale(.985); } } /* el logo del inicio flota un poco */ #main:is([data-juego="trivia"], [data-juego="completa"]) .p2-pantalla-logo .figura { animation: mpLogo 4.5s ease-in-out infinite; } @keyframes mpLogo { 50% { transform: translateY(-6px) rotate(-2deg); } } } /* ===================================================================================================================== [CERT] 20-oct (ronda 2) · ESCENA propia del inicio y del final (pedido del dueño: «solo tienen el fondo y el logo flotando»). app.js (juegoPreguntas, mpEscena) pinta .mp-esc (aria-hidden): en el inicio dentro de la pantalla del logo; en el final detrás del oso. · Trivia (plató de TV): marco de bombillas que se persiguen, dos focos que barren, tarima y pulsadores A/B/C/D que se encienden en fila. Final: arco de bombillas que se encienden una a una y luego corren, con los focos sobre el oso (pleno = corren más rápido y brillan más). · Completa (cuaderno): espiral, renglones y margen; una ficha de palabra vuela en arco y encaja en la ranura de la frase (bucle de 3,4 s). Final: hoja del cuaderno que entra girando detrás del oso y un círculo de lápiz que se dibuja (con ✓ si acertó la mitad o más). Nada retrasa «Jugar» ni la cifra del final. Con «menos movimiento» todo queda quieto en su estado final (ficha encajada, círculo dibujado). ===================================================================================================================== */ #main:is([data-juego="trivia"], [data-juego="completa"]) .p2-intro .p2-pantalla-logo { position: relative; isolation: isolate; } #main:is([data-juego="trivia"], [data-juego="completa"]) .p2-intro .p2-pantalla-logo .figura { position: relative; z-index: 1; } #main .mp-esc { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } #main .mp-esc i, #main .mp-esc span { position: absolute; display: block; } #main .mp-esc svg { position: absolute; display: block; overflow: visible; } /* el logo deja sitio abajo para la tarima/frase */ #main:is([data-juego="trivia"], [data-juego="completa"]) .p2-intro .p2-pantalla .figura.pl-logo { height: 176px; margin-bottom: 40px; } /* ---------- TRIVIA · inicio: plató ---------- */ #main .mp-esc-tv .mpe-haz { top: -12%; width: 50%; height: 118%; transform-origin: 50% 0; filter: blur(7px); opacity: .8; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--jg-1, #5563ff) 34%, transparent) 0%, color-mix(in srgb, var(--jg-1, #5563ff) 12%, transparent) 50%, transparent 92%); } #main .mp-esc-tv .mpe-haz-i { left: -6%; transform: rotate(-26deg); } #main .mp-esc-tv .mpe-haz-d { right: -6%; transform: rotate(26deg); } #main .mp-esc-tv .mpe-tarima { left: 14%; right: 14%; bottom: 22px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--jg-1, #5563ff) 42%, transparent), color-mix(in srgb, var(--jg-1, #5563ff) 12%, transparent) 70%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #5563ff) 22%, transparent); } #main .mp-esc-tv .mpe-bombillas { inset: 7px; border-radius: 20px; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--jg-1, #5563ff) 80%, transparent)); --mpe-b: radial-gradient(circle, #fff 0 2px, var(--jg-1, #5563ff) 2.8px, transparent 4px); background: var(--mpe-b) 0 0 / 20px 8px repeat-x, var(--mpe-b) 0 100% / 20px 8px repeat-x, var(--mpe-b) 0 0 / 8px 20px repeat-y, var(--mpe-b) 100% 0 / 8px 20px repeat-y; } #main .mp-esc-tv .mpe-b2 { background-position: 10px 0, 10px 100%, 0 10px, 100% 10px; opacity: .3; } #main .mp-esc-tv .mpe-pulsadores { left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 12px; } #main .mp-esc-tv .mpe-pulsadores i { position: static; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; padding-top: 3px; font: 400 19px/1 var(--font-display, "Bebas Neue", Impact, sans-serif); font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0,0,40,.35); background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.85) 0 9%, var(--jg-1, #5563ff) 34%, var(--jg-2, #0012fd) 68%, var(--jg-3, #0400bc)); box-shadow: inset 0 -3px 0 rgba(0,0,40,.22), 0 3px 0 var(--jg-3, #0400bc); } :root[data-theme="dark"] #main .mp-esc-tv .mpe-haz { background: linear-gradient(180deg, color-mix(in srgb, var(--jg-chispa, #b3baff) 40%, transparent) 0%, color-mix(in srgb, var(--jg-1, #5563ff) 16%, transparent) 55%, transparent 96%); } /* ---------- COMPLETA · inicio: cuaderno ---------- */ #main .mp-esc-cuaderno.mp-esc-inicio::before { content: ""; position: absolute; inset: 34px 14px 12px; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 23px, color-mix(in srgb, var(--jg-1, #14b8a6) 30%, transparent) 23px 24.5px); } #main .mp-esc-cuaderno.mp-esc-inicio::after { content: ""; position: absolute; top: 30px; bottom: 10px; left: 30px; width: 2px; pointer-events: none; background: color-mix(in srgb, var(--jg-2, #0d9488) 38%, transparent); } #main .mp-esc-cuaderno .mpe-espiral { top: 8px; left: 16px; right: 16px; height: 18px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--jg-3, #0f766e) 55%, transparent) 0 2.6px, transparent 3.1px 4.1px, color-mix(in srgb, var(--jg-2, #0d9488) 70%, transparent) 4.5px 6px, transparent 6.5px) 0 0 / 24px 18px repeat-x; } #main .mp-esc-cuaderno .mpe-frase { left: 50%; bottom: 16px; width: 160px; height: 22px; margin-left: -80px; display: flex; align-items: center; gap: 7px; } #main .mp-esc-cuaderno .mpe-frase > i { position: static; flex: none; width: 52px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--jg-1, #14b8a6) 42%, transparent); } #main .mp-esc-cuaderno .mpe-frase > i:nth-child(3) { width: 42px; } #main .mp-esc-cuaderno .mpe-frase > .mpe-ranura { width: 52px; height: 22px; border-radius: 8px; border: 2px dashed color-mix(in srgb, var(--jg-2, #0d9488) 75%, transparent); background: color-mix(in srgb, var(--jg-papel, #ccfbf1) 75%, transparent); box-shadow: inset 0 3px 6px -2px color-mix(in srgb, var(--jg-3, #0f766e) 35%, transparent); } #main .mp-esc-cuaderno .mpe-frase > .mpe-ficha { position: absolute; z-index: 2; left: 61px; top: 3px; width: 48px; height: 16px; border-radius: 6px; background: linear-gradient(180deg, var(--jg-1, #14b8a6), var(--jg-2, #0d9488)); box-shadow: 0 3px 0 var(--jg-3, #0f766e), 0 8px 14px -6px color-mix(in srgb, var(--jg-3, #0f766e) 80%, transparent); } #main .mp-esc-cuaderno .mpe-ficha::before { content: ""; position: absolute; left: 9px; right: 14px; top: 6px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.75); } :root[data-theme="dark"] #main .mp-esc-cuaderno .mpe-frase > .mpe-ranura { background: color-mix(in srgb, var(--jg-1, #14b8a6) 14%, transparent); border-color: color-mix(in srgb, var(--jg-chispa, #5eead4) 60%, transparent); } /* ---------- Finales: la escena va detrás del oso, arriba de la hoja ---------- */ #main:is([data-juego="trivia"], [data-juego="completa"]) .partida.p2-final { position: relative; isolation: isolate; } #main:is([data-juego="trivia"], [data-juego="completa"]) .p2-final .pl-oso-fin { position: relative; z-index: 1; } #main .mp-esc.mp-esc-fin { inset: 0 auto auto 50%; width: min(100%, 380px); height: 226px; margin-left: max(-50%, -190px); border-radius: 0; z-index: 0; -webkit-mask-image: linear-gradient(#000 74%, transparent); mask-image: linear-gradient(#000 74%, transparent); } /* TRIVIA final: arco de bombillas + focos sobre el oso */ #main .mp-esc-tv.mp-esc-fin .mpe-arco { left: 50%; top: 4px; width: 320px; height: 186px; margin-left: -160px; } #main .mp-esc-tv.mp-esc-fin .mpe-arco circle { fill: var(--jg-2, #0012fd); stroke: #fff; stroke-width: 2.4; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--jg-1, #5563ff) 90%, transparent)); } :root[data-theme="dark"] #main .mp-esc-tv.mp-esc-fin .mpe-arco circle { fill: var(--jg-chispa, #b3baff); stroke: color-mix(in srgb, var(--jg-1, #5563ff) 60%, #fff); } #main .mp-esc-tv.mp-esc-fin .mpe-haz { top: -6%; width: 46%; height: 104%; opacity: .7; } #main .mp-esc-tv.mp-esc-fin .mpe-haz-i { left: -4%; transform: rotate(-30deg); } #main .mp-esc-tv.mp-esc-fin .mpe-haz-d { right: -4%; transform: rotate(30deg); } #main .mp-esc-tv.mp-esc-fin .mpe-tarima { left: 50%; right: auto; bottom: auto; top: 146px; width: 210px; height: 40px; margin-left: -105px; } /* COMPLETA final: hoja del cuaderno + círculo de lápiz */ #main .mp-esc-cuaderno.mp-esc-fin .mpe-pagina { left: 50%; top: 8px; width: 270px; height: 176px; margin-left: -135px; border-radius: 14px; transform: rotate(-3deg); background: repeating-linear-gradient(to bottom, transparent 0 21px, color-mix(in srgb, var(--jg-1, #14b8a6) 28%, transparent) 21px 22.5px) 0 30px / 100% calc(100% - 30px) no-repeat, linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.5)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 0 0 2.5px color-mix(in srgb, var(--jg-1, #14b8a6) 26%, transparent), 0 18px 30px -18px color-mix(in srgb, var(--jg-3, #0f766e) 60%, transparent); } #main .mp-esc-cuaderno.mp-esc-fin .mpe-pagina::after { content: ""; position: absolute; top: 26px; bottom: 8px; left: 28px; width: 2px; background: color-mix(in srgb, var(--jg-2, #0d9488) 40%, transparent); } #main .mp-esc-cuaderno.mp-esc-fin .mpe-espiral { top: 6px; left: 12px; right: 12px; } :root[data-theme="dark"] #main .mp-esc-cuaderno.mp-esc-fin .mpe-pagina { background: repeating-linear-gradient(to bottom, transparent 0 21px, color-mix(in srgb, var(--jg-chispa, #5eead4) 18%, transparent) 21px 22.5px) 0 30px / 100% calc(100% - 30px) no-repeat, rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-chispa, #5eead4) 22%, transparent), 0 18px 30px -18px rgba(0,0,0,.6); } #main .mp-esc-cuaderno.mp-esc-fin .mpe-trazo { left: 50%; top: 0; width: 300px; height: 190px; margin-left: -150px; fill: none; stroke: var(--jg-2, #0d9488); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; } #main .mp-esc-cuaderno.mp-esc-fin .mpe-trazo path { stroke-dasharray: 1; stroke-dashoffset: 0; } #main .mp-esc-cuaderno.mp-esc-fin .mpe-visto { stroke: #12805c; stroke-width: 6; } :root[data-theme="dark"] #main .mp-esc-cuaderno.mp-esc-fin .mpe-trazo { stroke: var(--jg-chispa, #5eead4); } :root[data-theme="dark"] #main .mp-esc-cuaderno.mp-esc-fin .mpe-visto { stroke: #8ff0c4; } /* ---------- Escenas en pantallas chicas ---------- */ @media (max-width: 760px) { #main:is([data-juego="trivia"], [data-juego="completa"]) .p2-intro .p2-pantalla .figura.pl-logo { height: 134px; margin-bottom: 38px; } } @media (max-width: 600px) { /* la pantalla del inicio es un cuadro chico al lado del título: menos piezas y más pequeñas */ #main:is([data-juego="trivia"], [data-juego="completa"]) .p2-intro .p2-pantalla .figura.pl-logo { height: 70px; margin-bottom: 22px; } #main .mp-esc-tv .mpe-bombillas { inset: 3px; border-radius: 14px; --mpe-b: radial-gradient(circle, #fff 0 1px, var(--jg-1, #5563ff) 1.6px, transparent 2.6px); background-size: 12px 6px, 12px 6px, 6px 12px, 6px 12px; } #main .mp-esc-tv .mpe-b2 { background-position: 6px 0, 6px 100%, 0 6px, 100% 6px; } #main .mp-esc-tv .mpe-pulsadores { bottom: 8px; gap: 5px; } #main .mp-esc-tv .mpe-pulsadores i { width: 15px; height: 15px; padding-top: 1px; font-size: 9px; box-shadow: inset 0 -2px 0 rgba(0,0,40,.22), 0 2px 0 var(--jg-3, #0400bc); } #main .mp-esc-tv .mpe-tarima { bottom: 9px; height: 18px; left: 8%; right: 8%; } #main .mp-esc-cuaderno.mp-esc-inicio::before { inset: 22px 6px 6px; background-size: auto; background-image: repeating-linear-gradient(to bottom, transparent 0 13px, color-mix(in srgb, var(--jg-1, #14b8a6) 30%, transparent) 13px 14px); } #main .mp-esc-cuaderno.mp-esc-inicio::after { top: 20px; left: 14px; } #main .mp-esc-cuaderno .mpe-espiral { top: 3px; left: 8px; right: 8px; height: 12px; background-size: 15px 12px; background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--jg-3, #0f766e) 55%, transparent) 0 1.8px, transparent 2.2px 2.8px, color-mix(in srgb, var(--jg-2, #0d9488) 70%, transparent) 3.1px 4.2px, transparent 4.6px); } #main .mp-esc-cuaderno.mp-esc-inicio .mpe-frase { bottom: 8px; transform: scale(.56); transform-origin: 50% 100%; } } /* ---------- Movimiento de las escenas (solo sin «menos movimiento») ---------- */ @media (prefers-reduced-motion: no-preference) { /* el logo del inicio entra con rebote y luego flota (no retrasa «Jugar») */ #main:is([data-juego="trivia"], [data-juego="completa"]) .p2-intro .p2-pantalla-logo .figura { animation: mpeLogoEntra .7s cubic-bezier(.3,1.5,.5,1) backwards, mpLogo 4.5s ease-in-out .7s infinite; } @keyframes mpeLogoEntra { from { opacity: 0; transform: translateY(46px) scale(.55) rotate(-8deg); } } /* TRIVIA: los focos barren el escenario cruzándose; bombillas que se persiguen; pulsadores que se encienden en fila */ #main .mp-esc-tv .mpe-haz-i { animation: mpeBarreI 3.6s ease-in-out infinite alternate; } #main .mp-esc-tv .mpe-haz-d { animation: mpeBarreD 3.6s ease-in-out -1.8s infinite alternate; } @keyframes mpeBarreI { from { transform: rotate(-34deg); } to { transform: rotate(10deg); } } @keyframes mpeBarreD { from { transform: rotate(34deg); } to { transform: rotate(-10deg); } } #main .mp-esc-tv .mpe-bombillas { animation: mpeChispa .9s steps(1) infinite; } #main .mp-esc-tv .mpe-b2 { animation: mpeChispa .9s steps(1) .45s infinite; } @keyframes mpeChispa { 0% { opacity: 1; } 50% { opacity: .3; } } #main .mp-esc-tv .mpe-tarima { animation: mpeTarima 2.4s ease-in-out infinite; } @keyframes mpeTarima { 50% { transform: scaleX(1.14); opacity: .6; } } #main .mp-esc-tv .mpe-pulsadores i { animation: mpePulsador 2.4s ease-in-out infinite, mpeSale .5s cubic-bezier(.3,1.6,.5,1) backwards; } #main .mp-esc-tv .mpe-pulsadores i:nth-child(2) { animation-delay: .6s, .1s; } #main .mp-esc-tv .mpe-pulsadores i:nth-child(3) { animation-delay: 1.2s, .2s; } #main .mp-esc-tv .mpe-pulsadores i:nth-child(4) { animation-delay: 1.8s, .3s; } @keyframes mpePulsador { 0%, 30%, 100% { opacity: .62; transform: none; } 8%, 22% { opacity: 1; transform: translateY(2px) scale(1.18); box-shadow: inset 0 -2px 0 rgba(0,0,40,.22), 0 1px 0 var(--jg-3, #0400bc), 0 0 0 4px color-mix(in srgb, var(--jg-1, #5563ff) 25%, transparent), 0 0 18px var(--jg-1, #5563ff); } } @keyframes mpeSale { from { opacity: 0; transform: translateY(26px) scale(.4); } } /* COMPLETA: la ficha vuela en arco desde la derecha y encaja en la ranura (la ranura destella), espera y vuelve a empezar */ #main .mp-esc-cuaderno .mpe-frase > .mpe-ficha { animation: mpeFicha 3.4s cubic-bezier(.4,0,.3,1) .3s infinite backwards; } @keyframes mpeFicha { 0% { opacity: 0; transform: translate(118px, -64px) rotate(18deg) scale(.7); } 10% { opacity: 1; transform: translate(104px, -96px) rotate(12deg) scale(1.1); } 26% { transform: translate(52px, -118px) rotate(-8deg) scale(1.22); } 42% { transform: translate(0, 0) rotate(0) scale(1); } 46% { transform: translate(0, 3px) scale(1.12, .8); } 51%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-10px) scale(.9); } } #main .mp-esc-cuaderno .mpe-ranura { animation: mpeRanura 3.4s ease-out .3s infinite; } @keyframes mpeRanura { 0%, 40%, 70%, 100% { box-shadow: inset 0 3px 6px -2px color-mix(in srgb, var(--jg-3, #0f766e) 35%, transparent); } 46% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--jg-1, #14b8a6) 35%, transparent), 0 0 22px var(--jg-1, #14b8a6); border-color: var(--jg-1, #14b8a6); } } #main .mp-esc-cuaderno.mp-esc-inicio .mpe-espiral { animation: mpeSale .5s .1s cubic-bezier(.3,1.5,.5,1) backwards; } /* FINALES */ #main .mp-esc.mp-esc-fin { animation: mpeAparece .4s ease-out backwards; } @keyframes mpeAparece { from { opacity: 0; } } /* Trivia: las bombillas del arco se encienden una a una (de izquierda a derecha) y luego la luz corre por el arco */ #main .mp-esc-tv.mp-esc-fin .mpe-arco circle { animation: mpeBombillaEntra .32s cubic-bezier(.3,1.7,.5,1) calc(.08s + var(--k) * 45ms) backwards, mpeCorre 1.5s linear calc(var(--k) * -100ms + 1s) infinite; } #main .mp-esc-tv.mp-esc-pleno .mpe-arco circle { animation-duration: .32s, .75s; animation-delay: calc(.08s + var(--k) * 45ms), calc(var(--k) * -50ms + 1s); } @keyframes mpeBombillaEntra { from { transform: scale(0); } } @keyframes mpeCorre { 0%, 100% { opacity: .35; } 12% { opacity: 1; } 40% { opacity: .35; } } #main .mp-esc-tv.mp-esc-fin .mpe-haz-i { animation: mpeFocoFinI 2.8s ease-in-out infinite alternate, mpeAparece .5s .2s backwards; } #main .mp-esc-tv.mp-esc-fin .mpe-haz-d { animation: mpeFocoFinD 2.8s ease-in-out -1.4s infinite alternate, mpeAparece .5s .2s backwards; } @keyframes mpeFocoFinI { from { transform: rotate(-40deg); } to { transform: rotate(-18deg); } } @keyframes mpeFocoFinD { from { transform: rotate(40deg); } to { transform: rotate(18deg); } } /* Completa: la hoja entra girando, el lápiz dibuja el círculo y luego el ✓ */ #main .mp-esc-cuaderno.mp-esc-fin .mpe-pagina { animation: mpePagina .6s cubic-bezier(.25,1.4,.5,1) backwards; } @keyframes mpePagina { from { opacity: 0; transform: translateY(70px) rotate(-16deg) scale(.8); } } #main .mp-esc-cuaderno.mp-esc-fin .mpe-circulo { animation: mpeTrazo .8s cubic-bezier(.5,0,.3,1) .45s backwards; } #main .mp-esc-cuaderno.mp-esc-fin .mpe-visto { animation: mpeTrazo .35s ease-out 1.2s backwards; } @keyframes mpeTrazo { from { stroke-dashoffset: 1; } } } /* juegos-mundo-ahorcado-reto.css */ /* [CERT] 20-oct · mundo propio del juego (ver BRIEF_IDENTIDAD.md) AHORCADO DE TÉRMINOS (morado): pizarra de vidrio morado, palabra en fichas, teclado mecánico con relieve, vidas como una pila que se apaga, su dibujo (teclas y una ficha de letra) y un fondo de letras y teclas que flotan despacio. DESAFÍO DEL DÍA (rojo coral): ficha de misión tipo libreta (anillas, renglones y margen), diana con bandera, barra de caracteres con bandera de meta, sello «¡Hecho!» grande que cae con golpe y anillos de luz; fondo de banderas, dianas, estrellas y ✓. Piezas de app.js: juegoAhorcado() (.ahm-*) y juegoReto() (.rtm-*). Todo decorativo va con aria-hidden y sin clics. Con «menos movimiento» todo queda quieto (el fondo también): el movimiento va dentro de @media (prefers-reduced-motion: no-preference). */ /* ================= Común a los dos: el fondo propio (detrás del juego) ================= */ #main[data-juego="ahorcado"], #main[data-juego="reto"] { position: relative; } #main[data-juego="ahorcado"] .ahm-fondo ~ *, #main[data-juego="reto"] .rtm-fondo ~ * { position: relative; z-index: 1; } .ahm-fondo, .rtm-fondo { position: absolute; left: 0; right: 0; top: 0; height: 100%; min-height: calc(100svh - 140px); z-index: 0; overflow: hidden; pointer-events: none; } .ahm-pz, .rtm-pz { position: absolute; display: grid; place-items: center; width: var(--t, 50px); height: var(--t, 50px); margin: calc(var(--t, 50px) / -2) 0 0 calc(var(--t, 50px) / -2); color: var(--jg-2, #7c3aed); opacity: .11; transform: rotate(var(--r, 0deg)); pointer-events: none; } .ahm-pz b { font: 400 calc(var(--t, 50px) * .92)/1 var(--font-display); } .ahm-pz-tecla { border: 3px solid currentColor; border-radius: 24%; box-shadow: 0 5px 0 currentColor; } .ahm-pz-tecla b { font-size: calc(var(--t, 50px) * .56); } .rtm-pz { color: var(--jg-2, #e11d48); } .rtm-pz svg { width: 100%; height: 100%; fill: currentColor; } :root[data-theme="dark"] :is(.ahm-pz, .rtm-pz) { color: var(--jg-chispa, #c4b5fd); opacity: .13; } @media (max-width: 600px) { :is(.ahm-pz, .rtm-pz) { width: calc(var(--t, 50px) * .7); height: calc(var(--t, 50px) * .7); margin: calc(var(--t, 50px) * -.35) 0 0 calc(var(--t, 50px) * -.35); opacity: .09; } .ahm-pz b { font-size: calc(var(--t, 50px) * .64); } .ahm-pz-tecla b { font-size: calc(var(--t, 50px) * .4); } :is(.ahm-pz, .rtm-pz):nth-child(n+7) { display: none; } } /* ================= AHORCADO ================= */ /* pizarra de vidrio morado */ #main[data-juego="ahorcado"] .ah-carta { position: relative; background: linear-gradient(155deg, color-mix(in srgb, var(--jg-1, #a78bfa) 26%, rgba(255,255,255,.66)), color-mix(in srgb, var(--jg-2, #7c3aed) 14%, rgba(255,255,255,.46)) 58%, color-mix(in srgb, var(--jg-1, #a78bfa) 24%, rgba(255,255,255,.55))); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 7px color-mix(in srgb, var(--jg-1, #a78bfa) 13%, transparent), 0 0 0 1px color-mix(in srgb, var(--jg-2, #7c3aed) 16%, transparent), 0 36px 64px -34px color-mix(in srgb, var(--jg-3, #6d28d9) 72%, transparent); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-carta { background: linear-gradient(155deg, color-mix(in srgb, var(--jg-2, #7c3aed) 30%, rgba(24,18,44,.6)), color-mix(in srgb, var(--jg-3, #6d28d9) 24%, rgba(14,10,28,.55))); border-color: color-mix(in srgb, var(--jg-chispa, #c4b5fd) 28%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 7px color-mix(in srgb, var(--jg-1, #a78bfa) 9%, transparent), 0 32px 60px -30px rgba(0,0,0,.75), 0 0 46px -14px color-mix(in srgb, var(--jg-2, #7c3aed) 55%, transparent); } /* su dibujo: en la pizarra (arriba a la derecha) y en la portada */ .ahm-dibujo { display: block; pointer-events: none; } .ahm-dibujo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--jg-3, #6d28d9) 35%, transparent)); } #main[data-juego="ahorcado"] .ahm-dib-carta { position: absolute; top: 12px; right: 18px; z-index: 1; width: clamp(84px, 11vw, 150px); } #main[data-juego="ahorcado"] .p2-pantalla-logo { position: relative; } #main[data-juego="ahorcado"] .p2-pantalla-logo:has(.ahm-dib-intro) { align-content: center; gap: 4px; } #main[data-juego="ahorcado"] .ahm-dib-intro { position: relative; z-index: 1; width: min(62%, 190px); } @media (max-width: 760px) { #main[data-juego="ahorcado"] .ahm-dib-carta { top: 8px; right: 10px; } #main[data-juego="ahorcado"] .ahm-dib-intro { width: 120px; } } .ahm-dibujo :is(.ahm-tk, .ahm-ficha, .ahm-chispas path) { transform-box: fill-box; transform-origin: 50% 100%; } /* el brillo que barre la pizarra al completar la palabra (recortado a la pizarra) */ .ahm-barrido { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .ahm-barrido::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; opacity: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55) 45%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.55) 55%, transparent); transform: skewX(-14deg); } :root[data-theme="dark"] .ahm-barrido::before { background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--jg-chispa, #c4b5fd) 30%, transparent) 50%, transparent); } /* la palabra en fichas: huecos hundidos en la pizarra y fichas en relieve al aparecer */ #main[data-juego="ahorcado"] .ah-casilla { position: relative; border-radius: 11px; background: color-mix(in srgb, var(--jg-2, #7c3aed) 10%, rgba(255,255,255,.42)); box-shadow: inset 0 3px 7px color-mix(in srgb, var(--jg-3, #6d28d9) 24%, transparent), inset 0 -2px 0 rgba(255,255,255,.85); } #main[data-juego="ahorcado"] .ah-casilla.ver { color: var(--jg-3, #6d28d9); background: linear-gradient(180deg, #fff, var(--jg-papel, #ede9fe)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 -4px 0 color-mix(in srgb, var(--jg-1, #a78bfa) 55%, #fff), 0 4px 0 color-mix(in srgb, var(--jg-2, #7c3aed) 42%, #fff), 0 12px 18px -10px color-mix(in srgb, var(--jg-3, #6d28d9) 70%, transparent); } #main[data-juego="ahorcado"] .ah-casilla.perdida { color: #b4232a; background: linear-gradient(180deg, #fff, #fde5e6); box-shadow: inset 0 -4px 0 #ff9ea1, 0 4px 0 #f3b4b6, 0 12px 18px -10px rgba(161,22,28,.5); } #main[data-juego="ahorcado"] .ah-palabra.ja-ola .ah-casilla { box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 -4px 0 #34b98b, 0 4px 0 #8fd9bd, 0 12px 20px -10px rgba(18,128,92,.6); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-casilla { background: rgba(0,0,0,.24); box-shadow: inset 0 3px 7px rgba(0,0,0,.4), inset 0 -2px 0 rgba(255,255,255,.08); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-casilla.ver { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--jg-2, #7c3aed) 70%, #2a1f4a), color-mix(in srgb, var(--jg-3, #6d28d9) 70%, #140e26)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 0 color-mix(in srgb, var(--jg-3, #6d28d9) 60%, #000), 0 12px 18px -10px rgba(0,0,0,.7); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-casilla.perdida { color: #ffb3b6; background: rgba(229,72,77,.18); box-shadow: inset 0 -3px 0 #ff7a7e, 0 4px 0 rgba(161,22,28,.6); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-palabra.ja-ola .ah-casilla { box-shadow: inset 0 -4px 0 #45d39a, 0 4px 0 #0b5e43, 0 0 18px -4px rgba(69,211,154,.55); } /* las vidas: una pila con 6 luces que se apagan */ #main[data-juego="ahorcado"] .ah-vidas { position: relative; gap: 4px; margin-right: 8px; padding: 4px; border-radius: 9px; border: 2px solid color-mix(in srgb, var(--jg-2, #7c3aed) 50%, #fff); background: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px color-mix(in srgb, var(--jg-3, #6d28d9) 60%, transparent); } #main[data-juego="ahorcado"] .ah-vidas::after { content: ""; position: absolute; top: 50%; right: -8px; width: 5px; height: 12px; margin-top: -6px; border-radius: 0 3px 3px 0; background: color-mix(in srgb, var(--jg-2, #7c3aed) 50%, #fff); } #main[data-juego="ahorcado"] .ah-vida { width: 18px; height: 16px; border-radius: 4px; opacity: 1; transform: none; filter: none; background: linear-gradient(180deg, var(--jg-chispa, #c4b5fd), var(--jg-1, #a78bfa) 45%, var(--jg-2, #7c3aed)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 10px color-mix(in srgb, var(--jg-1, #a78bfa) 80%, transparent); } #main[data-juego="ahorcado"] .ah-vida.gastada { background: color-mix(in srgb, var(--jg-3, #6d28d9) 10%, rgba(255,255,255,.55)); box-shadow: inset 0 1px 2px rgba(0,0,0,.14); } #main[data-juego="ahorcado"] .ahm-baja .ah-vida:not(.gastada) { background: linear-gradient(180deg, #ffc2c4, #ff7a7e 45%, #e5484d); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 10px rgba(229,72,77,.7); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-vidas { border-color: color-mix(in srgb, var(--jg-chispa, #c4b5fd) 45%, transparent); background: rgba(0,0,0,.25); box-shadow: none; } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-vidas::after { background: color-mix(in srgb, var(--jg-chispa, #c4b5fd) 45%, transparent); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-vida.gastada { background: rgba(255,255,255,.07); box-shadow: none; } /* teclado mecánico: bandeja de vidrio y teclas con recorrido */ #main[data-juego="ahorcado"] .ah-teclado { max-width: 660px; padding: 14px 14px 18px; border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--jg-1, #a78bfa) 16%, rgba(255,255,255,.5)), color-mix(in srgb, var(--jg-2, #7c3aed) 12%, rgba(255,255,255,.34))); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff, 0 24px 40px -28px color-mix(in srgb, var(--jg-3, #6d28d9) 70%, transparent); } #main[data-juego="ahorcado"] .ah-tecla { position: relative; min-height: 48px; border: 1px solid color-mix(in srgb, var(--jg-1, #a78bfa) 35%, #fff); border-radius: 11px; color: var(--jg-3, #6d28d9); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--jg-papel, #ede9fe) 60%, #fff) 64%, color-mix(in srgb, var(--jg-chispa, #c4b5fd) 50%, #fff)); box-shadow: inset 0 2px 0 #fff, inset 0 -5px 0 color-mix(in srgb, var(--jg-1, #a78bfa) 22%, #fff), 0 5px 0 color-mix(in srgb, var(--jg-2, #7c3aed) 48%, #fff), 0 12px 16px -8px color-mix(in srgb, var(--jg-3, #6d28d9) 60%, transparent); transition: transform .1s, box-shadow .1s; } #main[data-juego="ahorcado"] .ah-tecla:hover:not(:disabled) { transform: translateY(-2px); } #main[data-juego="ahorcado"] .ah-tecla:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 color-mix(in srgb, var(--jg-1, #a78bfa) 22%, #fff), 0 1px 0 color-mix(in srgb, var(--jg-2, #7c3aed) 48%, #fff), 0 4px 8px -6px color-mix(in srgb, var(--jg-3, #6d28d9) 60%, transparent); } #main[data-juego="ahorcado"] .ah-tecla.si { color: #fff; border-color: #0b6b4c; transform: translateY(3px); background: linear-gradient(180deg, #4fd1a1, #12805c); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 2px 0 #0b5e43, 0 0 18px -4px rgba(52,185,139,.75); } #main[data-juego="ahorcado"] .ah-tecla.no { color: color-mix(in srgb, var(--jg-3, #6d28d9) 30%, #9a9cb5); border-color: transparent; transform: translateY(4px); background: color-mix(in srgb, var(--jg-3, #6d28d9) 8%, rgba(255,255,255,.4)); box-shadow: inset 0 2px 5px color-mix(in srgb, var(--jg-3, #6d28d9) 22%, transparent); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-teclado { background: linear-gradient(180deg, color-mix(in srgb, var(--jg-2, #7c3aed) 16%, rgba(20,15,36,.55)), rgba(10,8,20,.4)); border-color: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 40px -26px rgba(0,0,0,.7); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-tecla { color: var(--jg-papel, #ede9fe); border-color: rgba(255,255,255,.12); background: linear-gradient(180deg, color-mix(in srgb, var(--jg-1, #a78bfa) 26%, #241b3d), color-mix(in srgb, var(--jg-2, #7c3aed) 22%, #17112b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -4px 0 rgba(0,0,0,.25), 0 5px 0 color-mix(in srgb, var(--jg-3, #6d28d9) 45%, #07050f), 0 12px 16px -8px rgba(0,0,0,.7); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-tecla.si { color: #fff; background: linear-gradient(180deg, #34b98b, #0e6b4d); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #06402e, 0 0 18px -4px rgba(69,211,154,.6); } :root[data-theme="dark"] #main[data-juego="ahorcado"] .ah-tecla.no { color: #6d7096; background: rgba(255,255,255,.03); box-shadow: inset 0 2px 5px rgba(0,0,0,.45); } @media (max-width: 760px) { #main[data-juego="ahorcado"] .ah-teclado { padding: 10px 10px 14px; border-radius: 20px; } #main[data-juego="ahorcado"] .ah-tecla { min-height: 44px; border-radius: 10px; } } /* ================= DESAFÍO DEL DÍA ================= */ /* la ficha de misión: libreta con anillas, renglones y margen */ #main[data-juego="reto"] .p2-reto .rtm-libreta { position: relative; grid-template-columns: auto minmax(0, 1fr); gap: 6px clamp(16px, 3vw, 34px); justify-items: start; text-align: left; padding: 48px clamp(20px, 4vw, 46px) 30px clamp(30px, 5vw, 58px); background: linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--jg-2, #e11d48) 40%, transparent) 22px 24px, transparent 24px), linear-gradient(180deg, transparent 33px, color-mix(in srgb, var(--jg-1, #fb7185) 22%, transparent) 33px 34px) 0 44px / 100% 34px repeat-y, linear-gradient(172deg, rgba(255,255,255,.82), color-mix(in srgb, var(--jg-papel, #ffe4e6) 70%, rgba(255,255,255,.55))); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--jg-2, #e11d48) 14%, transparent), 0 30px 54px -30px color-mix(in srgb, var(--jg-3, #be123c) 60%, transparent); } #main[data-juego="reto"] .p2-reto .rtm-libreta .reto-texto { align-self: center; text-wrap: pretty; } .rtm-anillas { position: absolute; top: 10px; left: 30px; right: 30px; height: 20px; pointer-events: none; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--jg-3, #be123c) 45%, #fff) 0 4px, transparent 4.6px) 0 0 / 30px 20px repeat-x, radial-gradient(ellipse 3.6px 9px at 50% 38%, transparent 0 1.6px, color-mix(in srgb, var(--jg-2, #e11d48) 55%, #fff) 2px 3.2px, transparent 3.6px) 0 0 / 30px 20px repeat-x; } .rtm-dibujo { display: block; width: clamp(92px, 11vw, 150px); grid-row: 1; align-self: center; pointer-events: none; } .rtm-dibujo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--jg-3, #be123c) 30%, transparent)); } .rtm-dibujo :is(.rtm-diana, .rtm-asta, .rtm-bandera, .rtm-chispa) { transform-box: fill-box; } .rtm-diana { transform-origin: 50% 50%; } .rtm-asta { transform-origin: 50% 100%; } .rtm-bandera { transform-origin: 0 50%; } .rtm-chispa { transform-origin: 50% 50%; } :root[data-theme="dark"] #main[data-juego="reto"] .p2-reto .rtm-libreta { background: linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--jg-1, #fb7185) 40%, transparent) 22px 24px, transparent 24px), linear-gradient(180deg, transparent 33px, rgba(255,255,255,.07) 33px 34px) 0 44px / 100% 34px repeat-y, linear-gradient(172deg, color-mix(in srgb, var(--jg-3, #be123c) 26%, rgba(30,16,24,.6)), rgba(255,255,255,.04)); border-color: color-mix(in srgb, var(--jg-chispa, #fda4af) 24%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 54px -30px rgba(0,0,0,.75); } @media (max-width: 600px) { #main[data-juego="reto"] .p2-reto .rtm-libreta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 40px 16px 22px 30px; } #main[data-juego="reto"] .p2-reto .rtm-libreta .reto-texto { font-size: 18px; } .rtm-dibujo { width: 84px; } .rtm-anillas { left: 22px; right: 22px; } } /* el renglón también en la respuesta */ :root:not([data-theme="dark"]) #main[data-juego="reto"] .p2-reto .input { line-height: 28px; background-image: linear-gradient(180deg, transparent 27px, color-mix(in srgb, var(--jg-1, #fb7185) 28%, transparent) 27px 28px); background-size: 100% 28px; background-position: 0 14px; background-attachment: local; } :root[data-theme="dark"] #main[data-juego="reto"] .p2-reto .input { line-height: 28px; background-image: linear-gradient(180deg, transparent 27px, rgba(255,255,255,.08) 27px 28px); background-size: 100% 28px; background-position: 0 14px; background-attachment: local; } /* barra de caracteres más presente, con la bandera de meta al final */ #main[data-juego="reto"] .ja-barra { position: relative; flex: 1 1 260px; max-width: 400px; gap: 7px; padding-right: 32px; font-weight: 600; color: var(--jg-3, #be123c); } #main[data-juego="reto"] .ja-barra::after { height: 12px; background: linear-gradient(90deg, var(--jg-3, #be123c), var(--jg-2, #e11d48) 60%, var(--jg-1, #fb7185)) 0 0 / calc(var(--ja-p, 0) * 100%) 100% no-repeat, repeating-linear-gradient(135deg, color-mix(in srgb, var(--jg-1, #fb7185) 14%, transparent) 0 6px, color-mix(in srgb, var(--jg-1, #fb7185) 28%, transparent) 6px 12px); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--jg-3, #be123c) 30%, transparent); } #main[data-juego="reto"] .ja-barra.ja-listo::after { box-shadow: 0 0 0 1px color-mix(in srgb, var(--jg-2, #e11d48) 35%, transparent), 0 0 16px color-mix(in srgb, var(--jg-1, #fb7185) 70%, transparent); } #main[data-juego="reto"] .ja-barra::before { content: ""; position: absolute; right: 2px; bottom: -6px; width: 24px; height: 30px; transform-origin: 3px 100%; background-color: color-mix(in srgb, var(--jg-2, #e11d48) 40%, #fff); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Crect x='1' y='1' width='3' height='29' rx='1.5'/%3E%3Cpath d='M4 2c6-3 11 3 18-1v13c-7 4-12-2-18 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Crect x='1' y='1' width='3' height='29' rx='1.5'/%3E%3Cpath d='M4 2c6-3 11 3 18-1v13c-7 4-12-2-18 1z'/%3E%3C/svg%3E") center / contain no-repeat; } #main[data-juego="reto"] .ja-barra.ja-listo::before { background-color: var(--jg-2, #e11d48); } :root[data-theme="dark"] #main[data-juego="reto"] .ja-barra { color: var(--jg-chispa, #fda4af); } :root[data-theme="dark"] #main[data-juego="reto"] .ja-barra::after { background: linear-gradient(90deg, var(--jg-2, #e11d48), var(--jg-chispa, #fda4af)) 0 0 / calc(var(--ja-p, 0) * 100%) 100% no-repeat, rgba(255,255,255,.1); } :root[data-theme="dark"] #main[data-juego="reto"] .ja-barra::before { background-color: rgba(255,255,255,.25); } :root[data-theme="dark"] #main[data-juego="reto"] .ja-barra.ja-listo::before { background-color: var(--jg-chispa, #fda4af); } /* el sello «¡Hecho!» grande: con el reto cumplido queda puesto en la ficha (abajo a la derecha, sin tapar el texto) */ #main[data-juego="reto"] .rtm-hecho .rtm-libreta { padding-bottom: 104px; } #main[data-juego="reto"] .rtm-libreta .ja-sello { position: absolute; top: auto; right: 30px; bottom: 26px; z-index: 2; padding: 8px 20px 3px; animation: none; font: 400 50px/1 var(--font-display); letter-spacing: .06em; color: var(--jg-2, #e11d48); border: 4px solid var(--jg-2, #e11d48); border-radius: 14px; outline: 2px solid color-mix(in srgb, var(--jg-2, #e11d48) 40%, transparent); outline-offset: 3px; background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jg-2, #e11d48) 18%, transparent), 0 14px 26px -16px color-mix(in srgb, var(--jg-3, #be123c) 70%, transparent); transform: rotate(-9deg); } #main[data-juego="reto"] .rtm-libreta .ja-sello::before, #main[data-juego="reto"] .rtm-libreta .ja-sello::after { content: ""; position: absolute; inset: -12px; border-radius: 22px; border: 3px solid var(--jg-1, #fb7185); opacity: 0; pointer-events: none; } :root[data-theme="dark"] #main[data-juego="reto"] .rtm-libreta .ja-sello { color: var(--jg-chispa, #fda4af); border-color: var(--jg-chispa, #fda4af); outline-color: color-mix(in srgb, var(--jg-chispa, #fda4af) 35%, transparent); background: rgba(20,8,14,.55); } @media (max-width: 600px) { #main[data-juego="reto"] .rtm-hecho .rtm-libreta { padding-bottom: 86px; } #main[data-juego="reto"] .rtm-libreta .ja-sello { right: 50%; bottom: 22px; margin-right: -78px; font-size: 36px; padding: 6px 14px 2px; } } /* ================= MOVIMIENTO (solo si la persona no pidió «menos movimiento») ================= */ @media (prefers-reduced-motion: no-preference) { /* fondo: las piezas derivan y giran despacio */ .ahm-pz, .rtm-pz { animation: mundoFlota var(--d, 30s) ease-in-out infinite alternate; } @keyframes mundoFlota { from { transform: translate(0, 0) rotate(var(--r, 0deg)); } to { transform: translate(22px, -30px) rotate(calc(var(--r, 0deg) * -1)); } } /* ---- AHORCADO ---- */ /* llega la pizarra: cuelga y se balancea */ #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-carta:not(.ja-sale) { transform-origin: 50% 0; animation: ahmCuelga .62s cubic-bezier(.3,1.25,.5,1) backwards; } @keyframes ahmCuelga { from { opacity: 0; transform: translateY(-46px) rotate(-5deg) scale(.95); } 55% { opacity: 1; transform: translateY(4px) rotate(2.2deg); } 80% { transform: rotate(-.8deg); } } /* las teclas suben en ola, fila por fila */ #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-tecla { animation: ahmTeclaEntra .4s calc(.16s + var(--k, 0) * 22ms + var(--f, 0) * 50ms) cubic-bezier(.3,1.5,.5,1) backwards; } @keyframes ahmTeclaEntra { from { opacity: 0; transform: perspective(300px) translateY(24px) rotateX(70deg) scale(.8); } } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-casilla { animation: ahmFichaEntra .45s calc(.22s + var(--i, 0) * 40ms) cubic-bezier(.3,1.5,.5,1) backwards; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-casilla:nth-child(2) { animation-delay: .27s; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-casilla:nth-child(3) { animation-delay: .32s; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-casilla:nth-child(4) { animation-delay: .37s; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-casilla:nth-child(n+5) { animation-delay: .42s; } @keyframes ahmFichaEntra { from { opacity: 0; transform: translateY(-20px) scale(.6); } } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-vida { animation: ahmLuzEntra .5s .4s ease-out backwards; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-vida:nth-child(2) { animation-delay: .46s; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-vida:nth-child(3) { animation-delay: .52s; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-vida:nth-child(4) { animation-delay: .58s; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-vida:nth-child(5) { animation-delay: .64s; } #main[data-juego="ahorcado"] .ah-juego:not(.ja-jugada) .ah-vida:nth-child(6) { animation-delay: .7s; } @keyframes ahmLuzEntra { from { opacity: .15; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.25); } } /* el dibujo vive: una tecla se hunde y la ficha salta; los destellos titilan */ .ahm-dibujo .ahm-tk2 { animation: ahmTk 3.4s ease-in-out infinite; } .ahm-dibujo .ahm-ficha { animation: ahmFicha 3.4s ease-in-out infinite; } .ahm-dibujo .ahm-chispas path { animation: ahmChispa 2.6s ease-in-out infinite; } .ahm-dibujo .ahm-chispas path:nth-child(2) { animation-delay: -1.1s; } .ahm-dibujo .ahm-chispas path:nth-child(3) { animation-delay: -1.9s; } @keyframes ahmTk { 0%, 60%, 100% { transform: none; } 66% { transform: translateY(5px); } 74% { transform: none; } } @keyframes ahmFicha { 0%, 62%, 100% { transform: none; } 72% { transform: translateY(-9px) rotate(-8deg); } 84% { transform: translateY(1px); } } @keyframes ahmChispa { 50% { opacity: .35; transform: scale(.6); } } /* acierto o fallo: la ficha del dibujo responde */ #main[data-juego="ahorcado"] .ah-carta.ahm-bien .ahm-ficha { animation: ahmFichaGira .6s cubic-bezier(.3,1.4,.5,1); } @keyframes ahmFichaGira { 50% { transform: translateY(-16px) rotate(180deg) scale(1.15); } to { transform: rotate(360deg); } } #main[data-juego="ahorcado"] .ah-carta.ahm-mal .ahm-tk { animation: ahmTkMal .45s ease-in-out; } @keyframes ahmTkMal { 25% { transform: translateY(5px) rotate(-6deg); } 60% { transform: translateY(5px) rotate(5deg); } } /* la tecla pulsada: recorrido hondo + anillo de luz (verde si está, rojo si no) */ #main[data-juego="ahorcado"] .ah-tecla.ja-pulsada { animation: ahmHunde .42s cubic-bezier(.3,1.5,.5,1); } #main[data-juego="ahorcado"] .ah-tecla.no.ja-pulsada { animation: ahmTeclaNo .45s ease-in-out; } @keyframes ahmHunde { 0% { transform: translateY(7px) scale(.9); } 55% { transform: translateY(-3px) scale(1.06); } } @keyframes ahmTeclaNo { 0% { transform: translateY(7px) scale(.9); } 25% { transform: translateY(4px) translateX(-6px) rotate(-4deg); } 50% { transform: translateY(4px) translateX(6px) rotate(4deg); } 75% { transform: translateY(4px) translateX(-3px); } } #main[data-juego="ahorcado"] .ah-tecla.ja-pulsada::after { content: ""; position: absolute; inset: -3px; border-radius: 14px; pointer-events: none; border: 3px solid #34b98b; animation: ahmAnillo .6s ease-out forwards; } #main[data-juego="ahorcado"] .ah-tecla.no.ja-pulsada::after { border-color: #e5484d; } @keyframes ahmAnillo { from { opacity: .95; transform: scale(.85); } to { opacity: 0; transform: scale(1.75); } } /* letras acertadas: la ficha se da vuelta grande y suelta un anillo */ #main[data-juego="ahorcado"] .ah-casilla.ver { animation: none; } #main[data-juego="ahorcado"] .ah-casilla.ver.ja-nueva { animation: ahmVoltea .56s calc(var(--n, 0) * 80ms) cubic-bezier(.3,1.35,.5,1) backwards; } @keyframes ahmVoltea { from { transform: perspective(380px) translateY(-16px) rotateX(-200deg) scale(1.25); } 60% { transform: perspective(380px) translateY(-8px) rotateX(12deg) scale(1.15); } } #main[data-juego="ahorcado"] .ah-casilla.ja-nueva::after { content: ""; position: absolute; inset: -5px; border-radius: 15px; pointer-events: none; border: 3px solid var(--jg-1, #a78bfa); opacity: 0; animation: ahmAnillo .6s calc(var(--n, 0) * 80ms + .22s) ease-out forwards; } /* palabra perdida: las letras que faltaban caen en rojo */ #main[data-juego="ahorcado"] .ah-casilla.ver.perdida.ja-nueva { animation: ahmCae .5s calc(var(--n, 0) * 70ms) cubic-bezier(.3,1.45,.5,1) backwards; } #main[data-juego="ahorcado"] .ah-casilla.perdida.ja-nueva::after { border-color: #ff7a7e; } @keyframes ahmCae { from { opacity: 0; transform: translateY(-30px) rotate(-14deg) scale(.8); } } /* palabra completa: ola grande de fichas + brillo que barre la pizarra + la pizarra da un saltito */ #main[data-juego="ahorcado"] .ah-palabra.ja-ola .ah-casilla { animation: ahmOla .62s calc(.36s + var(--i, 0) * 55ms) cubic-bezier(.3,1.4,.5,1) backwards; } #main[data-juego="ahorcado"] .ah-palabra.ja-ola .ah-casilla.ja-nueva { animation: ahmVoltea .56s calc(var(--n, 0) * 80ms) cubic-bezier(.3,1.35,.5,1) backwards, ahmOla .62s calc(.36s + var(--i, 0) * 55ms) cubic-bezier(.3,1.4,.5,1); } @keyframes ahmOla { 45% { transform: translateY(-15px) scale(1.16) rotate(-4deg); } 75% { transform: translateY(2px) scale(.98); } } #main[data-juego="ahorcado"] .ah-carta.ahm-gana:not(.ja-sale) { animation: ahmGana .6s .3s cubic-bezier(.3,1.4,.5,1); } @keyframes ahmGana { 40% { transform: translateY(-6px) scale(1.015); } } #main[data-juego="ahorcado"] .ah-carta.ahm-gana .ahm-barrido::before { animation: ahmBarre .8s .32s ease-out; } @keyframes ahmBarre { from { opacity: 1; transform: translateX(0) skewX(-14deg); } to { opacity: 1; transform: translateX(380%) skewX(-14deg); } } /* fallo: la pizarra se sacude, la pila tiembla y la luz se apaga con un destello */ #main[data-juego="ahorcado"] .ah-carta.ahm-mal:not(.ja-sale) { animation: ahmSacude .45s ease-in-out; } @keyframes ahmSacude { 20% { transform: translateX(-10px) rotate(-.6deg); } 45% { transform: translateX(9px) rotate(.5deg); } 70% { transform: translateX(-5px); } } #main[data-juego="ahorcado"] .ah-carta.ahm-mal .ah-vidas { animation: ahmPila .45s ease-in-out; } @keyframes ahmPila { 30% { transform: rotate(-5deg) scale(1.06); } 65% { transform: rotate(4deg); } } #main[data-juego="ahorcado"] .ah-vida.ja-apaga { animation: ahmApaga .62s ease-out backwards; } @keyframes ahmApaga { 0% { transform: scale(1.4); background: #fff; box-shadow: 0 0 18px 4px #ff7a7e; } 35% { transform: scale(1.3); background: #ff7a7e; box-shadow: 0 0 14px 2px #ff7a7e; } 70% { transform: scale(.85); } } #main[data-juego="ahorcado"] .ahm-baja .ah-vida:not(.gastada) { animation: ahmBaja 1.4s ease-in-out infinite; } @keyframes ahmBaja { 50% { opacity: .55; } } /* palabra perdida: la pizarra se ladea y vuelve */ #main[data-juego="ahorcado"] .ah-carta.ahm-pierde:not(.ja-sale) { transform-origin: 50% 0; animation: ahmPierde .7s cubic-bezier(.3,1.3,.5,1); } @keyframes ahmPierde { 30% { transform: rotate(2.4deg) translateY(6px); } 60% { transform: rotate(-1.2deg); } } /* ---- DESAFÍO DEL DÍA ---- */ /* llega la ficha de misión; la diana gira y la bandera se clava */ #main[data-juego="reto"] .p2-reto .rtm-libreta { animation: rtmLlega .6s cubic-bezier(.3,1.3,.5,1) backwards; } @keyframes rtmLlega { from { opacity: 0; transform: translateY(-34px) rotate(-3deg) scale(.96); } 60% { opacity: 1; transform: translateY(3px) rotate(.8deg); } } #main[data-juego="reto"] .rtm-diana { animation: rtmDianaEntra .55s .12s cubic-bezier(.3,1.4,.5,1) backwards; } @keyframes rtmDianaEntra { from { opacity: 0; transform: rotate(-120deg) scale(.4); } } #main[data-juego="reto"] .rtm-asta { animation: rtmAsta .55s .42s cubic-bezier(.3,1.6,.5,1) backwards; } @keyframes rtmAsta { from { opacity: 0; transform: translate(26px, -40px) rotate(24deg); } 60% { opacity: 1; } } #main[data-juego="reto"] .rtm-bandera { animation: rtmOndea 2.6s ease-in-out infinite; } @keyframes rtmOndea { 50% { transform: skewY(-5deg) scaleX(.94); } } #main[data-juego="reto"] .rtm-chispa { animation: ahmChispa 2.4s ease-in-out infinite; } #main[data-juego="reto"] .rtm-chispa + .rtm-chispa { animation-delay: -1.2s; } /* respuesta lista (20 caracteres): la bandera de meta se iza, la diana late una vez y el botón se enciende */ #main[data-juego="reto"] .ja-barra::after { transition: background-size .3s cubic-bezier(.3,1.3,.5,1), box-shadow .3s; } #main[data-juego="reto"] .ja-barra.ja-listo::before { animation: rtmIza .55s cubic-bezier(.3,1.6,.5,1); } @keyframes rtmIza { from { transform: translateY(10px) scale(.5) rotate(-20deg); } 60% { transform: translateY(-4px) scale(1.25) rotate(6deg); } } #main[data-juego="reto"] .rtm-listo .rtm-diana { animation: rtmLate .55s cubic-bezier(.3,1.6,.5,1); } @keyframes rtmLate { 45% { transform: scale(1.14) rotate(10deg); } } #main[data-juego="reto"] .p2-reto #reto-ok:not(:disabled) { animation: rtmListo .6s cubic-bezier(.3,1.6,.5,1); } @keyframes rtmListo { 40% { transform: scale(1.12) rotate(-2deg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--jg-1, #fb7185) 35%, transparent); } 70% { transform: scale(.97); } } /* recién enviado: el sello cae desde arriba con golpe, la ficha se hunde y salen dos anillos de luz */ #main[data-juego="reto"] .rtm-recien .rtm-libreta { animation: rtmGolpe .42s .46s ease-out; } @keyframes rtmGolpe { 30% { transform: translateY(7px) scale(.985); } 65% { transform: translateY(-2px); } } #main[data-juego="reto"] .rtm-recien .rtm-libreta .ja-sello { animation: rtmSello .6s .12s cubic-bezier(.3,1.2,.5,1) backwards; } @keyframes rtmSello { from { opacity: 0; transform: translateY(-40px) rotate(-34deg) scale(3); } 55% { opacity: 1; transform: rotate(-6deg) scale(.86); } 75% { transform: rotate(-11deg) scale(1.07); } to { transform: rotate(-9deg); } } #main[data-juego="reto"] .rtm-recien .rtm-libreta .ja-sello::before { animation: rtmAnillo .7s .44s ease-out forwards; } #main[data-juego="reto"] .rtm-recien .rtm-libreta .ja-sello::after { animation: rtmAnillo .8s .58s ease-out forwards; } @keyframes rtmAnillo { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.9); } } #main[data-juego="reto"] .rtm-recien .rtm-diana { animation: rtmLate .6s .48s cubic-bezier(.3,1.6,.5,1); } #main[data-juego="reto"] .rtm-recien .rtm-asta { animation-delay: .08s; } #main[data-juego="reto"] .rtm-recien .reto-hecho { animation: rtmHechoSube .5s .3s cubic-bezier(.3,1.4,.5,1) backwards; } @keyframes rtmHechoSube { from { opacity: 0; transform: translateY(18px) scale(.96); } } } /* ================= RONDA 2 (20-oct) · ESCENAS PROPIAS DEL INICIO Y DEL FINAL ================= */ /* ---- AHORCADO · inicio: la pizarra que se llena sola y el teclado que la escribe ---- */ #main[data-juego="ahorcado"] .ahm-pantalla-escena { display: grid; place-items: center; align-content: center; } .ahm-escena { pointer-events: none; } .ahm-escena-inicio { position: relative; z-index: 1; display: grid; justify-items: center; gap: 24px; width: 100%; max-width: 300px; } .ahm-esc-pizarra { position: relative; display: grid; justify-items: center; gap: 14px; width: 100%; padding: 14px 12px 22px; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--jg-2, #7c3aed) 80%, transparent), color-mix(in srgb, var(--jg-3, #6d28d9) 92%, transparent)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 6px rgba(255,255,255,.08), 0 22px 36px -22px color-mix(in srgb, var(--jg-3, #6d28d9) 85%, transparent); } .ahm-esc-brillo { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; transform: translateX(-120%) skewX(-14deg); background: linear-gradient(100deg, transparent, rgba(255,255,255,.34) 50%, transparent); } .ahm-esc-pila { justify-self: end; display: inline-flex; gap: 3px; padding: 3px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.5); } .ahm-esc-pila i { width: 12px; height: 9px; border-radius: 3px; background: linear-gradient(180deg, #fff, var(--jg-chispa, #c4b5fd)); box-shadow: 0 0 8px color-mix(in srgb, var(--jg-chispa, #c4b5fd) 90%, transparent); } .ahm-esc-palabra { display: flex; gap: 6px; } .ahm-esc-palabra b { display: grid; width: 38px; height: 46px; border-radius: 10px; background: rgba(0,0,0,.2); box-shadow: inset 0 3px 6px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.18); } .ahm-esc-palabra s { display: grid; place-items: center; border-radius: 10px; text-decoration: none; font: 400 30px/1 var(--font-display); color: var(--jg-3, #6d28d9); background: linear-gradient(180deg, #fff, var(--jg-papel, #ede9fe)); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--jg-1, #a78bfa) 55%, #fff), 0 4px 0 color-mix(in srgb, var(--jg-3, #6d28d9) 70%, #000); } .ahm-esc-teclado { display: flex; gap: 8px; } .ahm-esc-teclado i { --ahm-k-tx: var(--jg-3, #6d28d9); position: relative; isolation: isolate; display: grid; place-items: center; width: 40px; height: 38px; border-radius: 10px; font: 400 20px/1 var(--font-display); font-style: normal; color: var(--jg-3, #6d28d9); border: 1px solid color-mix(in srgb, var(--jg-1, #a78bfa) 35%, #fff); background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--jg-papel, #ede9fe) 60%, #fff) 64%, color-mix(in srgb, var(--jg-chispa, #c4b5fd) 50%, #fff)); box-shadow: inset 0 2px 0 #fff, 0 5px 0 color-mix(in srgb, var(--jg-2, #7c3aed) 48%, #fff), 0 12px 16px -8px color-mix(in srgb, var(--jg-3, #6d28d9) 60%, transparent); } :root[data-theme="dark"] .ahm-esc-pizarra { border-color: color-mix(in srgb, var(--jg-chispa, #c4b5fd) 30%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--jg-2, #7c3aed) 46%, rgba(20,14,40,.7)), color-mix(in srgb, var(--jg-3, #6d28d9) 40%, rgba(10,8,22,.75))); } .ahm-esc-teclado i::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; background: linear-gradient(180deg, #4fd1a1, #12805c); box-shadow: 0 0 18px -2px rgba(52,185,139,.8); } .ahm-esc-teclado .ahm-esc-k3::after { background: linear-gradient(180deg, #ff9ea1, #e5484d); box-shadow: 0 0 18px -2px rgba(229,72,77,.8); } :root[data-theme="dark"] .ahm-esc-teclado i { --ahm-k-tx: var(--jg-papel, #ede9fe); color: var(--jg-papel, #ede9fe); border-color: rgba(255,255,255,.12); background: linear-gradient(180deg, color-mix(in srgb, var(--jg-1, #a78bfa) 26%, #241b3d), color-mix(in srgb, var(--jg-2, #7c3aed) 22%, #17112b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 0 color-mix(in srgb, var(--jg-3, #6d28d9) 45%, #07050f), 0 12px 16px -8px rgba(0,0,0,.7); } @media (max-width: 760px) { .ahm-escena-inicio { gap: 18px; max-width: 280px; } .ahm-esc-palabra b { width: 34px; height: 42px; } .ahm-esc-palabra s { font-size: 26px; } .ahm-esc-teclado i { width: 36px; height: 34px; font-size: 18px; } } @media (max-width: 600px) { /* en el celular el panel va al lado del título: la escena se hace pequeña (como el logo de antes) */ .ahm-escena-inicio { width: 106px; gap: 9px; } .ahm-esc-pizarra { gap: 6px; padding: 7px 5px 9px; border-radius: 12px; } .ahm-esc-pila { gap: 2px; padding: 2px; border-radius: 4px; border-width: 1px; } .ahm-esc-pila i { width: 6px; height: 5px; border-radius: 2px; } .ahm-esc-palabra { gap: 2px; } .ahm-esc-palabra b { width: 14px; height: 19px; border-radius: 4px; } .ahm-esc-palabra s { border-radius: 4px; font-size: 13px; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--jg-1, #a78bfa) 55%, #fff), 0 2px 0 color-mix(in srgb, var(--jg-3, #6d28d9) 70%, #000); } .ahm-esc-teclado { gap: 3px; } .ahm-esc-teclado i { width: 15px; height: 16px; border-radius: 4px; font-size: 10px; box-shadow: inset 0 1px 0 #fff, 0 3px 0 color-mix(in srgb, var(--jg-2, #7c3aed) 48%, #fff); } :root[data-theme="dark"] .ahm-esc-teclado i { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 color-mix(in srgb, var(--jg-3, #6d28d9) 45%, #07050f); } } /* ---- AHORCADO · final: las palabras jugadas cuelgan de un hilo como fichas (su inicial) y se mecen ---- */ #main[data-juego="ahorcado"] .p2-final { position: relative; } #main[data-juego="ahorcado"] .p2-final .pl-oso-fin { position: relative; z-index: 2; } .ahm-escena-final { position: absolute; z-index: 1; top: 34px; left: 26px; right: 26px; height: 150px; --sag: 46px; } .ahm-gu-hilo { position: absolute; left: 0; top: 0; width: 100%; height: var(--sag); overflow: visible; } .ahm-gu-hilo path { fill: none; stroke: color-mix(in srgb, var(--jg-2, #7c3aed) 45%, transparent); stroke-width: 2px; vector-effect: non-scaling-stroke; } .ahm-gu-f { position: absolute; left: var(--x); top: calc(var(--y) * var(--sag) - 1px); width: 46px; margin-left: -23px; padding-top: 14px; transform-origin: 50% 0; } .ahm-gu-f::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 16px; margin-left: -1px; background: color-mix(in srgb, var(--jg-2, #7c3aed) 45%, transparent); } .ahm-gu-f > span { position: relative; display: grid; place-items: center; height: 52px; border-radius: 12px; font: 400 30px/1 var(--font-display); color: color-mix(in srgb, var(--jg-3, #6d28d9) 55%, transparent); background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 4px 0 color-mix(in srgb, var(--jg-1, #a78bfa) 30%, #fff), 0 12px 18px -12px color-mix(in srgb, var(--jg-3, #6d28d9) 50%, transparent); } .ahm-gu-f.ok > span { color: #fff; border-color: rgba(255,255,255,.7); background: linear-gradient(180deg, var(--jg-1, #a78bfa), var(--jg-2, #7c3aed) 60%, var(--jg-3, #6d28d9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 0 color-mix(in srgb, var(--jg-3, #6d28d9) 70%, #000), 0 0 22px -6px color-mix(in srgb, var(--jg-1, #a78bfa) 90%, transparent); } .ahm-gu-f.ok:not(.ahm-gu-estrella) > span::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; background: #12805c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; } .ahm-gu-estrella > span svg { width: 26px; height: 26px; fill: currentColor; } :root[data-theme="dark"] .ahm-gu-f > span { color: color-mix(in srgb, var(--jg-chispa, #c4b5fd) 55%, transparent); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 18px -12px rgba(0,0,0,.7); } :root[data-theme="dark"] .ahm-gu-f.ok > span { color: #fff; background: linear-gradient(180deg, var(--jg-1, #a78bfa), var(--jg-2, #7c3aed) 60%, var(--jg-3, #6d28d9)); } :root[data-theme="dark"] :is(.ahm-gu-hilo path) { stroke: color-mix(in srgb, var(--jg-chispa, #c4b5fd) 40%, transparent); } :root[data-theme="dark"] .ahm-gu-f::before { background: color-mix(in srgb, var(--jg-chispa, #c4b5fd) 40%, transparent); } @media (max-width: 600px) { .ahm-escena-final { top: 26px; left: 8px; right: 8px; --sag: 30px; } .ahm-gu-f { left: var(--xm); top: calc(var(--ym) * var(--sag) - 1px); width: 32px; margin-left: -16px; padding-top: 10px; } .ahm-gu-f::before { height: 12px; } .ahm-gu-f > span { height: 38px; border-radius: 9px; font-size: 22px; } .ahm-gu-f.ok:not(.ahm-gu-estrella) > span::after { width: 14px; height: 14px; right: -5px; bottom: -5px; background-size: 10px; } .ahm-gu-estrella > span svg { width: 19px; height: 19px; } } /* ---- DESAFÍO · la ruta de la misión (inicio y cumplido) ---- */ #main[data-juego="reto"] .rtm-escena { display: block; width: 100%; max-width: 760px; margin: 0 auto; pointer-events: none; } .rtm-escena svg { display: block; width: 100%; height: auto; overflow: visible; } .rtm-escena :is(.rtm-ru-lleno, .rtm-ru-hito, .rtm-ru-pin, .rtm-ru-bandera, .rtm-ru-bandera path, .rtm-ru-anillo) { transform-box: fill-box; } .rtm-ru-pista { fill: color-mix(in srgb, var(--jg-1, #fb7185) 14%, rgba(255,255,255,.62)); stroke: rgba(255,255,255,.95); stroke-width: 1.5; } .rtm-ru-guion { fill: none; stroke: color-mix(in srgb, var(--jg-2, #e11d48) 42%, transparent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 14; } .rtm-ru-lleno { transform-origin: 0 50%; transform: scaleX(var(--rtm-p, 0)); transition: transform .45s cubic-bezier(.3,1.3,.5,1); } .rtm-ru-hito { fill: #fff; stroke: color-mix(in srgb, var(--jg-2, #e11d48) 40%, #fff); stroke-width: 3; transform-origin: 50% 50%; transition: fill .25s, stroke .25s; } .rtm-p1 .rtm-ru-h1, .rtm-p2 .rtm-ru-h2, .rtm-p3 .rtm-ru-h3, .rtm-hecho .rtm-ru-hito { fill: var(--jg-2, #e11d48); stroke: #fff; } .rtm-ru-salida { stroke: #fff; stroke-width: 3; } .rtm-ru-txt { font: 700 13px/1 var(--font); letter-spacing: .16em; fill: color-mix(in srgb, var(--jg-3, #be123c) 70%, transparent); } .rtm-ru-ficha { transform: translateX(calc(var(--rtm-p, 0) * 520px)); transition: transform .45s cubic-bezier(.3,1.3,.5,1); } .rtm-ru-pin { filter: drop-shadow(0 6px 6px color-mix(in srgb, var(--jg-3, #be123c) 35%, transparent)); } .rtm-ru-bandera { transform: translateY(26px); transition: transform .5s cubic-bezier(.3,1.5,.5,1); } .rtm-ru-bandera path { transform-origin: 0 50%; } .rtm-listo .rtm-ru-bandera, .rtm-hecho .rtm-ru-bandera { transform: none; } .rtm-ru-anillo { fill: none; stroke: var(--jg-1, #fb7185); stroke-width: 3; opacity: 0; transform-origin: 50% 50%; } #main[data-juego="reto"] .rtm-hecho { --rtm-p: 1; } :root[data-theme="dark"] .rtm-ru-pista { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.14); } :root[data-theme="dark"] .rtm-ru-guion { stroke: color-mix(in srgb, var(--jg-chispa, #fda4af) 40%, transparent); } :root[data-theme="dark"] .rtm-ru-hito { fill: rgba(30,14,22,.9); stroke: color-mix(in srgb, var(--jg-chispa, #fda4af) 40%, transparent); } :root[data-theme="dark"] :is(.rtm-p1 .rtm-ru-h1, .rtm-p2 .rtm-ru-h2, .rtm-p3 .rtm-ru-h3, .rtm-hecho .rtm-ru-hito) { fill: var(--jg-chispa, #fda4af); stroke: #fff; } :root[data-theme="dark"] .rtm-ru-txt { fill: color-mix(in srgb, var(--jg-chispa, #fda4af) 75%, transparent); } :root[data-theme="dark"] .rtm-ru-anillo { stroke: var(--jg-chispa, #fda4af); } @media (max-width: 600px) { .rtm-ru-txt { display: none; } #main[data-juego="reto"] .rtm-escena { margin: -4px 0; } } /* ---- movimiento de las escenas (solo sin «menos movimiento»; con él, todo queda quieto y completo) ---- */ @media (prefers-reduced-motion: no-preference) { /* AHORCADO · inicio: ciclo de 7 s. 9 % R · 19 % E · 29 % X (falla) · 39 % M · 49 % O (las dos) · 59 % T · 64 % ola y brillo · 88 % se borra */ .ahm-esc-pizarra { animation: ahmCuelga .62s cubic-bezier(.3,1.25,.5,1) backwards; transform-origin: 50% 0; } .ahm-esc-teclado { animation: ahmTeclaEntra .5s .2s cubic-bezier(.3,1.5,.5,1) backwards; } .ahm-esc-palabra s { animation: 7s ease-out infinite; } .ahm-esc-palabra .ahm-esc-f1 { animation-name: ahmEscF1; } .ahm-esc-palabra .ahm-esc-f2 { animation-name: ahmEscF2; } .ahm-esc-palabra .ahm-esc-f4 { animation-name: ahmEscF4; } .ahm-esc-palabra .ahm-esc-f5 { animation-name: ahmEscF5; } .ahm-esc-palabra .ahm-esc-f6 { animation-name: ahmEscF6; } @keyframes ahmEscF1 { 0%, 9% { opacity: 0; transform: perspective(220px) rotateX(-110deg); } 13% { opacity: 1; transform: perspective(220px) rotateX(16deg) scale(1.14); } 16%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: perspective(220px) rotateX(90deg); } } @keyframes ahmEscF2 { 0%, 19% { opacity: 0; transform: perspective(220px) rotateX(-110deg); } 23% { opacity: 1; transform: perspective(220px) rotateX(16deg) scale(1.14); } 26%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: perspective(220px) rotateX(90deg); } } @keyframes ahmEscF4 { 0%, 39% { opacity: 0; transform: perspective(220px) rotateX(-110deg); } 43% { opacity: 1; transform: perspective(220px) rotateX(16deg) scale(1.14); } 46%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: perspective(220px) rotateX(90deg); } } @keyframes ahmEscF5 { 0%, 49% { opacity: 0; transform: perspective(220px) rotateX(-110deg); } 53% { opacity: 1; transform: perspective(220px) rotateX(16deg) scale(1.14); } 56%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: perspective(220px) rotateX(90deg); } } @keyframes ahmEscF6 { 0%, 59% { opacity: 0; transform: perspective(220px) rotateX(-110deg); } 63% { opacity: 1; transform: perspective(220px) rotateX(16deg) scale(1.14); } 66%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: perspective(220px) rotateX(90deg); } } /* la tecla de cada letra se hunde justo cuando su ficha se da vuelta (mismo ciclo, desfasado) */ .ahm-esc-teclado i { animation: ahmEscK 7s ease-out infinite; } .ahm-esc-teclado .ahm-esc-k1 { animation-delay: .63s; } .ahm-esc-teclado .ahm-esc-k2 { animation-delay: 1.33s; } .ahm-esc-teclado .ahm-esc-k4 { animation-delay: 2.73s; } .ahm-esc-teclado .ahm-esc-k5 { animation-delay: 3.43s; } .ahm-esc-teclado .ahm-esc-k6 { animation-delay: 4.13s; } .ahm-esc-teclado .ahm-esc-k3 { animation: ahmEscKNo 7s 2.03s ease-out infinite; } .ahm-esc-teclado i::after { animation: ahmEscKLuz 7s ease-out infinite; animation-delay: inherit; } @keyframes ahmEscK { 0% { transform: translateY(5px) scale(.94); color: #fff; } 5% { transform: translateY(-3px) scale(1.06); color: #fff; } 10%, 100% { transform: none; color: var(--ahm-k-tx); } } @keyframes ahmEscKNo { 0% { transform: translateY(5px); color: #fff; } 2% { transform: translateY(4px) translateX(-5px) rotate(-5deg); } 4% { transform: translateY(4px) translateX(5px) rotate(5deg); } 6% { transform: translateY(2px) translateX(-2px); color: #fff; } 10%, 100% { transform: none; color: var(--ahm-k-tx); } } @keyframes ahmEscKLuz { 0%, 6% { opacity: 1; } 11%, 100% { opacity: 0; } } /* la pila: una luz se apaga con destello cuando falla la X y vuelve al reiniciar */ .ahm-esc-pila { animation: ahmEscPila 7s ease-in-out infinite; } .ahm-esc-pila i:last-child { animation: ahmEscLuz 7s ease-out infinite; } @keyframes ahmEscPila { 0%, 29%, 35%, 100% { transform: none; } 31% { transform: rotate(-6deg) scale(1.1); } 33% { transform: rotate(5deg); } } @keyframes ahmEscLuz { 0%, 29% { opacity: 1; } 30% { opacity: 1; transform: scale(1.5); background: #ff7a7e; box-shadow: 0 0 14px 3px #ff7a7e; } 34%, 92% { opacity: .18; transform: none; box-shadow: none; } 96%, 100% { opacity: 1; } } /* palabra completa: ola de fichas y un brillo que barre la pizarra */ .ahm-esc-palabra b { animation: ahmEscOla 7s calc(var(--i, 0) * 70ms) ease-in-out infinite; } @keyframes ahmEscOla { 0%, 63% { transform: none; } 67% { transform: translateY(-12px) scale(1.12) rotate(-4deg); } 71% { transform: translateY(2px); } 74%, 100% { transform: none; } } .ahm-esc-brillo { animation: ahmEscBrillo 7s ease-out infinite; } @keyframes ahmEscBrillo { 0%, 64% { transform: translateX(-120%) skewX(-14deg); } 78%, 100% { transform: translateX(330%) skewX(-14deg); } } /* AHORCADO · final: las fichas caen al hilo una tras otra, rebotan y se mecen; las adivinadas dan un salto en ola */ .ahm-gu-hilo { animation: ahmGuHilo .5s .05s ease-out backwards; transform-origin: 50% 0; } @keyframes ahmGuHilo { from { opacity: 0; transform: scaleY(.2); } } .ahm-gu-f { animation: ahmGuMece 2.8s calc(var(--k, 0) * -.47s) ease-in-out infinite alternate; } @keyframes ahmGuMece { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } } .ahm-gu-f > span { animation: ahmGuCae .6s calc(.15s + var(--k, 0) * 90ms) cubic-bezier(.3,1.55,.5,1) backwards; } .ahm-gu-f.ok > span { animation: ahmGuCae .6s calc(.15s + var(--k, 0) * 90ms) cubic-bezier(.3,1.55,.5,1) backwards, ahmGuSalta .55s calc(1.05s + var(--k, 0) * 90ms) cubic-bezier(.3,1.5,.5,1); } @keyframes ahmGuCae { from { opacity: 0; transform: translateY(-80px) rotate(-18deg) scale(.8); } 60% { opacity: 1; } } @keyframes ahmGuSalta { 45% { transform: translateY(-14px) scale(1.14) rotate(-6deg); } 75% { transform: translateY(2px); } } /* DESAFÍO · la ruta: la ficha respira en la salida, el camino marcha hacia la meta y la bandera ondea */ #main[data-juego="reto"] .rtm-escena { animation: rtmRuEntra .5s .05s cubic-bezier(.3,1.3,.5,1) backwards; } @keyframes rtmRuEntra { from { opacity: 0; transform: translateY(-14px) scale(.97); } } .rtm-ru-guion { animation: rtmRuMarcha 1.1s linear infinite; } @keyframes rtmRuMarcha { to { stroke-dashoffset: -16; } } .rtm-ru-pin { animation: rtmRuBota 1.4s ease-in-out infinite alternate; } @keyframes rtmRuBota { from { transform: translateY(0); } to { transform: translateY(-7px); } } .rtm-ru-bandera path { animation: rtmOndea 2.2s ease-in-out infinite; } .rtm-p1 .rtm-ru-h1, .rtm-p2 .rtm-ru-h2, .rtm-p3 .rtm-ru-h3 { animation: rtmRuHito .5s cubic-bezier(.3,1.7,.5,1); } @keyframes rtmRuHito { 45% { transform: scale(1.7); } } /* cumplido: anillos de luz que salen de la meta, cada poco */ .rtm-hecho .rtm-ru-anillo { animation: rtmRuAnillo 2.8s ease-out infinite; } .rtm-hecho .rtm-ru-anillo + .rtm-ru-anillo { animation-delay: 1.4s; } @keyframes rtmRuAnillo { 0% { opacity: .9; transform: scale(.6); } 60%, 100% { opacity: 0; transform: scale(2.6); } } /* recién enviado: la ficha salta a la meta, la bandera sube de golpe y los hitos se encienden en ola */ .rtm-recien .rtm-ru-ficha { animation: rtmRuLlega .6s .1s cubic-bezier(.3,1.3,.5,1) backwards; } @keyframes rtmRuLlega { from { transform: translateX(470px); } 50% { transform: translateX(505px) translateY(-26px); } } .rtm-recien .rtm-ru-bandera { animation: rtmRuIza .6s .3s cubic-bezier(.3,1.6,.5,1) backwards; } @keyframes rtmRuIza { from { transform: translateY(26px); } 60% { transform: translateY(-6px); } } .rtm-recien .rtm-ru-hito { animation: rtmRuHito .5s .15s cubic-bezier(.3,1.7,.5,1) backwards; } .rtm-recien .rtm-ru-h2 { animation-delay: .25s; } .rtm-recien .rtm-ru-h3 { animation-delay: .35s; } .rtm-recien .rtm-ru-anillo { animation-delay: .5s; } .rtm-recien .rtm-ru-anillo + .rtm-ru-anillo { animation-delay: .75s; } } /* juegos-mundo-memoria-phishing.css */ /* [CERT] 20-oct · mundo propio del juego (ver BRIEF_IDENTIDAD.md) */ /* Memoria de conceptos (fucsia): mesa de vidrio con cartas de dorso propio, volteo 3D notorio y pareja que se ilumina. Detecta el phishing (naranja): ventana de cliente de correo que llega a la bandeja, anzuelo colgando y sello que cae con golpe. Fondo propio: capa .jw-fondo (la pone juegos-extra.js al principio de #main) con dibujos del tema que flotan despacio. Todo decorativo va con aria-hidden y sin eventos; con «reducir movimiento» todo queda quieto. Colores solo --jg-* (y verde/rojo de acierto/fallo). */ /* ---------- Fondo propio (los dos juegos) ---------- */ #main[data-juego="memoria"], #main[data-juego="phishing"] { position: relative; isolation: isolate; } #main .jw-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--jg-2, #c026d3); } #main .jw-p { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; translate: -50% -50%; rotate: var(--r); opacity: .12; } #main .jw-p svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; } :root[data-theme="dark"] #main .jw-fondo { color: var(--jg-1, #e879f9); } :root[data-theme="dark"] #main .jw-p { opacity: .15; } @media (max-width: 600px) { #main .jw-p:nth-child(n+7) { display: none; } #main .jw-p { width: calc(var(--s) * .72); } } /* ======================= MEMORIA ======================= */ /* La mesa: tapete de vidrio fucsia con borde de luz y el medallón del juego arriba */ #main[data-juego="memoria"] .jm-mesa { position: relative; margin-top: 30px; padding: 40px 18px 18px; border-radius: 28px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--jg-chispa, #f0abfc) 30%, transparent), transparent 70%), linear-gradient(165deg, color-mix(in srgb, var(--jg-papel, #fae8ff) 72%, transparent), color-mix(in srgb, var(--jg-1, #e879f9) 16%, transparent)); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 7px color-mix(in srgb, var(--jg-1, #e879f9) 10%, transparent), 0 34px 60px -40px var(--jg-3, #a21caf); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); } #main[data-juego="memoria"] .jm-medallon { position: absolute; left: 50%; top: -34px; translate: -50% 0; width: 92px; height: 70px; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.92), color-mix(in srgb, var(--jg-papel, #fae8ff) 80%, transparent)); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 14px 26px -14px var(--jg-3, #a21caf); pointer-events: none; z-index: 2; } #main[data-juego="memoria"] .jm-medallon .figura { display: block; width: 76px; height: auto; background: none; box-shadow: none; } #main[data-juego="memoria"] .jm-medallon .figura::before, #main[data-juego="memoria"] .jm-medallon .figura::after { display: none; } #main[data-juego="memoria"] .jm-medallon svg { display: block; width: 100%; height: auto; padding: 0; } :root[data-theme="dark"] #main[data-juego="memoria"] .jm-mesa { background: linear-gradient(165deg, color-mix(in srgb, var(--jg-2, #c026d3) 18%, rgba(16,18,48,.6)), color-mix(in srgb, var(--jg-3, #a21caf) 14%, rgba(11,13,36,.55))); border-color: color-mix(in srgb, var(--jg-chispa, #f0abfc) 30%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 34px 60px -40px #000; } :root[data-theme="dark"] #main[data-juego="memoria"] .jm-medallon { background: linear-gradient(160deg, rgba(40,30,70,.92), rgba(24,20,52,.9)); border-color: color-mix(in srgb, var(--jg-chispa, #f0abfc) 40%, transparent); } /* Dorso propio: vidrio fucsia con trama de rombos, marco de naipe y el dibujo del juego en un medallón blanco */ #main[data-juego="memoria"] .jx-carta { perspective: 640px; } #main[data-juego="memoria"] .jx-dorso { color: #fff; border: 1px solid rgba(255,255,255,.6); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 4l5 9-5 9-5-9z' fill='%23fff' fill-opacity='.16'/%3E%3C/svg%3E") center / 26px 26px, linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 38%), linear-gradient(150deg, var(--jg-1, #e879f9) 0%, var(--jg-2, #c026d3) 55%, var(--jg-3, #a21caf) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 12px 22px -16px var(--jg-3, #a21caf); } #main[data-juego="memoria"] .jx-dorso::after { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(255,255,255,.62); border-radius: calc(var(--radio) - 6px); pointer-events: none; } #main[data-juego="memoria"] .jx-dorso .pc-trama { display: none; } #main[data-juego="memoria"] .jx-dorso .figura.pl-logo { inset: auto; left: 50%; top: 50%; translate: -50% -50%; width: auto; height: 62%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,255,255,.95) 0 56%, rgba(255,255,255,.4) 58%, rgba(255,255,255,0) 72%); } #main[data-juego="memoria"] .jx-dorso .figura.pl-logo svg { width: 78%; height: auto; filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--jg-3, #a21caf) 35%, transparent)); } #main[data-juego="memoria"] .jx-carta:hover:not(.volteada) .jx-dorso { filter: brightness(1.08); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 4l5 9-5 9-5-9z' fill='%23fff' fill-opacity='.2'/%3E%3C/svg%3E") center / 26px 26px, linear-gradient(115deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 40%), linear-gradient(150deg, var(--jg-1, #e879f9) 0%, var(--jg-2, #c026d3) 55%, var(--jg-3, #a21caf) 100%); } :root[data-theme="dark"] #main[data-juego="memoria"] .jx-dorso { border-color: color-mix(in srgb, var(--jg-chispa, #f0abfc) 45%, transparent); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 4l5 9-5 9-5-9z' fill='%23fff' fill-opacity='.12'/%3E%3C/svg%3E") center / 26px 26px, linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%), linear-gradient(150deg, var(--jg-2, #c026d3) 0%, var(--jg-3, #a21caf) 60%, #4a0f52 100%); } /* Pareja encontrada: borde de luz fucsia que queda */ #main[data-juego="memoria"] .jx-carta.hecha .jx-frente { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jg-1, #e879f9) 70%, transparent); } #main[data-juego="memoria"] .jx-carta::after { content: ""; position: absolute; inset: -5px; border-radius: calc(var(--radio) + 5px); border: 3px solid var(--jg-1, #e879f9); box-shadow: 0 0 22px 2px color-mix(in srgb, var(--jg-2, #c026d3) 70%, transparent); opacity: 0; pointer-events: none; } #main[data-juego="memoria"] .jx-dato { transition: none; } @media (prefers-reduced-motion: no-preference) { /* Fondo: cada dibujo deriva y gira despacio */ #main .jw-p { animation: jw-deriva var(--t) ease-in-out var(--d) infinite alternate; } #main .jw-p:nth-child(even) { animation-name: jw-deriva2; } /* Reparto: cada carta sale del centro de la mesa girando y vuela a su sitio, una tras otra */ #main[data-juego="memoria"] .jx-tablero.jxa-reparto > .jx-carta .jx-carta-in { animation: jm-reparte .5s cubic-bezier(.2,.85,.25,1.08) both; animation-delay: calc(var(--k, 0) * 28ms); } #main[data-juego="memoria"] .jm-medallon { animation: jm-medallon .55s cubic-bezier(.3,1.5,.5,1) both, jm-flota 4.8s ease-in-out .6s infinite; } /* Volteo 3D notorio: la carta se levanta hacia ti mientras gira (y al volver a taparse, igual) */ #main[data-juego="memoria"] .jx-carta .jx-carta-in { transition: transform .56s cubic-bezier(.3,.7,.2,1.15), translate .2s ease-out; } #main[data-juego="memoria"] .jx-tablero > .jx-carta.volteada .jx-carta-in { animation: jm-alza .56s cubic-bezier(.3,.7,.3,1); } /* Pareja: salto, anillo de luz que se expande y brillo que cruza la carta */ #main[data-juego="memoria"] .jx-carta.hecha { animation: jm-salto .62s cubic-bezier(.3,1.5,.5,1) .32s both; } #main[data-juego="memoria"] .jx-carta.hecha::after { animation: jm-anillo .7s ease-out .36s both; } #main[data-juego="memoria"] .jx-carta.hecha .jx-frente::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 48%, transparent 66%) no-repeat; background-size: 260% 100%; animation: jm-brillo .7s ease-out .4s both; } #main[data-juego="memoria"] .jx-carta.hecha .jx-sello { animation: jm-pop .4s cubic-bezier(.3,1.7,.5,1) .55s both; } /* No coinciden: sacudida grande con destello rojo */ #main[data-juego="memoria"] .jx-carta.fallo { animation: jm-sacude .5s ease-in-out .3s; } #main[data-juego="memoria"] .jx-carta.fallo .jx-frente { animation: jxa-error .55s ease-out .3s; } #main[data-juego="memoria"] .jx-dato.jm-sube b { display: inline-block; animation: jm-pop .45s cubic-bezier(.3,1.7,.5,1); } /* Portada: las cartas del dibujo se mecen; final: la hoja entra volteándose como una carta */ #main[data-juego="memoria"] .p2-pantalla-logo svg { animation: jm-logo 4.4s ease-in-out infinite; transform-origin: 50% 60%; } #main[data-juego="memoria"] .jx-fin { animation: jm-fin .7s cubic-bezier(.2,.8,.25,1.05) both; transform-origin: 50% 40%; } } @keyframes jw-deriva { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(22px, -30px) rotate(12deg); } 100% { transform: translate(-16px, 16px) rotate(-9deg); } } @keyframes jw-deriva2 { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(-24px, 20px) rotate(-14deg) scale(1.08); } 100% { transform: translate(14px, -18px) rotate(8deg) scale(.95); } } @keyframes jm-reparte { 0% { opacity: 0; translate: var(--rx, 0) var(--ry, -40px); rotate: var(--rr, -12deg); scale: .5; } 35% { opacity: 1; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } } @keyframes jm-medallon { from { opacity: 0; scale: .3; rotate: -20deg; } } @keyframes jm-flota { 50% { translate: -50% -5px; } } @keyframes jm-alza { 0% { scale: 1; translate: 0 0; } 45% { scale: 1.16; translate: 0 -12px; } 100% { scale: 1; translate: 0 0; } } @keyframes jm-salto { 0% { translate: 0 0; scale: 1; } 40% { translate: 0 -16px; scale: 1.1; } 70% { translate: 0 2px; scale: .98; } 100% { translate: 0 0; scale: 1; } } @keyframes jm-anillo { 0% { opacity: 1; scale: .96; } 100% { opacity: 0; scale: 1.28; } } @keyframes jm-brillo { from { background-position: 130% 0; opacity: 1; } to { background-position: -30% 0; opacity: 0; } } @keyframes jm-pop { 0% { scale: .3; } 60% { scale: 1.35; } 100% { scale: 1; } } @keyframes jm-sacude { 15% { translate: -10px 0; rotate: -4deg; } 35% { translate: 9px 0; rotate: 3.5deg; } 55% { translate: -7px 0; rotate: -2.5deg; } 75% { translate: 4px 0; rotate: 1deg; } } @keyframes jm-logo { 0%, 100% { transform: perspective(500px) rotateY(-16deg) rotate(-3deg); } 50% { transform: perspective(500px) rotateY(16deg) rotate(3deg) translateY(-4px); } } @keyframes jm-fin { from { opacity: 0; transform: perspective(1300px) rotateY(-78deg) scale(.9); } } @media (max-width: 600px) { #main[data-juego="memoria"] .jm-mesa { margin-top: 26px; padding: 30px 8px 10px; border-radius: 20px; } #main[data-juego="memoria"] .jm-medallon { top: -28px; width: 74px; height: 56px; border-radius: 18px; } #main[data-juego="memoria"] .jm-medallon .figura { width: 60px; } #main[data-juego="memoria"] .jx-dorso::after { inset: 5px; } } /* ======================= PHISHING ======================= */ /* Ventana de cliente de correo: barra con luces, «nuevo» y botones; cabecera con avatar del remitente */ #main[data-juego="phishing"] .jp-correo { position: relative; display: block; padding: 0; overflow: visible; border-radius: 18px; background: linear-gradient(170deg, rgba(255,255,255,.94), color-mix(in srgb, var(--jg-papel, #ffedd5) 55%, rgba(255,255,255,.8))); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--jg-1, #fb923c) 22%, transparent), 0 26px 44px -28px var(--jg-3, #c2410c); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } #main[data-juego="phishing"] .jp-barra { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 17px 17px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--jg-1, #fb923c) 26%, rgba(255,255,255,.7)), color-mix(in srgb, var(--jg-1, #fb923c) 12%, rgba(255,255,255,.5))); border-bottom: 1px solid color-mix(in srgb, var(--jg-1, #fb923c) 30%, transparent); } #main[data-juego="phishing"] .jp-luces { display: flex; gap: 6px; } #main[data-juego="phishing"] .jp-luces i { width: 11px; height: 11px; border-radius: 50%; background: var(--jg-2, #ea580c); box-shadow: inset 0 1px 1px rgba(255,255,255,.6); } #main[data-juego="phishing"] .jp-luces i:nth-child(2) { background: var(--jg-1, #fb923c); } #main[data-juego="phishing"] .jp-luces i:nth-child(3) { background: var(--jg-chispa, #fdba74); } #main[data-juego="phishing"] .jp-nuevo { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; color: #fff; background: var(--jg-2, #ea580c); font: 700 12px/1 var(--font-2, inherit); box-shadow: 0 4px 10px -4px var(--jg-3, #c2410c); } #main[data-juego="phishing"] .jp-nuevo svg { width: 15px; height: 15px; } #main[data-juego="phishing"] .jp-botones { margin-left: auto; display: flex; gap: 4px; } #main[data-juego="phishing"] .jp-botones i { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); } #main[data-juego="phishing"] .jp-botones svg { width: 15px; height: 15px; fill: none; stroke: var(--jg-3, #c2410c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #main[data-juego="phishing"] .jp-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px 0; } #main[data-juego="phishing"] .jp-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; font: 700 18px/1 var(--font-2, inherit); background: linear-gradient(150deg, var(--jg-1, #fb923c), var(--jg-3, #c2410c)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -8px var(--jg-3, #c2410c); border: 2px solid #fff; } #main[data-juego="phishing"] .jp-cab-txt { display: grid; gap: 3px; min-width: 0; } #main[data-juego="phishing"] .jp-correo .jx-msg-texto { margin: 12px 18px 0; padding: 12px 0 18px; } /* El anzuelo cuelga sobre la ventana */ #main[data-juego="phishing"] .jp-anzuelo { position: absolute; right: 27%; top: -52px; width: 26px; height: 60px; pointer-events: none; z-index: 1; transform-origin: 65% 0; } #main[data-juego="phishing"] .jp-anzuelo svg { display: block; width: 100%; height: 100%; overflow: visible; } #main[data-juego="phishing"] .jp-sedal { fill: none; stroke: color-mix(in srgb, var(--jg-3, #c2410c) 55%, transparent); stroke-width: 1.6; } #main[data-juego="phishing"] .jp-gancho-b { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; } #main[data-juego="phishing"] .jp-gancho { fill: none; stroke: var(--jg-2, #ea580c); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; } #main[data-juego="phishing"] .jp-nudo { fill: var(--jg-3, #c2410c); stroke: #fff; stroke-width: 2; } /* Veredicto: la ventana se tiñe en verde (legítimo) o rojo (fraude) y el sello es grande */ #main[data-juego="phishing"] .jp-correo.jp-es-legit { box-shadow: inset 0 1px 0 #fff, 0 0 0 2px rgba(20,131,59,.45), 0 26px 44px -28px rgba(20,131,59,.7); } #main[data-juego="phishing"] .jp-correo.jp-es-fraude { box-shadow: inset 0 1px 0 #fff, 0 0 0 2px rgba(194,39,45,.45), 0 26px 44px -28px rgba(194,39,45,.7); } #main[data-juego="phishing"] .jp-correo .jxa-sello { top: -20px; right: 16px; z-index: 3; padding: 5px 16px 4px; border-width: 4px; border-radius: 10px; font-size: 25px; rotate: -10deg; box-shadow: 0 10px 22px -12px currentColor; } #main[data-juego="phishing"] .jp-correo .jxa-sello::after { content: ""; position: absolute; inset: -4px; border: 3px solid currentColor; border-radius: 12px; opacity: 0; pointer-events: none; } /* Medallón de la carta: el sobre con anzuelo se mece */ #main[data-juego="phishing"] .pc-medallon svg { transform-origin: 70% 10%; } /* Oscuro */ :root[data-theme="dark"] #main[data-juego="phishing"] .jp-correo { background: linear-gradient(170deg, rgba(36,30,58,.9), rgba(20,18,44,.88)); border-color: color-mix(in srgb, var(--jg-chispa, #fdba74) 28%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 44px -28px #000; } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-barra { background: linear-gradient(180deg, color-mix(in srgb, var(--jg-2, #ea580c) 30%, rgba(30,26,52,.9)), color-mix(in srgb, var(--jg-2, #ea580c) 14%, rgba(24,20,46,.9))); border-bottom-color: color-mix(in srgb, var(--jg-chispa, #fdba74) 22%, transparent); } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-botones i { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-botones svg { stroke: var(--jg-chispa, #fdba74); } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-avatar { border-color: rgba(255,255,255,.25); } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-gancho-b { stroke: #1a1838; } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-gancho { stroke: var(--jg-1, #fb923c); } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-sedal { stroke: color-mix(in srgb, var(--jg-chispa, #fdba74) 55%, transparent); } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-correo.jp-es-legit { box-shadow: 0 0 0 2px rgba(74,222,128,.5), 0 26px 44px -28px #000; } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-correo.jp-es-fraude { box-shadow: 0 0 0 2px rgba(255,122,126,.55), 0 26px 44px -28px #000; } @media (prefers-reduced-motion: no-preference) { /* El correo llega a la bandeja: cae con rebote, salta el «nuevo», el avatar y las líneas aparecen en orden */ #main[data-juego="phishing"] .jp-correo { animation: jp-llega .62s cubic-bezier(.25,.9,.3,1.18) both; } #main[data-juego="phishing"] .jp-nuevo { animation: jp-nuevo .42s cubic-bezier(.3,1.7,.5,1) .38s both; } #main[data-juego="phishing"] .jp-avatar { animation: jp-avatar .45s cubic-bezier(.3,1.6,.5,1) .3s both; } #main[data-juego="phishing"] .jp-correo .jx-msg-linea, #main[data-juego="phishing"] .jp-correo .jx-msg-texto { animation: jxa-linea .34s ease-out both; } #main[data-juego="phishing"] .jp-cab-txt > p:nth-child(1) { animation-delay: .36s; } #main[data-juego="phishing"] .jp-cab-txt > p:nth-child(2) { animation-delay: .44s; } #main[data-juego="phishing"] .jp-correo .jx-msg-texto { animation-delay: .52s; } /* El anzuelo baja y se mece; al sellar, lo jalan hacia arriba */ #main[data-juego="phishing"] .jp-anzuelo { animation: jp-baja .6s cubic-bezier(.3,1.4,.5,1) .2s both, jp-mece 2.6s ease-in-out .8s infinite; } #main[data-juego="phishing"] .jp-correo.jxa-sellado .jp-anzuelo { animation: jp-jala .45s cubic-bezier(.5,0,.8,.4) forwards; } /* Sello: cae desde lejos, golpea (la ventana se hunde) y deja un anillo de tinta */ #main[data-juego="phishing"] .jp-correo .jxa-sello { animation: jp-sello .34s cubic-bezier(.5,0,.75,0) both; } #main[data-juego="phishing"] .jp-correo .jxa-sello::after { animation: jp-tinta .55s ease-out .32s both; } #main[data-juego="phishing"] .jp-correo.jxa-sellado { animation: jp-golpe .4s ease-out .3s; } #main[data-juego="phishing"] .pc-medallon svg { animation: jp-mece-logo 3s ease-in-out infinite; } #main[data-juego="phishing"] .p2-pantalla-logo svg { animation: jp-mece-logo 2.8s ease-in-out infinite; transform-origin: 70% 10%; } /* Final: la hoja entra como un correo que llega */ #main[data-juego="phishing"] .jx-fin { animation: jp-llega .65s cubic-bezier(.25,.9,.3,1.15) both; } } @keyframes jp-llega { 0% { opacity: 0; transform: translateY(-60px) scale(.86) rotate(-3deg); } 60% { opacity: 1; transform: translateY(8px) scale(1.01) rotate(.6deg); } 100% { transform: none; } } @keyframes jp-nuevo { from { scale: 0; } 60% { scale: 1.3; } } @keyframes jp-avatar { from { scale: 0; rotate: -90deg; } } @keyframes jp-baja { from { translate: 0 -70px; opacity: 0; } } @keyframes jp-mece { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } } @keyframes jp-jala { 0% { rotate: 0deg; translate: 0 0; opacity: 1; } 30% { translate: 0 6px; } 100% { translate: 0 -90px; opacity: 0; } } @keyframes jp-sello { 0% { opacity: 0; scale: 3.4; rotate: -32deg; } 85% { opacity: 1; scale: .9; rotate: -10deg; } 100% { opacity: .95; scale: 1; rotate: -10deg; } } @keyframes jp-tinta { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 1.6; } } @keyframes jp-golpe { 0% { transform: none; } 25% { transform: translateY(6px) scale(.975); } 60% { transform: translateY(-2px) scale(1.005); } 100% { transform: none; } } @keyframes jp-mece-logo { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-2px); } } @media (max-width: 600px) { #main[data-juego="phishing"] .jp-barra { padding: 8px 10px; gap: 8px; } #main[data-juego="phishing"] .jp-botones i { width: 24px; height: 22px; } #main[data-juego="phishing"] .jp-botones i:nth-child(n+3) { display: none; } #main[data-juego="phishing"] .jp-cab { padding: 12px 12px 0; gap: 10px; } #main[data-juego="phishing"] .jp-avatar { width: 34px; height: 34px; font-size: 15px; } #main[data-juego="phishing"] .jp-correo .jx-msg-texto { margin: 10px 12px 0; padding: 10px 0 14px; } #main[data-juego="phishing"] .jp-correo .jxa-sello { font-size: 19px; padding: 4px 11px 3px; border-width: 3px; top: -16px; right: 10px; } #main[data-juego="phishing"] .jp-anzuelo { right: 30%; top: -44px; width: 22px; height: 52px; } } /* ============ RONDA 2 (20-oct): escenas propias de inicio y final + botones de Phishing ============ */ /* Las escenas las pinta juegos-extra.js dentro de .jx-escena (aria-hidden). Inicio: ocupa la «pantalla» de la portada (misma celda de la cuadrícula, encima del logo, que queda oculto). Final: franja detrás del oso, con piezas a los dos lados. Sin confeti. */ #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-escena { pointer-events: none; } #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-intro > .jx-escena-inicio { grid-area: fig; position: relative; z-index: 3; align-self: stretch; justify-self: stretch; container-type: size; overflow: hidden; border-radius: 26px; } #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-intro > .p2-pantalla-logo .figura { visibility: hidden; } #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-fin { position: relative; isolation: isolate; } #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-fin > .jx-escena-final { position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: -1; container-type: size; overflow: hidden; border-radius: 28px 28px 0 0; } #main:is([data-juego="memoria"], [data-juego="phishing"]) :is(.jme, .jpe) { position: absolute; inset: 0; } #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-escena :is(.jme-lado, .jpe-lado) { position: absolute; top: 0; bottom: 0; width: 40%; } #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-escena :is(.jme-izq, .jpe-izq) { left: 0; } #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-escena :is(.jme-der, .jpe-der) { right: 0; } /* ---------- Memoria: la mesa de naipes ---------- */ #main[data-juego="memoria"] .jme { --w: 21cqmin; } #main[data-juego="memoria"] .jme-tapete { position: absolute; left: 50%; top: 58%; width: 88cqw; height: 56cqh; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--jg-1, #e879f9) 34%, transparent), color-mix(in srgb, var(--jg-2, #c026d3) 14%, transparent) 72%, transparent); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), inset 0 -12px 30px -12px color-mix(in srgb, var(--jg-3, #a21caf) 45%, transparent); } #main[data-juego="memoria"] .jme-mazo { position: absolute; left: 50%; top: 84%; width: calc(var(--w) * .8); aspect-ratio: 5 / 7; translate: -50% -50%; rotate: 90deg; } #main[data-juego="memoria"] .jme-mazo i, #main[data-juego="memoria"] .jme-dorso { position: absolute; inset: 0; border-radius: 14% / 10%; border: 1px solid rgba(255,255,255,.7); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 2l3 5-3 5-3-5z' fill='%23fff' fill-opacity='.22'/%3E%3C/svg%3E") center / 14px 14px, linear-gradient(115deg, rgba(255,255,255,.36), rgba(255,255,255,0) 40%), linear-gradient(150deg, var(--jg-1, #e879f9), var(--jg-2, #c026d3) 55%, var(--jg-3, #a21caf)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.18), 0 8px 16px -10px var(--jg-3, #a21caf); } #main[data-juego="memoria"] .jme-mazo i:nth-child(2) { translate: -3px -3px; } #main[data-juego="memoria"] .jme-mazo i:nth-child(3) { translate: -6px -6px; } #main[data-juego="memoria"] .jme-dorso::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; translate: -50% -50%; rotate: 45deg; border-radius: 18%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 3px rgba(255,255,255,.3); } #main[data-juego="memoria"] .jme-naipe { position: absolute; width: var(--w); aspect-ratio: 5 / 7; perspective: 420px; } #main[data-juego="memoria"] .jme-giro { position: absolute; inset: 0; transform-style: preserve-3d; } #main[data-juego="memoria"] .jme-dorso, #main[data-juego="memoria"] .jme-frente { -webkit-backface-visibility: hidden; backface-visibility: hidden; } #main[data-juego="memoria"] .jme-frente { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; align-content: center; justify-items: center; gap: 9%; padding: 12% 10%; border-radius: 14% / 10%; background: linear-gradient(165deg, #fff, color-mix(in srgb, var(--jg-papel, #fae8ff) 85%, #fff)); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jg-1, #e879f9) 40%, transparent), 0 8px 16px -10px var(--jg-3, #a21caf); } #main[data-juego="memoria"] .jme-frente i { display: block; width: 76%; height: 7%; min-height: 3px; border-radius: 9px; background: color-mix(in srgb, var(--jg-3, #a21caf) 26%, transparent); } #main[data-juego="memoria"] .jme-frente i:first-child { width: 52%; height: 13%; background: var(--jg-2, #c026d3); } #main[data-juego="memoria"] .jme-frente.jme-fd i:first-child { background: var(--jg-3, #a21caf); } #main[data-juego="memoria"] .jme-frente i:last-child { width: 54%; } #main[data-juego="memoria"] .jme-chispa { position: absolute; left: 82%; top: 16%; width: 7cqmin; aspect-ratio: 1; background: var(--jg-2, #c026d3); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); } #main[data-juego="memoria"] .jme-chispa2 { left: 14%; top: 26%; width: 4.5cqmin; background: var(--jg-1, #e879f9); } #main[data-juego="memoria"] .jme-anillo { position: absolute; border-radius: 50%; border: 3px solid var(--jg-1, #e879f9); box-shadow: 0 0 22px color-mix(in srgb, var(--jg-2, #c026d3) 70%, transparent); opacity: 0; } /* Inicio: abanico de 4 cartas sobre el tapete; las dos del medio son la pareja */ #main[data-juego="memoria"] .jme-ini .jme-naipe { left: 50%; top: 46%; margin: calc(var(--w) * -.7) 0 0 calc(var(--w) * -.5); transform: translate(calc(var(--dx) * var(--w)), var(--dy, 0px)) rotate(var(--r)); } #main[data-juego="memoria"] .jme-ini .jme-n0 { --dx: -1.45; --dy: 5cqmin; --r: -17deg; } #main[data-juego="memoria"] .jme-ini .jme-n1 { --dx: -.5; --r: -6deg; z-index: 2; } #main[data-juego="memoria"] .jme-ini .jme-n2 { --dx: .5; --r: 6deg; z-index: 2; } #main[data-juego="memoria"] .jme-ini .jme-n3 { --dx: 1.45; --dy: 5cqmin; --r: 17deg; } #main[data-juego="memoria"] .jme-ini .jme-anillo { left: 50%; top: 44%; width: calc(var(--w) * 2.6); aspect-ratio: 1; translate: -50% -50%; } /* Final: dos parejas a cada lado del oso, ya destapadas */ #main[data-juego="memoria"] .jme-fin { --w: min(8cqw, 32cqh); } #main[data-juego="memoria"] .jme-par { position: absolute; top: 50%; width: var(--w); aspect-ratio: 5 / 7; margin: calc(var(--w) * -.7) 0 0 calc(var(--w) * -.5); } #main[data-juego="memoria"] .jme-izq .jme-par:nth-child(1) { left: 30%; top: 44%; } #main[data-juego="memoria"] .jme-izq .jme-par:nth-child(2) { left: 68%; top: 58%; } #main[data-juego="memoria"] .jme-der .jme-par:nth-child(1) { left: 32%; top: 58%; } #main[data-juego="memoria"] .jme-der .jme-par:nth-child(2) { left: 70%; top: 44%; } #main[data-juego="memoria"] .jme-par .jme-naipe { inset: 0; } #main[data-juego="memoria"] .jme-par .jme-naipe:nth-child(1) { transform: translateX(-30%) rotate(-11deg); } #main[data-juego="memoria"] .jme-par .jme-naipe:nth-child(2) { transform: translateX(30%) translateY(4%) rotate(9deg); } #main[data-juego="memoria"] .jme-fin .jme-giro { transform: rotateY(180deg); } #main[data-juego="memoria"] .jme-par .jme-frente { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jg-1, #e879f9) 70%, transparent), 0 0 16px color-mix(in srgb, var(--jg-1, #e879f9) 45%, transparent), 0 8px 16px -10px var(--jg-3, #a21caf); } #main[data-juego="memoria"] .jme-par .jme-anillo { left: 50%; top: 50%; width: calc(var(--w) * 2.2); aspect-ratio: 1; translate: -50% -50%; z-index: -1; } #main[data-juego="memoria"] .jme-fin .jme-chispa { left: 37%; top: 20%; } #main[data-juego="memoria"] .jme-fin .jme-chispa2 { left: 64%; top: 70%; } /* Oscuro */ :root[data-theme="dark"] #main[data-juego="memoria"] .jme-tapete { background: radial-gradient(closest-side, color-mix(in srgb, var(--jg-2, #c026d3) 34%, transparent), color-mix(in srgb, var(--jg-3, #a21caf) 16%, transparent) 72%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-chispa, #f0abfc) 30%, transparent); } :root[data-theme="dark"] #main[data-juego="memoria"] .jme-frente { background: linear-gradient(165deg, rgba(48,34,78,.96), rgba(28,22,58,.96)); border-color: color-mix(in srgb, var(--jg-chispa, #f0abfc) 40%, transparent); } :root[data-theme="dark"] #main[data-juego="memoria"] .jme-frente i { background: color-mix(in srgb, var(--jg-chispa, #f0abfc) 32%, transparent); } :root[data-theme="dark"] #main[data-juego="memoria"] .jme-frente i:first-child { background: var(--jg-1, #e879f9); } :root[data-theme="dark"] #main[data-juego="memoria"] .jme-frente.jme-fd i:first-child { background: var(--jg-chispa, #f0abfc); } /* ---------- Phishing: la bandeja de correo ---------- */ #main[data-juego="phishing"] .jpe-ventana { position: absolute; left: 9%; right: 9%; top: 14%; bottom: 9%; display: flex; flex-direction: column; gap: 3%; padding-bottom: 4%; border-radius: 5cqmin; overflow: hidden; background: linear-gradient(170deg, rgba(255,255,255,.92), color-mix(in srgb, var(--jg-papel, #ffedd5) 60%, rgba(255,255,255,.75))); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--jg-1, #fb923c) 24%, transparent), 0 20px 34px -24px var(--jg-3, #c2410c); } #main[data-juego="phishing"] .jpe-barra { flex: none; height: 15%; display: flex; align-items: center; gap: 2.2cqmin; padding: 0 4cqmin; background: linear-gradient(180deg, color-mix(in srgb, var(--jg-1, #fb923c) 28%, rgba(255,255,255,.7)), color-mix(in srgb, var(--jg-1, #fb923c) 12%, rgba(255,255,255,.5))); border-bottom: 1px solid color-mix(in srgb, var(--jg-1, #fb923c) 30%, transparent); } #main[data-juego="phishing"] .jpe-barra > i { width: 3cqmin; aspect-ratio: 1; border-radius: 50%; background: var(--jg-2, #ea580c); } #main[data-juego="phishing"] .jpe-barra > i:nth-child(2) { background: var(--jg-1, #fb923c); } #main[data-juego="phishing"] .jpe-barra > i:nth-child(3) { background: var(--jg-chispa, #fdba74); } #main[data-juego="phishing"] .jpe-buzon { position: relative; margin-left: auto; width: 9cqmin; } #main[data-juego="phishing"] .jpe-buzon svg { display: block; width: 100%; height: auto; } #main[data-juego="phishing"] .jpe-buzon b { position: absolute; right: -2.2cqmin; top: -2cqmin; width: 4cqmin; aspect-ratio: 1; border-radius: 50%; background: var(--jg-2, #ea580c); box-shadow: 0 0 0 2px #fff; } #main[data-juego="phishing"] :is(.jpe-buzon, .jpe-mini, .jpe-cae) .jpe-s-c { fill: #fff; stroke: var(--jg-2, #ea580c); stroke-width: 4; } #main[data-juego="phishing"] :is(.jpe-buzon, .jpe-mini, .jpe-cae) .jpe-s-l { fill: none; stroke: var(--jg-2, #ea580c); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } #main[data-juego="phishing"] .jpe-fila { flex: 1; min-height: 0; display: flex; align-items: center; gap: 3cqmin; margin: 0 3.5cqmin; padding: 0 3cqmin; border-radius: 3cqmin; background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #fb923c) 18%, transparent); } #main[data-juego="phishing"] .jpe-av { flex: none; width: 8cqmin; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(150deg, var(--jg-1, #fb923c), var(--jg-3, #c2410c)); } #main[data-juego="phishing"] .jpe-lin { flex: 1; display: grid; gap: 1.6cqmin; } #main[data-juego="phishing"] .jpe-lin i { display: block; height: 2.2cqmin; border-radius: 9px; background: color-mix(in srgb, var(--jg-3, #c2410c) 30%, transparent); } #main[data-juego="phishing"] .jpe-lin i + i { width: 62%; background: color-mix(in srgb, var(--jg-3, #c2410c) 16%, transparent); } #main[data-juego="phishing"] .jpe-marca { position: relative; flex: none; width: 8cqmin; aspect-ratio: 1; color: var(--jg-3, #c2410c); } #main[data-juego="phishing"] .jpe-marca .jp-ic { width: 100%; height: 100%; } #main[data-juego="phishing"] .jpe-pez { background: color-mix(in srgb, var(--jg-papel, #ffedd5) 80%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-2, #ea580c) 55%, transparent); } #main[data-juego="phishing"] .jpe-pez .jpe-marca { color: var(--jg-2, #ea580c); } #main[data-juego="phishing"] .jpe-anzuelo { position: absolute; left: 70%; top: 0; height: 66cqh; aspect-ratio: 40 / 150; z-index: 2; transform-origin: 65% 0; } #main[data-juego="phishing"] .jpe-anzuelo .jp-gancho { stroke-width: 3.6; } #main[data-juego="phishing"] .jpe-anzuelo .jp-gancho-b { stroke-width: 7; } #main[data-juego="phishing"] .jpe-anzuelo svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Iconos de línea (escudo, anzuelo) que comparten botones y escenas */ #main[data-juego="phishing"] .jp-ic { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #main[data-juego="phishing"] .jp-ic > path:first-child { fill: color-mix(in srgb, currentColor 16%, transparent); } #main[data-juego="phishing"] .jp-ic circle { fill: currentColor; stroke: none; } #main[data-juego="phishing"] .jp-ic-alerta { position: absolute; right: -14%; top: -12%; width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px -2px var(--jg-3, #c2410c); } #main[data-juego="phishing"] .jp-ic-alerta svg { display: block; width: 76%; height: 76%; } #main[data-juego="phishing"] .jp-ic-alerta path:first-child { fill: var(--jg-2, #ea580c); stroke: var(--jg-2, #ea580c); stroke-width: 1.5; stroke-linejoin: round; } #main[data-juego="phishing"] .jp-ic-alerta .jp-ic-v { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; } /* Final: bandeja limpia (sobres que caen y escudo) y un sobre sellado por mensaje */ #main[data-juego="phishing"] .jpe-bandeja { position: absolute; left: 50%; top: 58%; width: min(17cqw, 46cqh); aspect-ratio: 1.25; translate: -50% -50%; } #main[data-juego="phishing"] .jpe-caja { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; border-radius: 10px 10px 16px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--jg-1, #fb923c) 30%, rgba(255,255,255,.75)), color-mix(in srgb, var(--jg-2, #ea580c) 22%, rgba(255,255,255,.55))); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 14px 22px -14px var(--jg-3, #c2410c); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } #main[data-juego="phishing"] .jpe-cae { position: absolute; left: 12%; width: 76%; bottom: calc(10% + var(--k) * 10%); rotate: calc((var(--k) - 1) * 6deg); } #main[data-juego="phishing"] .jpe-cae svg, #main[data-juego="phishing"] .jpe-mini > svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--jg-3, #c2410c) 30%, transparent)); } #main[data-juego="phishing"] .jpe-escudo { position: absolute; left: 50%; top: 9%; width: min(7.5cqw, 22cqh); aspect-ratio: 1; translate: -50% 0; color: var(--jg-2, #ea580c); } #main[data-juego="phishing"] .jpe-escudo .jp-ic { width: 100%; height: 100%; stroke-width: 2.2; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--jg-3, #c2410c) 35%, transparent)); } #main[data-juego="phishing"] .jpe-escudo .jp-ic > path:first-child { fill: color-mix(in srgb, var(--jg-papel, #ffedd5) 90%, #fff); } #main[data-juego="phishing"] .jpe-limpia .jpe-escudo .jp-ic > path:first-child { fill: var(--jg-2, #ea580c); stroke: var(--jg-3, #c2410c); } #main[data-juego="phishing"] .jpe-limpia .jpe-escudo .jp-ic-v { stroke: #fff; } #main[data-juego="phishing"] .jpe-abanico { position: absolute; left: 50%; top: 56%; width: min(11cqw, 32cqh); aspect-ratio: 64 / 46; translate: -50% -50%; } #main[data-juego="phishing"] .jpe-mini { position: absolute; inset: 0; transform: translateX(calc(var(--o) * 46%)) translateY(calc(var(--o) * var(--o) * 8%)) rotate(calc(var(--o) * 8deg)); } #main[data-juego="phishing"] .jpe-sello { position: absolute; left: -12%; top: -28%; width: 52%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid currentColor; background: rgba(255,255,255,.92); box-shadow: 0 4px 10px -4px currentColor; rotate: -12deg; } #main[data-juego="phishing"] .jpe-sello svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; } #main[data-juego="phishing"] .jpe-sello.jpe-si { color: #12805c; } #main[data-juego="phishing"] .jpe-sello.jpe-no { color: #c2272d; } /* Oscuro */ :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-ventana { background: linear-gradient(170deg, rgba(40,32,62,.94), rgba(22,19,46,.92)); border-color: color-mix(in srgb, var(--jg-chispa, #fdba74) 28%, transparent); box-shadow: 0 20px 34px -24px #000; } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-barra { background: linear-gradient(180deg, color-mix(in srgb, var(--jg-2, #ea580c) 32%, rgba(30,26,52,.9)), color-mix(in srgb, var(--jg-2, #ea580c) 14%, rgba(24,20,46,.9))); } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-fila { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-pez { background: color-mix(in srgb, var(--jg-2, #ea580c) 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #fb923c) 60%, transparent); } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-lin i { background: color-mix(in srgb, var(--jg-chispa, #fdba74) 34%, transparent); } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-lin i + i { background: color-mix(in srgb, var(--jg-chispa, #fdba74) 18%, transparent); } :root[data-theme="dark"] #main[data-juego="phishing"] :is(.jpe-marca, .jpe-pez .jpe-marca) { color: var(--jg-chispa, #fdba74); } :root[data-theme="dark"] #main[data-juego="phishing"] :is(.jpe-buzon, .jpe-mini, .jpe-cae) .jpe-s-c { fill: #2a2148; stroke: var(--jg-1, #fb923c); } :root[data-theme="dark"] #main[data-juego="phishing"] :is(.jpe-buzon, .jpe-mini, .jpe-cae) .jpe-s-l { stroke: var(--jg-1, #fb923c); } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-buzon b { box-shadow: 0 0 0 2px #2a2148; } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-caja { background: linear-gradient(180deg, color-mix(in srgb, var(--jg-2, #ea580c) 34%, rgba(30,26,52,.85)), color-mix(in srgb, var(--jg-3, #c2410c) 26%, rgba(22,19,46,.85))); border-color: color-mix(in srgb, var(--jg-chispa, #fdba74) 30%, transparent); } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-escudo { color: var(--jg-1, #fb923c); } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-escudo .jp-ic > path:first-child { fill: #2a2148; } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-limpia .jpe-escudo .jp-ic > path:first-child { fill: var(--jg-2, #ea580c); } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-sello { background: #1e1a3a; } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-sello.jpe-si { color: #4ade80; } :root[data-theme="dark"] #main[data-juego="phishing"] .jpe-sello.jpe-no { color: #ff7a7e; } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-ic-alerta { background: #1e1a3a; } /* ---------- Phishing: «Es legítimo / Es fraude» como acciones del cliente de correo ---------- */ #main[data-juego="phishing"] .jp-acciones .pc-frente { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 14px; row-gap: 3px; min-height: 92px; padding: 14px 18px; text-align: left; } #main[data-juego="phishing"] .jp-acciones .pl-letra { position: relative; grid-row: 1 / span 2; align-self: center; width: 54px; height: 54px; padding: 0; border-radius: 16px; transition: transform .25s cubic-bezier(.3,1.5,.5,1); } #main[data-juego="phishing"] .jp-acciones .pl-letra .jp-ic { width: 30px; height: 30px; } #main[data-juego="phishing"] .jp-accion-seguro .pl-letra { color: var(--jg-3, #c2410c); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--jg-papel, #ffedd5) 80%, #fff)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #fb923c) 55%, transparent), 0 6px 14px -8px var(--jg-3, #c2410c); } #main[data-juego="phishing"] .jp-accion-fraude .pl-letra { color: #fff; background: linear-gradient(160deg, var(--jg-1, #fb923c), var(--jg-2, #ea580c) 55%, var(--jg-3, #c2410c)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 16px -8px var(--jg-3, #c2410c); } #main[data-juego="phishing"] .jp-accion-fraude .pl-letra .jp-ic > path:first-child { fill: none; } #main[data-juego="phishing"] .jp-rotulo { align-self: end; font: 700 11px/1.15 var(--font-2, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--jg-3, #c2410c); } #main[data-juego="phishing"] .jp-acciones .pc-op-txt { align-self: start; margin: 0; font-size: 21px; font-weight: 700; } #main[data-juego="phishing"] .jp-acciones .opcion:is(:hover, :focus-visible):not(:disabled) .pl-letra { transform: translateY(-3px) rotate(-6deg) scale(1.06); } #main[data-juego="phishing"] .jp-acciones .opcion.correcta .pl-letra, #main[data-juego="phishing"] .jp-acciones .opcion.incorrecta .pl-letra { color: #fff; } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-accion-seguro .pl-letra { color: var(--jg-chispa, #fdba74); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--jg-chispa, #fdba74) 45%, transparent); } :root[data-theme="dark"] #main[data-juego="phishing"] .jp-rotulo { color: var(--jg-chispa, #fdba74); } @media (max-width: 600px) { #main[data-juego="memoria"] .jme-fin { --w: min(11cqw, 34cqh); } #main[data-juego="memoria"] .jme-lado { width: 30%; } #main[data-juego="memoria"] .jme-lado .jme-par:nth-child(2) { display: none; } #main[data-juego="memoria"] .jme-lado .jme-par:nth-child(1) { left: 50%; top: 50%; } #main[data-juego="phishing"] .jpe-lado { width: 30%; } #main[data-juego="phishing"] .jpe-bandeja { width: min(22cqw, 44cqh); } #main[data-juego="phishing"] .jpe-escudo { width: min(10cqw, 22cqh); } #main[data-juego="phishing"] .jpe-abanico { width: min(10cqw, 26cqh); left: 56%; } #main[data-juego="phishing"] .jpe-mini { transform: translateX(calc(var(--o) * 34%)) translateY(calc(var(--o) * var(--o) * 8%)) rotate(calc(var(--o) * 8deg)); } #main:is([data-juego="memoria"], [data-juego="phishing"]) .jx-fin > .jx-escena-final { height: 180px; } #main[data-juego="phishing"] .jp-acciones .pc-frente { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; min-height: 0; padding: 12px 8px 14px; row-gap: 4px; } #main[data-juego="phishing"] .jp-acciones .pl-letra { grid-row: auto; width: 46px; height: 46px; margin-bottom: 4px; } #main[data-juego="phishing"] .jp-acciones .pl-letra .jp-ic { width: 26px; height: 26px; } #main[data-juego="phishing"] .jp-rotulo { font-size: 9.5px; letter-spacing: .08em; } #main[data-juego="phishing"] .jp-acciones .pc-op-txt { font-size: 18px; } } /* Celular: la «pantalla» de la portada es chica (≈106 px): menos piezas y más grandes */ @container (max-width: 220px) { #main[data-juego="memoria"] .jme { --w: 33cqmin; } #main[data-juego="memoria"] .jme-ini :is(.jme-n0, .jme-n3), #main[data-juego="memoria"] .jme-ini .jme-chispa2 { display: none; } #main[data-juego="memoria"] .jme-ini .jme-naipe { top: 44%; } #main[data-juego="memoria"] .jme-ini .jme-n1 { --dx: -.48; } #main[data-juego="memoria"] .jme-ini .jme-n2 { --dx: .48; } #main[data-juego="memoria"] .jme-mazo { top: 86%; } #main[data-juego="phishing"] .jpe-ventana { left: 7%; right: 7%; top: 16%; bottom: 10%; gap: 5%; } #main[data-juego="phishing"] .jpe-fila:last-child, #main[data-juego="phishing"] .jpe-lin i + i, #main[data-juego="phishing"] .jpe-barra > i:nth-child(3) { display: none; } #main[data-juego="phishing"] .jpe-fila { margin: 0 5cqmin; padding: 0 4cqmin; gap: 4cqmin; } #main[data-juego="phishing"] .jpe-av, #main[data-juego="phishing"] .jpe-marca { width: 13cqmin; } #main[data-juego="phishing"] .jpe-lin i { height: 4cqmin; } #main[data-juego="phishing"] .jpe-buzon { width: 14cqmin; } #main[data-juego="phishing"] .jpe-anzuelo { height: 68cqh; } } @media (prefers-reduced-motion: no-preference) { /* Memoria · inicio: reparto en abanico, la pareja del medio se voltea, se ilumina y vuelve (bucle de 5,2 s) */ #main[data-juego="memoria"] .jme-ini .jme-naipe { animation: jme-reparte .55s cubic-bezier(.2,.85,.25,1.1) calc(.1s + var(--k) * .09s) both; } #main[data-juego="memoria"] .jme-ini :is(.jme-n1, .jme-n2) .jme-giro { animation: jme-voltea 5.2s cubic-bezier(.4,.1,.3,1) .9s infinite; } #main[data-juego="memoria"] .jme-ini .jme-n2 .jme-giro { animation-delay: 1.12s; } #main[data-juego="memoria"] .jme-ini .jme-anillo { animation: jme-anillo-ini 5.2s ease-out .9s infinite; } #main[data-juego="memoria"] .jme-ini .jme-mazo { animation: jme-mazo .5s cubic-bezier(.3,1.5,.5,1) both; } #main[data-juego="memoria"] .jme-chispa { animation: jme-chispa 2.6s ease-in-out infinite; } #main[data-juego="memoria"] .jme-chispa2 { animation-delay: -1.3s; } /* Memoria · final: las parejas llegan, se destapan una tras otra, brillan y luego flotan */ #main[data-juego="memoria"] .jme-par { animation: jme-llega .5s cubic-bezier(.25,.9,.3,1.2) calc(.08s + var(--p) * .16s) both, jme-flota 4.6s ease-in-out calc(1.6s + var(--p) * .4s) infinite; } #main[data-juego="memoria"] .jme-fin .jme-giro { animation: jme-destapa .6s cubic-bezier(.3,.7,.3,1.1) calc(.35s + var(--p, 0) * .16s + var(--k) * .05s) both; } #main[data-juego="memoria"] .jme-par .jme-anillo { animation: jme-anillo-fin .8s ease-out calc(.8s + var(--p) * .16s) both; } /* Phishing · inicio: los correos llegan a la bandeja; el anzuelo baja, pica el sospechoso y sube (bucle) */ #main[data-juego="phishing"] .jpe-ventana { animation: jp-llega .6s cubic-bezier(.25,.9,.3,1.18) both; } #main[data-juego="phishing"] .jpe-fila { animation: jpe-fila .5s cubic-bezier(.25,.9,.3,1.25) calc(.3s + var(--k) * .17s) both; } #main[data-juego="phishing"] .jpe-ini .jpe-pez { animation: jpe-fila .5s cubic-bezier(.25,.9,.3,1.25) calc(.3s + var(--k) * .17s) both, jpe-picado 4.8s ease-in-out 1.3s infinite; } #main[data-juego="phishing"] .jpe-buzon b { animation: jp-nuevo .4s cubic-bezier(.3,1.7,.5,1) 1.1s both; } #main[data-juego="phishing"] .jpe-anzuelo { animation: jpe-pesca 4.8s ease-in-out 1.3s infinite both; } #main[data-juego="phishing"] .jpe-ok .jpe-marca { animation: jpe-late 2.4s ease-in-out 1.4s infinite; } /* Phishing · final: tres sobres caen en la bandeja, sale el escudo; los sobres del abanico reciben su sello con golpe */ #main[data-juego="phishing"] .jpe-cae { animation: jpe-cae .55s cubic-bezier(.45,0,.4,1.3) calc(.1s + var(--k) * .16s) both; } #main[data-juego="phishing"] .jpe-caja { animation: jpe-caja .3s ease-out .6s; } #main[data-juego="phishing"] .jpe-escudo { animation: jpe-escudo .55s cubic-bezier(.3,1.6,.5,1) .78s both, jpe-flota 4s ease-in-out 1.5s infinite; } #main[data-juego="phishing"] .jpe-limpia .jpe-escudo::after { content: ""; position: absolute; inset: -18%; border-radius: 50%; border: 3px solid var(--jg-1, #fb923c); opacity: 0; animation: jme-anillo-fin .8s ease-out 1.05s both; } #main[data-juego="phishing"] .jpe-mini { animation: jpe-mini .45s cubic-bezier(.25,.9,.3,1.2) calc(.12s + var(--k) * .08s) both; } #main[data-juego="phishing"] .jpe-sello { animation: jpe-sello .32s cubic-bezier(.5,0,.75,0) calc(.55s + var(--k) * .14s) both; } /* Botones: el anzuelo se mece al pasar por encima */ #main[data-juego="phishing"] .jp-accion-fraude:is(:hover, :focus-visible):not(:disabled) .jp-ic { animation: jp-mece-logo .9s ease-in-out infinite; transform-origin: 64% 8%; } } @media (prefers-reduced-motion: reduce) { #main[data-juego="memoria"] .jme-ini .jme-n1 .jme-giro, #main[data-juego="memoria"] .jme-ini .jme-n2 .jme-giro { transform: rotateY(180deg); } } @keyframes jme-reparte { from { opacity: 0; transform: translate(0, 34cqh) rotate(0deg) scale(.5); } 40% { opacity: 1; } } @keyframes jme-mazo { from { opacity: 0; scale: .4; } } @keyframes jme-voltea { 0%, 8% { transform: none; } 20%, 60% { transform: translateY(-7cqmin) rotateY(180deg) scale(1.08); } 72%, 100% { transform: none; } } @keyframes jme-anillo-ini { 0%, 20% { opacity: 0; scale: .5; } 27% { opacity: .95; scale: .8; } 46% { opacity: 0; scale: 1.25; } 100% { opacity: 0; } } @keyframes jme-anillo-fin { 0% { opacity: 0; scale: .5; } 25% { opacity: .95; } 100% { opacity: 0; scale: 1.3; } } @keyframes jme-chispa { 0%, 100% { scale: .7; rotate: 0deg; opacity: .55; } 50% { scale: 1.2; rotate: 45deg; opacity: 1; } } @keyframes jme-llega { from { opacity: 0; translate: 0 -40px; scale: .6; } } @keyframes jme-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } @keyframes jme-destapa { 0% { transform: none; } 55% { transform: translateY(-6px) rotateY(205deg) scale(1.12); } 100% { transform: rotateY(180deg); } } @keyframes jpe-fila { from { opacity: 0; transform: translateY(-140%) scale(.92); } } @keyframes jpe-picado { 0%, 30% { transform: none; } 36% { transform: translateY(5%) rotate(-1.2deg); } 42% { transform: translateY(-4%) rotate(1deg); } 48%, 64% { transform: none; box-shadow: inset 0 0 0 2px var(--jg-2, #ea580c), 0 0 18px color-mix(in srgb, var(--jg-1, #fb923c) 70%, transparent); } 76%, 100% { transform: none; } } @keyframes jpe-pesca { 0% { translate: 0 -60cqh; rotate: 0deg; } 28% { translate: 0 0; rotate: 0deg; } 36% { rotate: -7deg; } 46% { rotate: 6deg; } 56% { rotate: -3deg; } 66% { translate: 0 0; rotate: 0deg; } 86%, 100% { translate: 0 -60cqh; } } @keyframes jpe-cae { 0% { opacity: 0; translate: 0 -130px; } 60% { opacity: 1; translate: 0 6px; } 100% { translate: 0 0; } } @keyframes jpe-caja { 40% { transform: translateY(4px) scaleY(.94); } } @keyframes jpe-escudo { from { opacity: 0; scale: .2; rotate: -30deg; } } @keyframes jpe-flota { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -6px; } } @keyframes jpe-late { 0%, 100% { scale: 1; } 50% { scale: 1.18; } } @keyframes jpe-mini { from { opacity: 0; translate: 0 -36px; } } @keyframes jpe-sello { 0% { opacity: 0; scale: 3.2; rotate: -40deg; } 85% { opacity: 1; scale: .9; rotate: -12deg; } 100% { opacity: 1; scale: 1; rotate: -12deg; } } /* juegos-mundo-entrevista-zona.css */ /* [CERT] 20-oct · mundo propio del juego (ver BRIEF_IDENTIDAD.md) */ /* ORDENA LA ENTREVISTA (celeste) y ZONA HORARIA (verde): dibujo propio, pantalla con su metáfora, fondo animado y animación notoria. Entrevista = una conversación: el micrófono del entrevistador pregunta en una burbuja y las 4 partes de tu respuesta son tarjetas de guion (burbujas con cola) que se levantan, se inclinan y caen al moverlas; al comprobar, ✓/✗ grandes en cascada y anillos de luz. Zona = pared de relojes del mundo: reloj de la ciudad de origen, globo con franja de día y noche, y el reloj de la otra ciudad que espera con «?»; al responder sus agujas giran (dos vueltas) hasta la hora correcta, su cara pasa a día o noche y aparece «+N h». Colores: solo var(--jg-*) (juegos-identidad.css) y el verde/rojo de acierto/fallo. Todo el movimiento va dentro de @media (prefers-reduced-motion: no-preference): con «menos movimiento» todo queda quieto y el juego funciona igual. */ /* =================== FONDO PROPIO (solo con el juego abierto) =================== */ #main:is([data-juego="entrevista"], [data-juego="zona"]) { position: relative; isolation: isolate; } #main:is([data-juego="entrevista"], [data-juego="zona"])::before, #main:is([data-juego="entrevista"], [data-juego="zona"])::after { content: ""; position: absolute; z-index: -1; top: 18px; left: 18px; right: 18px; height: max(calc(100% - 36px), calc(100svh - 150px)); pointer-events: none; background-color: var(--jg-2, #0284c7); opacity: .065; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 600px 600px; mask-size: 600px 600px; } #main:is([data-juego="entrevista"], [data-juego="zona"])::after { opacity: .05; -webkit-mask-position: 300px 280px; mask-position: 300px 280px; } /* Entrevista: burbujas de diálogo, micrófonos, comillas y la estrella de STAR */ #main[data-juego="entrevista"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='black' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 70h128a26 26 0 0 1 26 26v48a26 26 0 0 1-26 26h-78l-32 28 7-28H62a26 26 0 0 1-26-26V96a26 26 0 0 1 26-26z'/%3E%3Cpath d='M70 108h100M70 134h64'/%3E%3Cpath d='M392 356a38 38 0 0 0 76 0M430 394v26M406 422h48'/%3E%3Cpath d='M318 104l-26 26 26 26M354 104l-26 26 26 26'/%3E%3C/g%3E%3Crect x='410' y='292' width='40' height='78' rx='20'/%3E%3Cpath d='M128 392l14 30 33 4-24 23 6 33-29-16-29 16 6-33-24-23 33-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='black' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 70h128a26 26 0 0 1 26 26v48a26 26 0 0 1-26 26h-78l-32 28 7-28H62a26 26 0 0 1-26-26V96a26 26 0 0 1 26-26z'/%3E%3Cpath d='M70 108h100M70 134h64'/%3E%3Cpath d='M392 356a38 38 0 0 0 76 0M430 394v26M406 422h48'/%3E%3Cpath d='M318 104l-26 26 26 26M354 104l-26 26 26 26'/%3E%3C/g%3E%3Crect x='410' y='292' width='40' height='78' rx='20'/%3E%3Cpath d='M128 392l14 30 33 4-24 23 6 33-29-16-29 16 6-33-24-23 33-4z'/%3E%3C/svg%3E"); } #main[data-juego="entrevista"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='black' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M420 60h110a24 24 0 0 1 24 24v40a24 24 0 0 1-24 24h-20l6 26-30-26h-66a24 24 0 0 1-24-24V84a24 24 0 0 1 24-24z'/%3E%3Cpath d='M60 330v40M84 312v76M108 300v100M132 318v64M156 334v32'/%3E%3C/g%3E%3Ccircle cx='450' cy='104' r='8'/%3E%3Ccircle cx='476' cy='104' r='8'/%3E%3Ccircle cx='502' cy='104' r='8'/%3E%3Cpath d='M300 470l10 21 23 3-17 16 4 23-20-11-20 11 4-23-17-16 23-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='black' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M420 60h110a24 24 0 0 1 24 24v40a24 24 0 0 1-24 24h-20l6 26-30-26h-66a24 24 0 0 1-24-24V84a24 24 0 0 1 24-24z'/%3E%3Cpath d='M60 330v40M84 312v76M108 300v100M132 318v64M156 334v32'/%3E%3C/g%3E%3Ccircle cx='450' cy='104' r='8'/%3E%3Ccircle cx='476' cy='104' r='8'/%3E%3Ccircle cx='502' cy='104' r='8'/%3E%3Cpath d='M300 470l10 21 23 3-17 16 4 23-20-11-20 11 4-23-17-16 23-3z'/%3E%3C/svg%3E"); } /* Zona horaria: relojes, globos, sol y luna */ #main[data-juego="zona"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='black' stroke-width='9' stroke-linecap='round'%3E%3Ccircle cx='110' cy='110' r='58'/%3E%3Cpath d='M110 110V74M110 110l26 16M110 60v8M110 152v8M60 110h8M152 110h8'/%3E%3Ccircle cx='440' cy='330' r='66'/%3E%3Cellipse cx='440' cy='330' rx='26' ry='66'/%3E%3Cpath d='M374 330h132M384 296h112M384 364h112'/%3E%3Cpath d='M150 410v-14M150 504v14M103 457h-14M197 457h14M117 424l-10-10M183 490l10 10M117 490l-10 10M183 424l10-10'/%3E%3C/g%3E%3Ccircle cx='150' cy='457' r='26'/%3E%3Cpath d='M500 50a40 40 0 1 0 0 76 48 48 0 0 1 0-76z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='black' stroke-width='9' stroke-linecap='round'%3E%3Ccircle cx='110' cy='110' r='58'/%3E%3Cpath d='M110 110V74M110 110l26 16M110 60v8M110 152v8M60 110h8M152 110h8'/%3E%3Ccircle cx='440' cy='330' r='66'/%3E%3Cellipse cx='440' cy='330' rx='26' ry='66'/%3E%3Cpath d='M374 330h132M384 296h112M384 364h112'/%3E%3Cpath d='M150 410v-14M150 504v14M103 457h-14M197 457h14M117 424l-10-10M183 490l10 10M117 490l-10 10M183 424l10-10'/%3E%3C/g%3E%3Ccircle cx='150' cy='457' r='26'/%3E%3Cpath d='M500 50a40 40 0 1 0 0 76 48 48 0 0 1 0-76z'/%3E%3C/svg%3E"); } #main[data-juego="zona"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='black' stroke-width='8' stroke-linecap='round'%3E%3Ccircle cx='470' cy='470' r='40'/%3E%3Cpath d='M470 470v-24M470 470h20'/%3E%3Ccircle cx='120' cy='300' r='44'/%3E%3Cpath d='M76 300h88M120 256c-22 26-22 62 0 88M120 256c22 26 22 62 0 88'/%3E%3Cpath d='M300 80q60-50 120 0' stroke-dasharray='2 18'/%3E%3C/g%3E%3Cpath d='M330 520a28 28 0 1 0 0 52 34 34 0 0 1 0-52z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='black' stroke-width='8' stroke-linecap='round'%3E%3Ccircle cx='470' cy='470' r='40'/%3E%3Cpath d='M470 470v-24M470 470h20'/%3E%3Ccircle cx='120' cy='300' r='44'/%3E%3Cpath d='M76 300h88M120 256c-22 26-22 62 0 88M120 256c22 26 22 62 0 88'/%3E%3Cpath d='M300 80q60-50 120 0' stroke-dasharray='2 18'/%3E%3C/g%3E%3Cpath d='M330 520a28 28 0 1 0 0 52 34 34 0 0 1 0-52z'/%3E%3C/svg%3E"); } :root[data-theme="dark"] #main:is([data-juego="entrevista"], [data-juego="zona"])::before { background-color: var(--jg-1, #38bdf8); opacity: .09; } :root[data-theme="dark"] #main:is([data-juego="entrevista"], [data-juego="zona"])::after { background-color: var(--jg-1, #38bdf8); opacity: .06; } @media (max-width: 760px) { /* en el celular, menos piezas: dibujos más grandes y una sola capa */ #main:is([data-juego="entrevista"], [data-juego="zona"])::before { -webkit-mask-size: 470px 470px; mask-size: 470px 470px; left: 8px; right: 8px; } #main:is([data-juego="entrevista"], [data-juego="zona"])::after { display: none; } } /* =================== ORDENA LA ENTREVISTA =================== */ /* El entrevistador: micrófono + la pregunta en una burbuja de vidrio */ [data-ruta="juegos"] .jxe-dialogo { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin: 10px 0 4px; } [data-ruta="juegos"] .jxe-mic { flex: none; width: 58px; height: 72px; overflow: visible; } [data-ruta="juegos"] .jxe-mic-cab { fill: var(--jg-2, #0284c7); stroke: #fff; stroke-width: 2.5; } [data-ruta="juegos"] .jxe-mic-rejilla { stroke: #fff; stroke-opacity: .55; stroke-width: 2.4; stroke-linecap: round; } [data-ruta="juegos"] .jxe-mic-brillo { fill: #fff; opacity: .7; } [data-ruta="juegos"] .jxe-mic-pie { fill: none; stroke: var(--jg-3, #0369a1); stroke-width: 4; stroke-linecap: round; } [data-ruta="juegos"] .jxe-onda { fill: none; stroke: var(--jg-1, #38bdf8); stroke-width: 3.2; stroke-linecap: round; } [data-ruta="juegos"] .jxe-onda-2 { opacity: .5; } [data-ruta="juegos"] .jxe-burbuja { position: relative; min-width: 0; max-width: 34em; padding: 14px 22px 16px; border-radius: 26px 26px 26px 8px; background: linear-gradient(160deg, rgba(255,255,255,.92), color-mix(in srgb, var(--jg-papel, #e0f2fe) 70%, rgba(255,255,255,.4))); box-shadow: inset 0 1px 1px #fff, inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #38bdf8) 40%, transparent), 0 18px 34px -22px color-mix(in srgb, var(--jg-3, #0369a1) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } [data-ruta="juegos"] .jxe-burbuja::before { content: ""; position: absolute; left: -11px; bottom: 10px; width: 16px; height: 18px; pointer-events: none; background: color-mix(in srgb, var(--jg-papel, #e0f2fe) 80%, #fff); clip-path: polygon(100% 0, 100% 100%, 0 100%); filter: drop-shadow(-1px 0 0 color-mix(in srgb, var(--jg-1, #38bdf8) 45%, transparent)); } [data-ruta="juegos"] .jxe-burbuja .enunciado { margin: 0; text-wrap: balance; } :root[data-theme="dark"] [data-ruta="juegos"] .jxe-burbuja { background: linear-gradient(160deg, rgba(255,255,255,.1), color-mix(in srgb, var(--jg-2, #0284c7) 16%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1.5px color-mix(in srgb, var(--jg-1, #38bdf8) 36%, transparent), 0 18px 34px -22px rgba(0,0,0,.8); } :root[data-theme="dark"] [data-ruta="juegos"] .jxe-burbuja::before { background: color-mix(in srgb, var(--jg-2, #0284c7) 30%, #0b0d24); } :root[data-theme="dark"] [data-ruta="juegos"] .jxe-mic-pie { stroke: var(--jg-chispa, #7dd3fc); } /* Tus 4 partes: tarjetas de guion (burbujas de respuesta con cola a la derecha, renglones y un margen de libreta) un poco ladeadas */ [data-ruta="juegos"] .jx-entrevista-juego .jx-star { gap: 16px; } [data-ruta="juegos"] .jx-entrevista-juego .jx-star-item { position: relative; isolation: isolate; border-radius: 20px 20px 6px 20px; background: linear-gradient(90deg, transparent 60px, color-mix(in srgb, var(--jg-1, #38bdf8) 45%, transparent) 60px 62px, transparent 62px), repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, var(--jg-1, #38bdf8) 16%, transparent) 25px 26px), linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.6)); } [data-ruta="juegos"] .jx-entrevista-juego .jx-star-item:nth-child(odd) { rotate: -.5deg; } [data-ruta="juegos"] .jx-entrevista-juego .jx-star-item:nth-child(even) { rotate: .45deg; } [data-ruta="juegos"] .jx-entrevista-juego .jx-star-item::before { content: ""; position: absolute; right: -2px; bottom: -11px; z-index: -1; width: 22px; height: 16px; pointer-events: none; background: color-mix(in srgb, var(--jg-chispa, #7dd3fc) 70%, #fff); clip-path: polygon(0 0, 100% 0, 92% 100%); } [data-ruta="juegos"] .jx-entrevista-juego .jx-star-n { color: #fff; background: linear-gradient(160deg, var(--jg-1, #38bdf8), var(--jg-2, #0284c7)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 12px -6px var(--jg-3, #0369a1); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-entrevista-juego .jx-star-item { background: linear-gradient(90deg, transparent 60px, color-mix(in srgb, var(--jg-1, #38bdf8) 30%, transparent) 60px 62px, transparent 62px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(255,255,255,.05) 25px 26px), linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-entrevista-juego .jx-star-item::before { background: color-mix(in srgb, var(--jg-2, #0284c7) 40%, #0b0d24); } @media (max-width: 760px) { [data-ruta="juegos"] .jxe-dialogo { gap: 8px; } [data-ruta="juegos"] .jxe-mic { width: 40px; height: 52px; } [data-ruta="juegos"] .jxe-burbuja { padding: 11px 14px 12px; border-radius: 20px 20px 20px 6px; } [data-ruta="juegos"] .jx-entrevista-juego .jx-star-item { background: linear-gradient(90deg, transparent 48px, color-mix(in srgb, var(--jg-1, #38bdf8) 45%, transparent) 48px 50px, transparent 50px), repeating-linear-gradient(180deg, transparent 0 23px, color-mix(in srgb, var(--jg-1, #38bdf8) 16%, transparent) 23px 24px), linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.6)); } :root[data-theme="dark"] [data-ruta="juegos"] .jx-entrevista-juego .jx-star-item { background: linear-gradient(90deg, transparent 48px, color-mix(in srgb, var(--jg-1, #38bdf8) 30%, transparent) 48px 50px, transparent 50px), linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); } } /* Al comprobar: ✓ / ✗ grandes; las que estaban mal quedan con borde rojo; si todo está bien, cada tarjeta brilla en verde */ [data-ruta="juegos"] .jx-entrevista-juego .jxa-resuelta .jx-star-item::after { width: 32px; height: 32px; top: -12px; right: -8px; font-size: 18px; } [data-ruta="juegos"] .jx-entrevista-juego .jx-star.mal .jx-star-item.jxa-mal { box-shadow: inset 0 0 0 2px rgba(194,39,45,.55), 0 7px 0 -1px rgba(194,39,45,.18), 0 22px 30px -24px rgba(194,39,45,.6); } /* el micrófono «aplaude» con anillos de luz (bien) o la burbuja duda (mal) */ [data-ruta="juegos"] .jxe-anillo { fill: none; stroke: #34b98b; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; } [data-ruta="juegos"] .jxe-burbuja { transition: box-shadow .3s; } [data-ruta="juegos"] .jxe-dialogo.jxe-bien .jxe-burbuja { box-shadow: inset 0 1px 1px #fff, inset 0 0 0 2px rgba(52,185,139,.7), 0 0 0 6px rgba(52,185,139,.14), 0 18px 34px -22px rgba(18,128,92,.7); } [data-ruta="juegos"] .jxe-dialogo.jxe-mal .jxe-burbuja { box-shadow: inset 0 1px 1px #fff, inset 0 0 0 2px rgba(194,39,45,.5), 0 18px 34px -22px rgba(194,39,45,.5); } :root[data-theme="dark"] [data-ruta="juegos"] .jxe-dialogo.jxe-bien .jxe-burbuja { box-shadow: inset 0 0 0 2px rgba(69,211,154,.7), 0 0 0 6px rgba(69,211,154,.14); } :root[data-theme="dark"] [data-ruta="juegos"] .jxe-dialogo.jxe-mal .jxe-burbuja { box-shadow: inset 0 0 0 2px rgba(255,122,126,.6); } /* =================== ZONA HORARIA =================== */ [data-ruta="juegos"] .jxz-pared { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px 10px; width: 100%; max-width: 520px; margin: 8px auto 2px; } [data-ruta="juegos"] .jxz-reloj { position: relative; display: grid; justify-items: center; gap: 4px; } [data-ruta="juegos"] .jxz-cara { display: block; width: clamp(92px, 12vw, 132px); height: auto; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 12px 16px color-mix(in srgb, var(--jg-3, #15803d) 30%, transparent)); } [data-ruta="juegos"] .jxz-aro { fill: var(--jg-2, #16a34a); stroke: #fff; stroke-width: 3; } [data-ruta="juegos"] .jxz-fondo { fill: #fff; transition: fill .45s ease .35s; } [data-ruta="juegos"] .jxz-brillo { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .7; } [data-ruta="juegos"] .jxz-marca { stroke: var(--jg-3, #15803d); stroke-width: 2; stroke-linecap: round; opacity: .45; } [data-ruta="juegos"] .jxz-marca-g { stroke-width: 3.4; opacity: .9; } [data-ruta="juegos"] .jxz-astro { opacity: 0; transition: opacity .35s ease .5s; } [data-ruta="juegos"] .jxz-sol circle { fill: var(--jg-1, #22c55e); } [data-ruta="juegos"] .jxz-sol path { stroke: var(--jg-1, #22c55e); stroke-width: 2; stroke-linecap: round; } [data-ruta="juegos"] .jxz-luna { fill: var(--jg-chispa, #86efac); } [data-ruta="juegos"] .jxz-dia .jxz-sol, [data-ruta="juegos"] .jxz-noche .jxz-luna { opacity: 1; } [data-ruta="juegos"] .jxz-noche .jxz-fondo { fill: color-mix(in srgb, var(--jg-3, #15803d) 55%, #0b0d24); } [data-ruta="juegos"] .jxz-noche .jxz-marca { stroke: var(--jg-chispa, #86efac); } [data-ruta="juegos"] .jxz-cara :is(.jxz-h, .jxz-m) { stroke-linecap: round; transform-box: view-box; transform-origin: 50px 50px; } [data-ruta="juegos"] .jxz-cara .jxz-h { stroke: var(--jg-3, #15803d); stroke-width: 6.5; } [data-ruta="juegos"] .jxz-cara .jxz-m { stroke: var(--jg-2, #16a34a); stroke-width: 4; } [data-ruta="juegos"] .jxz-eje { fill: var(--jg-3, #15803d); stroke: #fff; stroke-width: 1.5; } [data-ruta="juegos"] .jxz-noche .jxz-cara .jxz-h { stroke: #fff; } [data-ruta="juegos"] .jxz-noche .jxz-cara .jxz-m { stroke: var(--jg-chispa, #86efac); } [data-ruta="juegos"] .jxz-digital { padding: 3px 10px 2px; border-radius: 9px; font: 700 14.5px/1.3 var(--font, inherit); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--jg-tx, #15803d); background: color-mix(in srgb, var(--jg-papel, #dcfce7) 75%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jg-1, #22c55e) 35%, transparent); } [data-ruta="juegos"] .jxz-ciudad { max-width: 100%; font: 600 12.5px/1.25 var(--font, inherit); color: var(--text-2, #555a77); text-align: center; overflow-wrap: anywhere; } /* el reloj de la otra ciudad espera: cara punteada, agujas tenues y un «?» grande */ [data-ruta="juegos"] .jxz-espera .jxz-aro { fill: color-mix(in srgb, var(--jg-1, #22c55e) 40%, #fff); stroke-dasharray: 6 5; } [data-ruta="juegos"] .jxz-espera .jxz-cara :is(.jxz-h, .jxz-m, .jxz-marca) { opacity: .18; } [data-ruta="juegos"] .jxz-incognita { position: absolute; top: 0; left: 50%; width: clamp(92px, 12vw, 132px); aspect-ratio: 1; translate: -50% 0; display: grid; place-items: center; padding-top: 4px; font: 400 clamp(40px, 5vw, 56px)/1 var(--font-display, inherit); color: var(--jg-2, #16a34a); pointer-events: none; transition: opacity .2s, scale .25s; } [data-ruta="juegos"] .jxz-reloj:not(.jxz-espera) .jxz-incognita { opacity: 0; scale: .3; } /* en medio, el globo con su franja de noche y el arco del viaje (la diferencia sale al responder) */ [data-ruta="juegos"] .jxz-medio { position: relative; display: grid; justify-items: center; align-content: start; padding-top: 6px; width: clamp(70px, 9vw, 108px); } [data-ruta="juegos"] .jxz-arco { width: 100%; height: auto; overflow: visible; } [data-ruta="juegos"] .jxz-arco path { fill: none; stroke: var(--jg-2, #16a34a); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 7; opacity: .55; } [data-ruta="juegos"] .jxz-arco .jxz-arco-punta { stroke-dasharray: none; } [data-ruta="juegos"] .jxz-resuelta .jxz-arco path { stroke-dasharray: none; opacity: 1; } [data-ruta="juegos"] .jxz-globo { width: clamp(60px, 7.5vw, 88px); height: auto; aspect-ratio: 1; margin-top: -4px; overflow: visible; } [data-ruta="juegos"] .jxz-g-mar { fill: color-mix(in srgb, var(--jg-papel, #dcfce7) 70%, #fff); } [data-ruta="juegos"] .jxz-g-tierra { fill: var(--jg-1, #22c55e); } [data-ruta="juegos"] .jxz-g-noche { fill: var(--jg-3, #15803d); opacity: .32; } [data-ruta="juegos"] .jxz-g-lineas { fill: none; stroke: var(--jg-3, #15803d); stroke-width: 1.4; opacity: .35; } [data-ruta="juegos"] .jxz-g-borde { fill: none; stroke: var(--jg-2, #16a34a); stroke-width: 3.5; } [data-ruta="juegos"] .jxz-g-luz { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; } [data-ruta="juegos"] .jxz-dif { position: absolute; top: -6px; left: 50%; translate: -50% 0; padding: 4px 10px 2px; border-radius: 999px; white-space: nowrap; font: 400 18px/1.1 var(--font-display, inherit); letter-spacing: .04em; color: #fff; background: linear-gradient(160deg, var(--jg-1, #22c55e), var(--jg-3, #15803d)); box-shadow: 0 0 0 2px #fff, 0 8px 16px -8px var(--jg-3, #15803d); opacity: 0; scale: .3; transition: opacity .25s ease .75s, scale .4s cubic-bezier(.3,1.6,.5,1) .75s; } [data-ruta="juegos"] .jxz-resuelta .jxz-dif { opacity: 1; scale: 1; } /* anillo de luz que sale del reloj cuando llega la hora */ [data-ruta="juegos"] .jxz-reloj::after { content: ""; position: absolute; top: 0; left: 50%; width: clamp(92px, 12vw, 132px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none; opacity: 0; border: 3px solid var(--jg-2, #16a34a); } [data-ruta="juegos"] .jxz-ok::after { border-color: #34b98b; } /* las respuestas: un relojito con esa hora en lugar de la letra */ [data-ruta="juegos"] .jx-zona-juego .pl-letra { width: 42px; height: 42px; padding: 0; border-radius: 50%; } [data-ruta="juegos"] .jxz-mini { width: 34px; height: 34px; overflow: visible; } [data-ruta="juegos"] .jxz-mini circle { fill: #fff; stroke: var(--jg-2, #16a34a); stroke-width: 3; } [data-ruta="juegos"] .jxz-mini line { stroke: var(--jg-3, #15803d); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 20px 20px; } [data-ruta="juegos"] .jxz-mini .jxz-mini-eje { fill: var(--jg-3, #15803d); stroke: none; } [data-ruta="juegos"] .jx-zona-juego .pc-frente .pc-op-txt { font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; font-variant-numeric: tabular-nums; } [data-ruta="juegos"] .jx-zona-juego .jx-carta-ronda .enunciado { margin-top: 10px; } /* oscuro */ :root[data-theme="dark"] [data-ruta="juegos"] .jxz-fondo { fill: color-mix(in srgb, var(--jg-1, #22c55e) 16%, #10142e); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-noche .jxz-fondo { fill: #060816; } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-aro { stroke: rgba(255,255,255,.4); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-espera .jxz-aro { fill: color-mix(in srgb, var(--jg-2, #16a34a) 40%, #0b0d24); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-marca { stroke: var(--jg-chispa, #86efac); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-cara .jxz-h { stroke: #fff; } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-cara .jxz-m { stroke: var(--jg-chispa, #86efac); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-incognita { color: var(--jg-chispa, #86efac); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-digital { color: var(--jg-chispa, #86efac); background: color-mix(in srgb, var(--jg-1, #22c55e) 14%, transparent); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-ciudad { color: var(--text-2, #b8bcd9); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-g-mar { fill: color-mix(in srgb, var(--jg-2, #16a34a) 25%, #0b0d24); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-g-noche { fill: #000; opacity: .4; } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-g-lineas { stroke: var(--jg-chispa, #86efac); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-dif { box-shadow: 0 0 0 2px #0b0d24; } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-mini circle { fill: rgba(255,255,255,.1); stroke: var(--jg-chispa, #86efac); } :root[data-theme="dark"] [data-ruta="juegos"] .jxz-mini line, :root[data-theme="dark"] [data-ruta="juegos"] .jxz-mini .jxz-mini-eje { stroke: #fff; fill: #fff; } @media (max-width: 760px) { [data-ruta="juegos"] .jxz-pared { gap: 4px 6px; } [data-ruta="juegos"] .jxz-cara, [data-ruta="juegos"] .jxz-incognita, [data-ruta="juegos"] .jxz-reloj::after { width: 88px; } [data-ruta="juegos"] .jxz-incognita { font-size: 40px; } [data-ruta="juegos"] .jxz-medio { width: 64px; } [data-ruta="juegos"] .jxz-globo { width: 54px; } [data-ruta="juegos"] .jxz-digital { font-size: 12.5px; padding: 2px 7px; } [data-ruta="juegos"] .jxz-dif { font-size: 15px; } [data-ruta="juegos"] .jxz-ciudad { font-size: 11.5px; } [data-ruta="juegos"] .jx-zona-juego .pc-frente .pc-op-txt { font-size: 17px; } } /* =================== MOVIMIENTO =================== */ @media (prefers-reduced-motion: no-preference) { /* fondo: dos capas que derivan despacio en sentidos contrarios (solo transform) */ #main:is([data-juego="entrevista"], [data-juego="zona"])::before { animation: jxm-deriva-a 34s ease-in-out infinite alternate; } #main:is([data-juego="entrevista"], [data-juego="zona"])::after { animation: jxm-deriva-b 26s ease-in-out infinite alternate; } @keyframes jxm-deriva-a { from { transform: translate(-12px, 10px); } to { transform: translate(14px, -16px); } } @keyframes jxm-deriva-b { from { transform: translate(12px, -8px); } to { transform: translate(-14px, 14px); } } /* portada: el dibujo del juego entra girando y luego flota */ #main:is([data-juego="entrevista"], [data-juego="zona"]) .jx-intro .p2-pantalla-logo .figura { animation: jxm-logo .7s cubic-bezier(.3,1.4,.5,1) .1s backwards, jxm-flota 5s ease-in-out .8s infinite; } @keyframes jxm-logo { from { opacity: 0; transform: scale(.4) rotate(-24deg); } } @keyframes jxm-flota { 50% { transform: translateY(-6px) rotate(-2deg); } } /* ---- Entrevista ---- */ /* el micrófono aparece, la burbuja «sale» de él y las ondas laten despacio */ [data-ruta="juegos"] .jxe-mic { animation: jxe-mic .5s cubic-bezier(.3,1.5,.5,1) .25s backwards; transform-origin: 50% 90%; } [data-ruta="juegos"] .jxe-burbuja { animation: jxe-burbuja .55s cubic-bezier(.3,1.35,.5,1) .4s backwards; transform-origin: 0 100%; } [data-ruta="juegos"] .jxe-onda { animation: jxe-onda 2.4s ease-in-out 1s infinite; } [data-ruta="juegos"] .jxe-onda-2 { animation-delay: 1.3s; } @keyframes jxe-mic { from { opacity: 0; transform: scale(.3) rotate(-25deg); } } @keyframes jxe-burbuja { from { opacity: 0; transform: scale(.5) translateX(-30px); } } @keyframes jxe-onda { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } /* las tarjetas se reparten desde la derecha, ladeadas, una tras otra */ .jx-raiz .jx-entrevista-juego .jx-star.jxa-entra > .jx-star-item { animation: jxe-reparte .55s cubic-bezier(.2,.85,.25,1.1) both; } .jx-raiz .jx-entrevista-juego .jx-star.jxa-entra > .jx-star-item:nth-child(1) { animation-delay: .5s; } .jx-raiz .jx-entrevista-juego .jx-star.jxa-entra > .jx-star-item:nth-child(2) { animation-delay: .6s; } .jx-raiz .jx-entrevista-juego .jx-star.jxa-entra > .jx-star-item:nth-child(3) { animation-delay: .7s; } .jx-raiz .jx-entrevista-juego .jx-star.jxa-entra > .jx-star-item:nth-child(4) { animation-delay: .8s; } @keyframes jxe-reparte { from { opacity: 0; translate: 90px 18px; rotate: 7deg; scale: .88; } } /* al pasar el ratón la tarjeta se levanta */ .jx-raiz .jx-entrevista-juego .jx-star:not(.jxa-resuelta) .jx-star-item { transition: translate .2s ease-out, box-shadow .2s; } .jx-raiz .jx-entrevista-juego .jx-star:not(.jxa-resuelta) .jx-star-item:is(:hover, :focus-within) { translate: 0 -3px; } .jx-raiz .jx-entrevista-juego .jx-mover:not(:disabled):active { scale: .85; } /* al comprobar: ✓ / ✗ grandes que caen girando, en cascada después del deslizado */ .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-item::after { animation: jxe-marca .42s cubic-bezier(.3,1.6,.5,1) both; } .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-item:nth-child(1)::after { animation-delay: .45s; } .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-item:nth-child(2)::after { animation-delay: .57s; } .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-item:nth-child(3)::after { animation-delay: .69s; } .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-item:nth-child(4)::after { animation-delay: .81s; } @keyframes jxe-marca { from { opacity: 0; transform: scale(2.4) rotate(-60deg); } 60% { opacity: 1; } } /* las letras S T A R se voltean una tras otra */ .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-letra { animation: jxe-letra .45s cubic-bezier(.3,1.4,.5,1) both; } .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-item:nth-child(2) .jx-star-letra { animation-delay: .1s; } .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-item:nth-child(3) .jx-star-letra { animation-delay: .2s; } .jx-raiz .jx-entrevista-juego .jxa-resuelta .jx-star-item:nth-child(4) .jx-star-letra { animation-delay: .3s; } @keyframes jxe-letra { from { transform: perspective(300px) rotateY(180deg) scale(.6); opacity: 0; } } /* todo bien: ola grande con brillo verde; mal: las que estaban fuera de lugar parpadean en rojo */ .jx-raiz .jx-entrevista-juego .jx-star.ok.jxa-resuelta .jx-star-item { animation: jxe-ola .5s cubic-bezier(.3,1.4,.5,1) .5s both; } .jx-raiz .jx-entrevista-juego .jx-star.ok.jxa-resuelta .jx-star-item:nth-child(2) { animation-delay: .6s; } .jx-raiz .jx-entrevista-juego .jx-star.ok.jxa-resuelta .jx-star-item:nth-child(3) { animation-delay: .7s; } .jx-raiz .jx-entrevista-juego .jx-star.ok.jxa-resuelta .jx-star-item:nth-child(4) { animation-delay: .8s; } @keyframes jxe-ola { 45% { translate: 0 -10px; scale: 1.025; box-shadow: 0 0 0 4px rgba(52,185,139,.35), 0 18px 30px -14px rgba(18,128,92,.6); } } .jx-raiz .jx-entrevista-juego .jx-star.mal.jxa-resuelta .jx-star-item.jxa-mal { animation: jxe-rojo .6s ease-out .45s both; } @keyframes jxe-rojo { 30% { box-shadow: 0 0 0 5px rgba(194,39,45,.3), inset 0 0 0 2px rgba(194,39,45,.8); translate: -5px 0; } 60% { translate: 4px 0; } } /* el micrófono: dos anillos de luz verde (bien) o la burbuja tiembla y se ladea (mal) */ [data-ruta="juegos"] .jxe-dialogo.jxe-bien .jxe-anillo { animation: jxe-anillo .8s ease-out .15s; } [data-ruta="juegos"] .jxe-dialogo.jxe-bien .jxe-anillo-2 { animation-delay: .4s; } [data-ruta="juegos"] .jxe-dialogo.jxe-bien .jxe-mic { animation: jxe-salto .5s cubic-bezier(.3,1.6,.5,1) .1s; } [data-ruta="juegos"] .jxe-dialogo.jxe-bien .jxe-burbuja { animation: jxe-salto .5s cubic-bezier(.3,1.6,.5,1) .2s; } [data-ruta="juegos"] .jxe-dialogo.jxe-mal .jxe-burbuja { animation: jxe-duda .5s ease-in-out .1s; } @keyframes jxe-anillo { from { opacity: .9; transform: scale(.35); } to { opacity: 0; transform: scale(2.2); } } @keyframes jxe-salto { 40% { transform: translateY(-9px) scale(1.06) rotate(-3deg); } } @keyframes jxe-duda { 25% { transform: rotate(-2.5deg) translateX(-6px); } 60% { transform: rotate(2deg) translateX(5px); } } /* ---- Zona horaria ---- */ /* la pared llega: los relojes caen desde arriba con rebote y el de origen pone sus agujas girando hasta su hora */ [data-ruta="juegos"] .jxz-reloj, [data-ruta="juegos"] .jxz-medio { animation: jxz-cuelga .6s cubic-bezier(.3,1.5,.5,1) backwards; } [data-ruta="juegos"] .jxz-a { animation-delay: .3s; } [data-ruta="juegos"] .jxz-medio { animation-delay: .42s; } [data-ruta="juegos"] .jxz-b { animation-delay: .54s; } @keyframes jxz-cuelga { from { opacity: 0; transform: translateY(-40px) rotate(-12deg) scale(.7); } } [data-ruta="juegos"] .jxz-a .jxz-cara .jxz-h { animation: jxz-aguja-h .95s cubic-bezier(.25,.8,.25,1) .45s backwards; } [data-ruta="juegos"] .jxz-a .jxz-cara .jxz-m { animation: jxz-aguja-m .95s cubic-bezier(.25,.8,.25,1) .45s backwards; } @keyframes jxz-aguja-h { from { transform: rotate(-360deg); } } @keyframes jxz-aguja-m { from { transform: rotate(-720deg); } } /* el reloj que espera: el «?» late y el reloj se balancea */ [data-ruta="juegos"] .jxz-espera .jxz-incognita { animation: jxz-late 1.6s ease-in-out 1.2s infinite; } @keyframes jxz-late { 50% { scale: 1.18; } } /* el globo gira despacio (la tierra pasa por detrás de la franja de noche) */ [data-ruta="juegos"] .jxz-g-gira { animation: jxz-gira 18s linear infinite; } @keyframes jxz-gira { to { transform: translateX(-100px); } } /* al responder: las agujas dan dos vueltas visibles hasta la hora correcta, el reloj rebota y suelta un anillo de luz */ [data-ruta="juegos"] .jxz-b .jxz-cara :is(.jxz-h, .jxz-m) { transition: transform 1s cubic-bezier(.3,.05,.2,1), opacity .2s; } [data-ruta="juegos"] .jxz-llega .jxz-cara { animation: jxz-rebota .5s cubic-bezier(.3,1.6,.5,1) .95s; } [data-ruta="juegos"] .jxz-llega::after { animation: jxz-anillo .75s ease-out .95s; } @keyframes jxz-rebota { 40% { transform: scale(1.14) rotate(4deg); } } @keyframes jxz-anillo { from { opacity: .95; transform: scale(.9); } to { opacity: 0; transform: scale(1.9); } } [data-ruta="juegos"] .jxz-resuelta .jxz-globo { animation: jxz-globo .7s cubic-bezier(.3,1.4,.5,1) .2s; } @keyframes jxz-globo { 50% { transform: rotate(-18deg) scale(1.12); } } [data-ruta="juegos"] .jxz-resuelta .jxz-arco path:first-child { stroke-dasharray: 140; animation: jxz-traza .6s ease-out .35s backwards; } @keyframes jxz-traza { from { stroke-dashoffset: 140; } } [data-ruta="juegos"] .jxz-digital.jxz-nueva { animation: jxz-digito .4s cubic-bezier(.3,1.6,.5,1); } @keyframes jxz-digito { from { opacity: 0; transform: translateY(-8px) scale(.6); } } /* las respuestas: con el ratón, el minutero del relojito da una vuelta */ [data-ruta="juegos"] .jxz-mini line:last-of-type { transition: rotate .6s cubic-bezier(.3,.7,.3,1); } [data-ruta="juegos"] .jx-zona-juego .opcion:is(:hover, :focus-visible):not(:disabled) .jxz-mini line:last-of-type { rotate: 360deg; } } /* =================== ESCENAS DE INICIO Y FINAL (20-oct, ronda 2 · BRIEF_MEJORAS) =================== introNueva/finNuevo pintan