/* MARKET MIRROR PRO — temas de color y tamaño de texto (por dispositivo). Se aplican con data-tema / data-texto en ; el selector 🎨 los guarda en localStorage. Paletas pensadas para NO forzar la vista: contraste suficiente sin blancos quemados, acentos calmados, fondos sin negro puro. */ /* ── Medianoche suave: azul profundo, contraste reposado (defecto nuevo) ── */ :root[data-tema="medianoche"] { --fondo: #0e1522; --panel: #16202f; --panel2: #121a28; --borde: #243349; --texto: #dde6f2; --dim: #93a7be; --verde: #43c98a; --rojo: #ef6a60; --dorado: #e0b566; --azul: #5f9dff; } /* ── Grafito cálido: grises con acentos tierra, mínima fatiga ── */ :root[data-tema="grafito"] { --fondo: #16181d; --panel: #1e2127; --panel2: #1a1d23; --borde: #2c3038; --texto: #e4e2dc; --dim: #a09d94; --verde: #7fb87a; --rojo: #d98277; --dorado: #d4b06a; --azul: #7da7d9; } /* ── Bosque nocturno: verdes apagados, muy descansado ── */ :root[data-tema="bosque"] { --fondo: #0f1713; --panel: #16211b; --panel2: #121c17; --borde: #24352c; --texto: #dbe7de; --dim: #8fa898; --verde: #56c690; --rojo: #e07b6e; --dorado: #cfae62; --azul: #64a9c9; } /* ── Claro sereno: para quien lee mejor en fondo claro (papel suave) ── */ :root[data-tema="claro"] { --fondo: #f2f0ea; --panel: #ffffff; --panel2: #f7f5f0; --borde: #d8d4ca; --texto: #2b3440; --dim: #6b7684; --verde: #1e8e5a; --rojo: #c44b42; --dorado: #a5762a; --azul: #2569c9; } :root[data-tema="claro"] .t-spark, :root[data-tema="claro"] canvas { filter: none; } /* ── Alto contraste: visión reducida — máxima separación ── */ :root[data-tema="contraste"] { --fondo: #000000; --panel: #101318; --panel2: #0a0d11; --borde: #3f4c5e; --texto: #ffffff; --dim: #b8c4d4; --verde: #4dff9e; --rojo: #ff6b5e; --dorado: #ffd166; --azul: #6db3ff; } /* ── Tamaño de texto (accesibilidad): escala TODO el layout ── */ :root[data-texto="grande"] body { zoom: 1.12; } :root[data-texto="extra"] body { zoom: 1.24; } /* ── Selector 🎨 (compartido dashboard/bitácora) ── */ #tema-panel { position: fixed; top: 54px; right: 16px; z-index: 200; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.45); width: 250px; } #tema-panel h4 { font-size: 12.5px; margin: 0 0 8px; color: var(--texto); } #tema-panel .tp-sec { font-size: 10.5px; color: var(--dim); margin: 10px 0 6px; letter-spacing: .05em; text-transform: uppercase; } .tp-opcion { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; color: var(--texto); cursor: pointer; text-align: left; } .tp-opcion:hover { background: var(--panel2); } .tp-opcion.activo { outline: 1px solid var(--azul); background: var(--panel2); } .tp-muestra { width: 30px; height: 16px; border-radius: 5px; display: inline-block; border: 1px solid rgba(255,255,255,.18); flex-shrink: 0; } #btn-tema { font-size: 15px; }