/* ===================================================== TEMA GLOBAL — cursos.pensa.ar Default: claro (blanco). Dark: clase .dark en El usuario elige explícitamente — el SO no influye. ===================================================== */ /* ── CLARO ── */ :root { --bg: #ffffff; --bg2: #f5f5f3; --bg3: #ebebea; --text: #111111; --text2: #555555; --text3: #aaaaaa; --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.15); --accent: #1558a0; --accent-bg: #e8f1fb; --green: #0d6b52; --green-bg: #e0f5ee; --amber: #7a4510; --amber-bg: #fef3e2; --radius: 10px; --code-bg: #f0efed; --code-text: #b5294e; --tag-android-bg: #e0f5ee; --tag-android-fg: #0d6b52; --tag-kotlin-bg: #eeedfe; --tag-kotlin-fg: #3c3489; --tag-compose-bg: #e8f1fb; --tag-compose-fg: #1558a0; --tag-arch-bg: #fef3e2; --tag-arch-fg: #7a4510; --tag-pronto-bg: #ebebea; --tag-pronto-fg: #aaaaaa; } /* ── OSCURO ── */ html.dark { --bg: #0f0f0f; --bg2: #1a1a1a; --bg3: #242424; --text: #f2f2f2; --text2: #888888; --text3: #484848; --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.14); --accent: #82b4eb; --accent-bg: #06294f; --green: #57c89e; --green-bg: #05312a; --amber: #f5c46e; --amber-bg: #3d2204; --code-bg: #222222; --code-text: #f08d72; --tag-android-bg: #05312a; --tag-android-fg: #57c89e; --tag-kotlin-bg: #221d56; --tag-kotlin-fg: #aea8ec; --tag-compose-bg: #06294f; --tag-compose-fg: #82b4eb; --tag-arch-bg: #3d2204; --tag-arch-fg: #f5c46e; --tag-pronto-bg: #222222; --tag-pronto-fg: #484848; } /* ── Botón copiar código ── */ .copy-btn { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 6px; border: 0.5px solid var(--border2); background: var(--bg); color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; } pre:hover ~ .copy-btn, .copy-btn:hover, .copy-btn:focus { opacity: 1; } /* También mostrar al hacer hover sobre el wrapper */ div:has(> pre):hover .copy-btn { opacity: 1; } .copy-btn:hover { background: var(--bg2); color: var(--text); } .copy-btn.copied { opacity: 1; color: var(--green); border-color: var(--green); }