/* ===================================================================== NovaHost — Widget de Accesibilidad (self-hosted, estilo Sienna) Marca NovaHost (cyan/navy), soft-UI, theme-aware (claro/oscuro). Las features se aplican como clases en desde nv-a11y.js. ===================================================================== */ :root { --nva-cyan: #0891b2; --nva-navy: #0b2a45; --nva-surface: #ffffff; --nva-ink: #1e3a5f; --nva-ink-soft: #56708c; --nva-border: #e3ebf3; --nva-shadow: 0 18px 48px -14px rgba(11,42,69,.4); } /* ---------- botón flotante ---------- */ /* Este FAB va SIEMPRE arriba de la pila de la esquina inferior derecha; debajo se reserva el hueco del botón "volver arriba" (92px), aunque esté oculto por falta de scroll, para que nada salte al bajar. Sube otro escalón cuando además está la burbuja de IA (html.nv-ai-present, que pone ai-widget.js). */ .nva-fab { position: fixed; z-index: 2147483000; inset-block-end: 22px; inset-inline-end: 22px; /* ver nota del apilado abajo */ width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: var(--color-cyan, #0891B2); color: #fff; box-shadow: 0 12px 28px rgba(18, 38, 63, .28); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, box-shadow .2s ease; } .nva-fab:hover { transform: translateY(-2px) scale(1.04); } .nva-fab:focus-visible { outline: 3px solid var(--nva-cyan); outline-offset: 3px; } .nva-fab svg { width: 28px; height: 28px; } /* Accesibilidad es PERMANENTE y va en el 2º slot, directamente encima del chat de IA: la pila fija (chat + accesibilidad) queda pegada abajo y NO se mueve nunca. El "volver arriba" (transitorio, sólo con scroll) va ARRIBA de este, en el 3er slot (ver nv-totop.css) — no intercalado en el medio. Así no hay reflow ni hueco huérfano: sin scroll se ve chat+accesibilidad juntos; al bajar, el "volver arriba" asoma por encima. sin IA: accesibilidad en la esquina ..... 22 con IA: chat 22 + accesibilidad ......... 92 */ html.nv-ai-present .nva-fab { inset-block-end: 92px; } html.nv-ai-present .nva-panel { inset-block-end: 160px; } /* El chat IA (z-index 1040) queda por debajo de este FAB (z-index casi-máximo); mientras el chat está abierto ocultamos FAB y panel para que no tapen el chat. */ html.nv-ai-panel-open .nva-fab, html.nv-ai-panel-open .nva-panel { display: none; } /* ---------- panel ---------- */ .nva-panel { position: fixed; z-index: 2147483000; inset-block-end: 90px; inset-inline-end: 22px; /* encima del FAB; sube con los slots ocupados */ width: min(340px, calc(100vw - 44px)); max-height: min(78vh, 640px); overflow-y: auto; background: var(--nva-surface); color: var(--nva-ink); border: 1px solid var(--nva-border); border-radius: 20px; box-shadow: var(--nva-shadow); padding: 18px; opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: opacity .2s ease, transform .2s ease; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .nva-panel[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; } .nva-panel__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; } .nva-panel__title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 0; } .nva-panel__close { border: none; background: transparent; color: var(--nva-ink-soft); cursor: pointer; width: 32px; height: 32px; border-radius: 10px; font-size: 20px; line-height: 1; } .nva-panel__close:hover { background: rgba(8,145,178,.1); color: var(--nva-cyan); } .nva-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .nva-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; cursor: pointer; border: 1.5px solid var(--nva-border); background: transparent; color: var(--nva-ink); font-size: 12.5px; font-weight: 600; text-align: center; transition: .15s ease; } .nva-opt svg { width: 24px; height: 24px; color: var(--nva-cyan); } .nva-opt:hover { border-color: var(--nva-cyan); transform: translateY(-1px); } .nva-opt[aria-pressed="true"] { border-color: var(--nva-cyan); background: linear-gradient(135deg, rgba(8,145,178,.14), rgba(34,184,220,.08)); box-shadow: inset 0 0 0 1px var(--nva-cyan); } .nva-opt[aria-pressed="true"] .nva-opt__dot { opacity: 1; } .nva-opt__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nva-cyan); opacity: 0; } .nva-reset { margin-top: 12px; width: 100%; padding: 11px; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--nva-border); background: transparent; color: var(--nva-ink); font-weight: 700; font-size: 13px; transition: .15s ease; } .nva-reset:hover { border-color: #dc2626; color: #dc2626; } .nva-panel__foot { margin-top: 12px; font-size: 11px; color: var(--nva-ink-soft); text-align: center; } /* ===================================================================== FEATURES aplicadas a (clases nva-*) ===================================================================== */ /* tamaño de fuente escalable */ html.nva-font-1 { font-size: 108%; } html.nva-font-2 { font-size: 118%; } html.nva-font-3 { font-size: 130%; } /* alto contraste */ html.nva-contrast, html.nva-contrast body { background: #000 !important; color: #fff !important; } html.nva-contrast a, html.nva-contrast .nvm-nav-link, html.nva-contrast button { color: #ffe600 !important; } html.nva-contrast .nvm-card, html.nva-contrast .card, html.nva-contrast .nva-panel { background: #0a0a0a !important; border-color: #ffe600 !important; } /* enlaces resaltados */ html.nva-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dotted currentColor; outline-offset: 2px; } /* fuente legible: OpenDyslexic real (auto-hospedada, sin CDN) */ @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } html.nva-readable, html.nva-readable body, html.nva-readable p, html.nva-readable span, html.nva-readable a, html.nva-readable li, html.nva-readable td, html.nva-readable label, html.nva-readable h1, html.nva-readable h2, html.nva-readable h3, html.nva-readable button { font-family: 'OpenDyslexic', Verdana, "Trebuchet MS", Tahoma, sans-serif !important; letter-spacing: .02em !important; } /* espaciado de línea y palabra */ html.nva-spacing p, html.nva-spacing li, html.nva-spacing td, html.nva-spacing span, html.nva-spacing div { line-height: 1.9 !important; letter-spacing: .04em !important; word-spacing: .12em !important; } /* escala de grises */ html.nva-grayscale { filter: grayscale(100%); } /* detener animaciones */ html.nva-nomotion *, html.nva-nomotion *::before, html.nva-nomotion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* guía de lectura (regla horizontal que sigue el cursor) */ .nva-guide { position: fixed; left: 0; right: 0; height: 40px; z-index: 2147482000; pointer-events: none; background: rgba(8,145,178,.14); border-block: 2px solid var(--nva-cyan); display: none; } html.nva-guide-on .nva-guide { display: block; } /* foco reforzado siempre visible cuando el widget está activo */ html.nva-focus *:focus-visible { outline: 3px solid var(--nva-cyan) !important; outline-offset: 2px !important; } /* cursor grande (contorno blanco+negro, visible en fondo claro u oscuro) */ html.nva-bigcursor, html.nva-bigcursor a, html.nva-bigcursor button, html.nva-bigcursor [role="button"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3 L34 20 L20 23 L26 35 L20 37 L14 24 L6 32 Z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2, auto !important; } /* saturación: 3 niveles independientes de contraste/escala de grises */ html.nva-sat-1 { filter: saturate(0.45); } html.nva-sat-2 { filter: saturate(1.6); } html.nva-sat-3 { filter: saturate(2.4); } @media print { .nva-fab, .nva-panel, .nva-guide { display: none !important; } }