/* ═══════════════════════════════════════════════════════════════════ Arcade · Estilos compartidos Los usan las cuatro vistas: jugador, pantalla, control y admin. Diseñado para leerse de noche, con poca luz, por gente de todas las edades. Botones enormes, alto contraste, color + forma + letra. ═══════════════════════════════════════════════════════════════════ */ :root{ /* Paleta base · tema oscuro (el de siempre) */ --fondo: #12100f; --fondo-2: #1c1917; --fondo-3: #262220; --linea: #3a3330; --texto: #f6f1ea; --texto-2: #b5aca3; --texto-3: #7d746c; --oro: #c8a96a; --oro-claro: #e3ca94; --fondo-degradado: radial-gradient(120% 100% at 50% 0%, #1c1917 0%, #0c0a09 70%); /* Colores de respuesta — contraste verificado sobre texto blanco/negro */ --op1: #d7263d; --op1-b: #a71c2f; /* rojo · círculo · A */ --op2: #1d4e89; --op2-b: #14375f; /* azul · triángulo · B */ --op3: #e8a317; --op3-b: #b57f0f; /* ámbar · cuadrado · C */ --op4: #1b7f4f; --op4-b: #12603a; /* verde · rombo · D */ --ok: #2f9e5f; --mal: #cf3242; --aviso: #e8a317; /* Métrica */ --r: 18px; --r-chico: 12px; --sombra: 0 10px 30px rgba(0,0,0,.45); --transicion: 180ms cubic-bezier(.2,.7,.3,1); /* Tipografía · las mismas tres familias de la invitación */ --fuente: 'Raleway', "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --display: 'Cormorant Garamond', Georgia, "Times New Roman", serif; --firma: 'Great Vibes', 'Cormorant Garamond', cursive; color-scheme: dark; } /* ═══════════════════════════════════════════════════════════════════ Tema claro Se activa poniendo data-tema="claro" en . Lo decide el operador desde el control y se aplica en la pantalla del proyector. Un fondo claro obliga a bajar el dorado: el dorado claro sobre blanco no se lee. Por eso aquí el acento es un dorado más profundo. ═══════════════════════════════════════════════════════════════════ */ :root[data-tema="claro"]{ --fondo: #fdfaf6; --fondo-2: #f6efe3; --fondo-3: #efe6d8; --linea: #e0d6c6; --texto: #241f1a; --texto-2: #5c5651; --texto-3: #8a7f72; --oro: #9c7c34; --oro-claro: #7d6226; --fondo-degradado: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #f7f1e7 70%); --ok: #1f7a49; --mal: #b02a37; --aviso: #9a6c0c; color-scheme: light; } /* En tema claro, el ámbar necesita borde: es el único color de respuesta que se acerca al fondo y se perdería contra él. */ :root[data-tema="claro"] .opcion[data-op="2"], :root[data-tema="claro"] .op-g[data-op="2"]{ outline: 2px solid #a8760c; outline-offset: -2px; } /* Los botones dorados sobre fondo claro llevan texto claro, no oscuro. */ :root[data-tema="claro"] .btn-oro{ background: linear-gradient(180deg, #a3843f, #8a6e2f); color: #fffaf0; } /* Atenuar con 22 % de opacidad funciona sobre negro, pero sobre blanco deja las opciones descartadas casi invisibles. En tema claro se atenúa menos y se apoya en un borde para que sigan legibles. */ :root[data-tema="claro"] .opciones.contestada .opcion:not(.elegida), :root[data-tema="claro"] .opcion.incorrecta{ opacity: .5; } :root[data-tema="claro"] .opcion.elegida{ box-shadow: 0 0 0 5px var(--texto), inset 0 -5px 0 rgba(0,0,0,.28); } *, *::before, *::after{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; min-height: 100%; background: var(--fondo); color: var(--texto); font-family: var(--fuente); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } body{ /* Respeta el notch y la barra de gestos del iPhone */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } h1,h2,h3{ margin: 0 0 .4em; font-weight: 800; letter-spacing: -.01em; } p{ margin: 0 0 .8em; } a{ color: var(--oro-claro); } img{ max-width: 100%; } .oculto{ display: none !important; } .centro{ text-align: center; } .gris{ color: var(--texto-2); } .chico{ font-size: .85rem; } /* ── Botones ────────────────────────────────────────────────────── */ button, .btn{ font-family: inherit; font-size: 1.05rem; font-weight: 700; color: var(--texto); background: var(--fondo-3); border: 1px solid var(--linea); border-radius: var(--r-chico); padding: 14px 18px; min-height: 52px; cursor: pointer; transition: transform var(--transicion), background var(--transicion), opacity var(--transicion); touch-action: manipulation; } button:active, .btn:active{ transform: scale(.97); } button:disabled{ opacity: .4; cursor: default; } button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible{ outline: 3px solid var(--oro); outline-offset: 2px; } .btn-oro{ background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #241d10; border-color: transparent; } .btn-grande{ width: 100%; min-height: 68px; font-size: 1.25rem; } .btn-fantasma{ background: transparent; } .btn-peligro{ background: #3a1d20; border-color: #6b2b32; color: #ffc9ce; } /* ── Campos ─────────────────────────────────────────────────────── */ input, select, textarea{ font-family: inherit; font-size: 1.1rem; width: 100%; color: var(--texto); background: var(--fondo-2); border: 2px solid var(--linea); border-radius: var(--r-chico); padding: 14px 16px; min-height: 56px; } input::placeholder, textarea::placeholder{ color: var(--texto-3); } input:focus, select:focus, textarea:focus{ border-color: var(--oro); outline: none; } label{ display: block; font-size: .95rem; font-weight: 600; color: var(--texto-2); margin: 0 0 6px; } .campo{ margin-bottom: 18px; } /* ── Tarjetas ───────────────────────────────────────────────────── */ .tarjeta{ background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--r); padding: 20px; } /* ── Cintillo superior ──────────────────────────────────────────── */ .cintillo{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--fondo-2); border-bottom: 1px solid var(--linea); } .cintillo .marca{ font-family: var(--fuente); font-weight: 700; letter-spacing: .22em; font-size: .95rem; color: var(--oro); } /* Los nombres de los novios, en la misma cursiva de la invitación */ .firma{ font-family: var(--firma); font-weight: 400; } .cintillo .crece{ flex: 1; } /* Punto de conexión: verde vivo, ámbar sondeo, rojo caído */ .conexion{ width: 12px; height: 12px; border-radius: 50%; background: var(--texto-3); flex: none; } .conexion.vivo{ background: var(--ok); box-shadow: 0 0 10px rgba(47,158,95,.7); } .conexion.sondeo{ background: var(--aviso); } .conexion.caido{ background: var(--mal); animation: latir 1s infinite; } @keyframes latir{ 50%{ opacity: .3 } } /* ═══════════════════════════════════════════════════════════════════ Opciones de respuesta — el componente más importante de la app Color + forma + letra, siempre los tres juntos. ═══════════════════════════════════════════════════════════════════ */ .opciones{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; width: 100%; height: 100%; min-height: 0; } /* El número de opciones (2, 3 o 4) es libre: el admin puede dejar de 2 a 4 llenas y aquí solo se dibujan las que de verdad hay. Con 2 o 3 se apilan en una sola columna, con 4 vuelve a la cuadrícula 2×2. */ .opciones[data-n="2"]{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .opciones[data-n="3"]{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } .opcion{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 76px; min-width: 0; padding: 10px 10px; border: none; border-radius: var(--r); color: #fff; font-weight: 800; line-height: 1.15; text-align: center; box-shadow: inset 0 -5px 0 rgba(0,0,0,.28); transition: transform var(--transicion), opacity var(--transicion); } .opciones[data-n="2"] .opcion, .opciones[data-n="3"] .opcion{ flex-direction: row; gap: 18px; } .opcion[data-op="0"]{ background: var(--op1); } .opcion[data-op="1"]{ background: var(--op2); } .opcion[data-op="2"]{ background: var(--op3); color: #211a06; box-shadow: inset 0 -5px 0 rgba(0,0,0,.18); } .opcion[data-op="3"]{ background: var(--op4); } .opcion .forma{ flex: none; display: grid; place-items: center; font-size: clamp(15px, 4.4vw, 22px); line-height: 1; } .opcion .letra{ position: absolute; top: 6px; right: 10px; font-size: .78rem; font-weight: 800; opacity: .6; letter-spacing: .06em; } /* El texto se ajusta al ancho disponible y solo parte palabras si no queda de otra: nada de "Morel / ia". Los botones son más chicos a propósito (§ pregunta grande, botones chicos): la lectura de la pregunta pesa más que el tamaño del botón. */ .opcion .texto{ max-width: 100%; font-size: clamp(.95rem, 4vw, 1.35rem); overflow-wrap: break-word; hyphens: auto; text-wrap: balance; } .opciones[data-n="2"] .opcion .texto{ font-size: clamp(1.15rem, 5.6vw, 1.75rem); } .opciones[data-n="3"] .opcion .texto{ font-size: clamp(1rem, 4.6vw, 1.5rem); } /* Estados */ .opcion:disabled{ opacity: .55; } .opciones.bloqueada .opcion{ pointer-events: none; } .opcion.elegida{ transform: scale(1.02); box-shadow: 0 0 0 5px var(--texto), inset 0 -5px 0 rgba(0,0,0,.28); } .opciones.contestada .opcion:not(.elegida){ opacity: .22; } .opcion.correcta{ box-shadow: 0 0 0 6px var(--ok), inset 0 -5px 0 rgba(0,0,0,.28); } .opcion.incorrecta{ opacity: .3; } /* Texto largo: baja el tamaño, nunca corta */ .opcion.texto-largo .texto{ font-size: clamp(.9rem, 3.8vw, 1.2rem); } .opcion.texto-muy-largo .texto{ font-size: clamp(.8rem, 3.2vw, 1rem); } /* ═══════════════════════════════════════════════════════════════════ Encuesta de texto libre: input grande + botón, y la "nube" de respuestas en la revelación (más grande cuanto más se repitió). ═══════════════════════════════════════════════════════════════════ */ .encuesta-form{ flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .encuesta-form input{ font-size: 2rem; font-weight: 800; text-align: center; padding: 20px 16px; min-height: 76px; } .encuesta-form .pista{ text-align: center; } .nube{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 10px; } .nube span{ font-weight: 800; line-height: 1.2; color: var(--texto); animation: aparece-nube 400ms both; } .nube span:nth-child(4n+1){ color: var(--op1); } .nube span:nth-child(4n+2){ color: var(--op2); } .nube span:nth-child(4n+3){ color: var(--oro); } .nube span:nth-child(4n+4){ color: var(--op4); } @keyframes aparece-nube{ from{ opacity: 0; transform: scale(.7); } } /* ═══════════════════════════════════════════════════════════════════ Gráfica de barras de la revelación: cuántos contestaron cada opción, en el celular. Primer momento de la revelación, antes de la anécdota. ═══════════════════════════════════════════════════════════════════ */ .barra-op{ margin-bottom: 12px; } .barra-op-cab{ display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: .95rem; margin-bottom: 5px; } .barra-op-cab .t{ flex: 1; overflow-wrap: anywhere; } .barra-op-cab b{ font-variant-numeric: tabular-nums; color: var(--texto-2); } .barra-op.correcta .barra-op-cab{ color: var(--ok); } .barra-op.correcta .barra-op-cab b{ color: var(--ok); } .barra-op-fondo{ height: 22px; background: var(--fondo-3); border-radius: 999px; overflow: hidden; } .barra-op-fondo i{ display: block; height: 100%; border-radius: 999px; width: 0%; transition: width 600ms cubic-bezier(.2,.7,.3,1); } .barra-op.mia .barra-op-cab .t::after{ content: ' 👈 tu respuesta'; font-weight: 400; color: var(--oro-claro); } /* ── Barra de tiempo ────────────────────────────────────────────── */ .barra-tiempo{ position: relative; height: 14px; width: 100%; background: var(--fondo-3); border-radius: 999px; overflow: hidden; } .barra-tiempo > i{ display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--oro), var(--oro-claro)); transform-origin: left center; border-radius: 999px; } .barra-tiempo.urgente > i{ background: linear-gradient(90deg, #cf3242, #ff6b78); } /* ── Avisos flotantes ───────────────────────────────────────────── */ #tostadas{ position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 9000; width: min(560px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .tostada{ background: var(--fondo-3); color: var(--texto); border: 1px solid var(--linea); border-left: 5px solid var(--oro); border-radius: var(--r-chico); padding: 14px 16px; font-weight: 600; box-shadow: var(--sombra); animation: entra-arriba 260ms both; } .tostada.error{ border-left-color: var(--mal); } .tostada.exito{ border-left-color: var(--ok); } .tostada .t{ font-weight: 800; display: block; } @keyframes entra-arriba{ from{ opacity:0; transform: translateY(-14px) } } /* ── Cargando ───────────────────────────────────────────────────── */ .girando{ width: 34px; height: 34px; margin: 24px auto; border: 3px solid var(--linea); border-top-color: var(--oro); border-radius: 50%; animation: gira .8s linear infinite; } @keyframes gira{ to{ transform: rotate(360deg) } } /* ── Píldoras y contadores ──────────────────────────────────────── */ .pildora{ display: inline-flex; align-items: center; gap: 6px; background: var(--fondo-3); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px; font-size: .9rem; font-weight: 700; } .pildora.oro{ background: rgba(200,169,106,.15); border-color: var(--oro); color: var(--oro-claro); } /* ── Lista de posiciones ────────────────────────────────────────── */ .tabla-pos{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tabla-pos li{ display: flex; align-items: center; gap: 12px; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: var(--r-chico); padding: 12px 16px; transition: transform 400ms cubic-bezier(.2,.7,.3,1); } .tabla-pos li.yo{ border-color: var(--oro); background: rgba(200,169,106,.12); } .tabla-pos .num{ font-weight: 800; color: var(--texto-3); width: 32px; font-size: 1.1rem; } .tabla-pos .nom{ flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabla-pos .pts{ font-weight: 800; color: var(--oro-claro); font-variant-numeric: tabular-nums; } .tabla-pos li:nth-child(1) .num{ color: #ffd479; } .tabla-pos li:nth-child(2) .num{ color: #d9d9d9; } .tabla-pos li:nth-child(3) .num{ color: #d09a6a; } /* ── Utilidades de disposición ──────────────────────────────────── */ .pila{ display: flex; flex-direction: column; gap: 12px; } .fila{ display: flex; align-items: center; gap: 10px; } .envoltura{ width: min(560px, 100%); margin: 0 auto; padding: 20px 16px 32px; } /* ── Accesibilidad ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; } } .solo-lectores{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }