/* ============================================ BINAS USER PREFERENCES - Font Profiles & Display Settings Font profiles se aplican mediante el atributo data-binas-font en . El JS (binas-user-preferences.js) se encarga de aplicarlo al inicio antes del render para evitar FOUC (Flash of Unstyled Content). Versión: 1.0 Fecha: Junio 2025 ============================================ */ /* ============================================ FONT PROFILE: default Nunito 400 — Equilibrado, estándar del sistema ============================================ */ html[data-binas-font="default"], html:not([data-binas-font]) { /* Usa los tokens existentes sin override */ } /* ============================================ FONT PROFILE: legible Inter 400 — Mayor definición tipográfica, ideal para lectura prolongada ============================================ */ html[data-binas-font="legible"] { --font-primary: "Inter", "Segoe UI", sans-serif; --font-family-base: var(--font-primary); --font-family-heading: var(--font-primary); --font-weight-normal: 400; } html[data-binas-font="legible"] body { font-family: var(--font-primary); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ FONT PROFILE: presentation Inter 500 — Optimizado para proyectores y presentaciones Tamaño base aumentado, mayor contraste tipográfico ============================================ */ html[data-binas-font="presentation"] { --font-primary: "Inter", "Segoe UI", sans-serif; --font-family-base: var(--font-primary); --font-family-heading: var(--font-primary); --font-weight-normal: 500; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px (era 14px) */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 1.875rem; /* 30px */ --font-size-3xl: 2.5rem; /* 40px */ --line-height-normal: 1.6; } html[data-binas-font="presentation"] body { font-family: var(--font-primary); font-weight: 500; font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ FONT PROFILE: system System UI — Máxima compatibilidad, sin descarga de fuentes ============================================ */ html[data-binas-font="system"] { --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-base: var(--font-primary); --font-family-heading: var(--font-primary); --font-weight-normal: 400; } html[data-binas-font="system"] body { font-family: var(--font-primary); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ FONT SELECTOR UI — Estilos del panel en el dropdown ============================================ */ .binas-font-selector { padding: 0.5rem 0.75rem; } .binas-font-selector-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--outlook-text-tertiary, #8590a5); padding: 0 0.25rem; margin-bottom: 0.375rem; display: flex; align-items: center; gap: 0.375rem; } .binas-font-selector-label i { font-size: 0.75rem; opacity: 0.7; } .binas-font-options { display: flex; flex-direction: column; gap: 0.125rem; } .binas-font-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm, 4px); cursor: pointer; transition: background-color 0.15s ease; border: none; background: none; width: 100%; text-align: left; font-size: 0.8125rem; color: var(--outlook-text-primary, #1b1b1b); } .binas-font-option:hover { background-color: var(--color-gray-50, #f8f9fa); } .binas-font-option.active { background-color: rgba(74, 144, 226, 0.08); color: var(--color-primary, #4a90e2); } .binas-font-option-radio { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-gray-300, #c4c4c4); flex-shrink: 0; position: relative; transition: border-color 0.15s ease; } .binas-font-option.active .binas-font-option-radio { border-color: var(--color-primary, #4a90e2); } .binas-font-option.active .binas-font-option-radio::after { content: ''; position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-primary, #4a90e2); } .binas-font-option-info { display: flex; flex-direction: column; min-width: 0; } .binas-font-option-name { font-weight: 500; line-height: 1.3; } .binas-font-option-desc { font-size: 0.6875rem; color: var(--outlook-text-tertiary, #8590a5); line-height: 1.3; } /* ============================================ LOCALSTORAGE INFO — Badge en el menú ============================================ */ .binas-storage-info { padding: 0.375rem 1rem; font-size: 0.6875rem; color: var(--outlook-text-tertiary, #8590a5); display: flex; align-items: center; gap: 0.375rem; } .binas-storage-info i { opacity: 0.5; } .binas-storage-clear-btn { margin-left: auto; background: none; border: none; color: var(--color-danger, #e53e3e); font-size: 0.6875rem; cursor: pointer; padding: 0; opacity: 0.7; transition: opacity 0.15s ease; } .binas-storage-clear-btn:hover { opacity: 1; }