/**
 * OS TigerLab — Player Helpers (modo enfocado, atajos, highlights)
 *
 * Estos estilos son INDEPENDIENTES del player actual (`curso/index.php`).
 * Se activan vía data-attributes y clases agregadas por player-helpers.js.
 *
 * Modo enfocado:  body[data-focus-mode="true"]
 * Highlight UI:   .ostl-highlight + popover
 * Atajos overlay: .ostl-shortcuts-overlay
 */

/* =================================================================== */
/* MODO ENFOCADO                                                        */
/* =================================================================== */
body[data-focus-mode="true"] {
    --player-side-w: 0;
}

body[data-focus-mode="true"] .nav-sticky,
body[data-focus-mode="true"] .ostl-header,
body[data-focus-mode="true"] [data-focus-hide],
body[data-focus-mode="true"] [data-curso-sidebar],
body[data-focus-mode="true"] [data-curso-panel],
body[data-focus-mode="true"] aside.curso-sidebar,
body[data-focus-mode="true"] aside.curso-panel,
body[data-focus-mode="true"] .ostl-footer,
body[data-focus-mode="true"] .footer {
    display: none !important;
}

body[data-focus-mode="true"] main,
body[data-focus-mode="true"] .curso-content,
body[data-focus-mode="true"] [data-focus-target] {
    margin-inline: auto !important;
    max-width: var(--ostl-focus-max, 760px) !important;
    padding-inline: var(--sp-4, 16px) !important;
    padding-block: var(--sp-6, 24px) !important;
}

body[data-focus-mode="true"][data-focus-font="lg"] [data-focus-target] {
    font-size: 1.125rem;
    line-height: 1.7;
}
body[data-focus-mode="true"][data-focus-font="xl"] [data-focus-target] {
    font-size: 1.25rem;
    line-height: 1.75;
}

/* Botón flotante para salir de modo enfocado */
.ostl-focus-exit {
    position: fixed;
    top: var(--sp-3, 12px);
    right: var(--sp-3, 12px);
    z-index: 5050;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--color-bg-elevated, #1E1E1E);
    color: var(--color-text-primary, #F5F5F5);
    border: 1px solid var(--color-border-default, #2A2A2A);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    font-size: var(--fs-sm, 0.9375rem);
    box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,0.3));
    font-family: var(--font-body, system-ui, sans-serif);
}
body[data-focus-mode="true"] .ostl-focus-exit {
    display: inline-flex;
    animation: ostl-focus-exit-in 240ms ease-out;
}
.ostl-focus-exit:hover { background: var(--color-bg-secondary, #161616); }
.ostl-focus-exit:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ostl-focus-exit kbd {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
}

@keyframes ostl-focus-exit-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =================================================================== */
/* HIGHLIGHTS DEL ALUMNO                                                */
/* =================================================================== */
.ostl-highlight {
    background: color-mix(in oklab, var(--color-accent, #00FF9C) 32%, transparent);
    padding: 1px 2px;
    border-radius: 3px;
    cursor: help;
    transition: background var(--d-fast, 160ms);
}
.ostl-highlight[data-color="yellow"] { background: color-mix(in oklab, #FBBF24 35%, transparent); }
.ostl-highlight[data-color="cyan"]   { background: color-mix(in oklab, var(--color-accent-2, #00B4FF) 35%, transparent); }
.ostl-highlight[data-color="pink"]   { background: color-mix(in oklab, #F472B6 35%, transparent); }
.ostl-highlight:hover {
    background: color-mix(in oklab, var(--color-accent, #00FF9C) 50%, transparent);
}

.ostl-highlight-popover {
    position: absolute;
    z-index: 5400;
    background: var(--color-bg-elevated, #1E1E1E);
    color: var(--color-text-primary, #F5F5F5);
    border: 1px solid var(--color-border-default, #2A2A2A);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-3, 0 12px 32px rgba(0,0,0,0.5));
    padding: 6px;
    display: flex;
    gap: 4px;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity var(--d-fast, 160ms), transform var(--d-fast);
    pointer-events: none;
}
.ostl-highlight-popover[data-visible="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ostl-highlight-popover button {
    width: 28px; height: 28px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background var(--d-fast);
}
.ostl-highlight-popover button:hover {
    background: var(--color-bg-secondary, #161616);
}
.ostl-highlight-popover button[data-color] {
    width: 22px; height: 22px;
    border-radius: 50%;
}
.ostl-highlight-popover button[data-color="green"] { background: color-mix(in oklab, var(--color-accent, #00FF9C) 70%, transparent); }
.ostl-highlight-popover button[data-color="yellow"]{ background: color-mix(in oklab, #FBBF24 70%, transparent); }
.ostl-highlight-popover button[data-color="cyan"]  { background: color-mix(in oklab, var(--color-accent-2, #00B4FF) 70%, transparent); }
.ostl-highlight-popover button[data-color="pink"]  { background: color-mix(in oklab, #F472B6 70%, transparent); }

/* =================================================================== */
/* ATAJOS OVERLAY                                                       */
/* =================================================================== */
.ostl-shortcuts-overlay {
    position: fixed;
    inset: 0;
    z-index: 5800;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.ostl-shortcuts-overlay[data-open="true"] {
    display: flex;
    animation: ostl-shortcuts-fade var(--d-base, 240ms) ease-out;
}
.ostl-shortcuts-overlay__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ostl-shortcuts-overlay__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: var(--color-bg-elevated, #1E1E1E);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg, 16px);
    padding: var(--sp-5);
    box-shadow: var(--shadow-3);
}
.ostl-shortcuts-overlay__panel h2 {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: var(--fs-xl, 1.25rem);
    margin: 0 0 var(--sp-3);
}
.ostl-shortcuts-overlay__list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
}
.ostl-shortcuts-overlay__list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-2) 0;
    border-bottom: 1px dashed var(--color-border-default, #2A2A2A);
}
.ostl-shortcuts-overlay__list li:last-child { border-bottom: 0; }
.ostl-shortcuts-overlay__list .keys {
    display: inline-flex; gap: 4px;
}
.ostl-shortcuts-overlay__list kbd {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
}

@keyframes ostl-shortcuts-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ostl-focus-exit,
    .ostl-shortcuts-overlay,
    .ostl-highlight-popover {
        animation: none !important;
        transition-duration: 1ms !important;
    }
}
[data-theme="light"] .ostl-focus-exit,
[data-theme="light"] .ostl-shortcuts-overlay__panel,
[data-theme="light"] .ostl-highlight-popover {
    background: #FFFFFF;
    color: #0A0A0A;
}