/* /v5/css/footer.css */ /* Footer + modal. Oculta solo #listenerCount si tiene .hide-listeners. */ .footer-info { gap: 10px; } .footer-info button { -webkit-tap-highlight-color: transparent; appearance: none; border: 0; background: transparent; padding: 8px 10px; line-height: 1; cursor: pointer; border-radius: 10px; font-size: 18px; color: var(--fg-color, #111); transition: opacity .14s ease, filter .14s ease; touch-action: manipulation; } .footer-info button:hover { opacity: .8; filter: brightness(1.05); } .footer-info button:active { opacity: .9; } .footer-info button:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent-color, #000) 60%, transparent); outline-offset: 2px; } .footer-info .form-toggle i, .footer-info #viewToggle i { pointer-events: none; } .footer-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-muted, #333); isolation: isolate; } .footer-status.repaint { transform: translateZ(0.0001px); } /* Ocultar SOLO el astronauta + número */ html.hide-listeners #listenerCount { display: none !important; } #streamCircle.offline { color: #c23d3d; } #streamCircle.online { color: #2f9e44; } /* ---------- Modal del formulario ---------- */ #formContainer.hidden { display: none; } #formContainer { position: fixed; inset: 0; z-index: 2147483646; /* debajo del engranaje fijo por diseño actual */ display: grid; place-items: center; background: color-mix(in oklab, #000 45%, transparent); backdrop-filter: blur(2px); padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); contain: layout paint; overscroll-behavior: contain; } /* Tarjetas (form / thanks) */ #formContainer > * { width: min(560px, 92vw); max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); background: var(--card-bg, #fff); color: var(--fg-color, #111); border-radius: 14px; box-shadow: 0 6px 30px rgba(0,0,0,.18); transition: opacity .18s ease, transform .18s ease; will-change: opacity, transform; overflow: auto; } /* Estados exclusivos */ #formContainer[data-state="form"] #messageForm { display: grid; opacity: 1; transform: scale(1); } #formContainer[data-state="form"] #thankYouMessage { display: none; opacity: 0; transform: scale(.98); } #formContainer[data-state="thanks"] #messageForm { display: none; opacity: 0; transform: scale(.98); } #formContainer[data-state="thanks"] #thankYouMessage { display: block; opacity: 1; transform: scale(1); } /* Layout del form */ #messageForm { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 10px; padding: 14px; } /* Anti-zoom en móviles */ #formContainer textarea, #formContainer input { font-size: 16px; } /* Campo */ #formContainer textarea { grid-column: 1 / -1; min-height: 120px; resize: vertical; width: 100%; padding: 10px 12px; font-family: inherit; color: inherit; background: var(--input-bg, #f5f5f5); border: 1px solid var(--input-bd, #e1e1e1); border-radius: 10px; outline: none; } #formContainer textarea:focus { border-color: var(--focus, #888); } /* Botones del form */ #formContainer button[type="submit"], #formContainer #closeFormBtn { align-self: center; padding: 10px 14px; font-size: 14px; border-radius: 10px; border: 1px solid var(--btn-bd, #e1e1e1); background: var(--btn-bg, #fafafa); color: var(--fg-color, #111); cursor: pointer; transition: opacity .12s ease, filter .12s ease; } #formContainer button[type="submit"]:hover, #formContainer #closeFormBtn:hover { opacity: .9; } #formContainer button[type="submit"]:active, #formContainer #closeFormBtn:active { opacity: .85; } #formContainer button[type="submit"]:focus-visible, #formContainer #closeFormBtn:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent-color, #000) 55%, transparent); outline-offset: 2px; } /* Gracias */ #thankYouMessage { padding: 16px 18px; text-align: center; font-size: 15px; } /* Temas oscuros */ html.theme-dark-colorful #formContainer > *, html.theme-dark #formContainer > * { --card-bg: #121212; --fg-color: #e9e9e9; --input-bg: #1a1a1a; --input-bd: #2a2a2a; --btn-bg: #1a1a1a; --btn-bd: #2a2a2a; } /* Reduce motion: transiciones mínimas en modal y botones */ @media (prefers-reduced-motion: reduce) { .footer-info button, #formContainer > * { transition: none !important; } }