/**
 * OS TigerLab — Dashboard Helpers
 *
 * Componentes para el dashboard del alumno (panel/index.html y futuras
 * vistas de actividad).
 *
 * - .ostl-heatmap          → grid de actividad estilo GitHub.
 * - .ostl-badge-grid       → grid de badges/logros.
 * - .ostl-stat-card        → tarjeta de estadística con counter.
 * - .ostl-streak-display   → racha actual con flame animado.
 */

/* =================================================================== */
/* HEATMAP                                                              */
/* =================================================================== */
.ostl-heatmap {
    --cell: 11px;
    --gap: 3px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, var(--cell));
    gap: var(--gap);
    padding: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: thin;
}
.ostl-heatmap::-webkit-scrollbar { height: 4px; }
.ostl-heatmap::-webkit-scrollbar-thumb {
    background: var(--color-border-default, #2A2A2A);
    border-radius: 999px;
}

.ostl-heatmap__cell {
    width: var(--cell);
    height: var(--cell);
    background: color-mix(in oklab, var(--color-text-secondary) 12%, var(--color-bg-secondary, #161616));
    border-radius: 2px;
    transition: transform var(--d-fast, 160ms);
    position: relative;
    cursor: default;
}
.ostl-heatmap__cell:hover {
    transform: scale(1.4);
    z-index: 1;
    outline: 1px solid var(--color-accent, #00FF9C);
}

.ostl-heatmap__cell[data-level="0"] { background: color-mix(in oklab, var(--color-text-secondary) 10%, var(--color-bg-secondary)); }
.ostl-heatmap__cell[data-level="1"] { background: color-mix(in oklab, var(--color-accent, #00FF9C) 22%, transparent); }
.ostl-heatmap__cell[data-level="2"] { background: color-mix(in oklab, var(--color-accent, #00FF9C) 45%, transparent); }
.ostl-heatmap__cell[data-level="3"] { background: color-mix(in oklab, var(--color-accent, #00FF9C) 70%, transparent); }
.ostl-heatmap__cell[data-level="4"] { background: var(--color-accent, #00FF9C); }

.ostl-heatmap__legend {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: var(--sp-2);
}
.ostl-heatmap__legend-cell {
    width: var(--cell, 11px); height: var(--cell, 11px);
    border-radius: 2px;
}

/* =================================================================== */
/* STAT CARDS                                                           */
/* =================================================================== */
.ostl-stat-card {
    background: var(--color-bg-elevated, #1E1E1E);
    border: 1px solid var(--color-border-default, #2A2A2A);
    border-radius: var(--radius-lg, 16px);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    transition: border-color var(--d-fast, 160ms), transform var(--d-fast);
}
.ostl-stat-card:hover {
    border-color: color-mix(in oklab, var(--color-accent, #00FF9C) 30%, var(--color-border-default));
    transform: translateY(-2px);
}
.ostl-stat-card__icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md, 12px);
    background: color-mix(in oklab, var(--color-accent, #00FF9C) 15%, transparent);
    color: var(--color-accent, #00FF9C);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.ostl-stat-card__body { min-width: 0; }
.ostl-stat-card__value {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: var(--fs-3xl, 1.875rem);
    line-height: 1;
    color: var(--color-text-primary, #F5F5F5);
    margin: 0 0 2px;
}
.ostl-stat-card__label {
    font-size: var(--fs-xs, 0.8125rem);
    color: var(--color-text-secondary, #B3B3B3);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =================================================================== */
/* BADGES GRID (logros)                                                 */
/* =================================================================== */
.ostl-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--sp-3, 12px);
}

.ostl-badge-tile {
    text-align: center;
    padding: var(--sp-3) var(--sp-2);
    background: var(--color-bg-elevated, #1E1E1E);
    border: 1px solid var(--color-border-default, #2A2A2A);
    border-radius: var(--radius-md, 12px);
    transition: transform var(--d-fast), border-color var(--d-fast);
    cursor: default;
    position: relative;
}
.ostl-badge-tile:hover {
    transform: scale(1.04);
    border-color: color-mix(in oklab, var(--color-accent, #00FF9C) 40%, var(--color-border-default));
}
.ostl-badge-tile[data-locked="true"] {
    opacity: 0.45;
    filter: grayscale(0.8);
}

.ostl-badge-tile__emoji {
    font-size: 36px;
    line-height: 1;
    margin-bottom: var(--sp-2);
    display: block;
}
.ostl-badge-tile__icon {
    width: 44px; height: 44px;
    margin: 0 auto var(--sp-2);
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--color-accent, #00FF9C), var(--color-accent-2, #00B4FF));
    color: var(--color-text-on-accent, #0A0A0A);
}
.ostl-badge-tile[data-locked="true"] .ostl-badge-tile__icon {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.ostl-badge-tile__title {
    font-weight: 600;
    font-size: var(--fs-sm, 0.9375rem);
    margin: 0 0 2px;
    color: var(--color-text-primary, #F5F5F5);
}
.ostl-badge-tile__desc {
    font-size: 11px;
    color: var(--color-text-secondary, #B3B3B3);
    margin: 0;
    line-height: 1.4;
}
.ostl-badge-tile__date {
    font-size: 10px;
    color: var(--color-accent);
    margin-top: 4px;
}

/* =================================================================== */
/* STREAK DISPLAY                                                       */
/* =================================================================== */
.ostl-streak-display {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: linear-gradient(135deg,
        color-mix(in oklab, #FBBF24 20%, transparent),
        color-mix(in oklab, var(--color-accent, #00FF9C) 12%, transparent));
    border: 1px solid color-mix(in oklab, #FBBF24 35%, transparent);
    border-radius: var(--radius-pill, 999px);
    color: var(--color-text-primary);
    font-weight: 600;
    font-family: var(--font-body);
}
.ostl-streak-display__flame {
    color: #FBBF24;
    width: 18px; height: 18px;
    animation: ostl-streak-display-flame 1.4s ease-in-out infinite alternate;
    transform-origin: bottom center;
}
.ostl-streak-display__count {
    font-family: var(--font-display, 'Poppins', sans-serif);
    font-size: var(--fs-lg, 1.125rem);
    line-height: 1;
}
.ostl-streak-display__label {
    color: var(--color-text-secondary, #B3B3B3);
    font-size: var(--fs-xs, 0.8125rem);
}
@keyframes ostl-streak-display-flame {
    from { transform: rotate(-3deg) scale(1); }
    to   { transform: rotate(3deg) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .ostl-streak-display__flame { animation: none !important; }
    .ostl-stat-card,
    .ostl-badge-tile,
    .ostl-heatmap__cell { transition: none !important; }
    .ostl-stat-card:hover,
    .ostl-badge-tile:hover {
        transform: none;
    }
}

[data-theme="light"] .ostl-stat-card,
[data-theme="light"] .ostl-badge-tile { background: #FFFFFF; }

/* =================================================================== */
/* Responsive — panel alumno (heatmap, stats, badges)                  */
/* =================================================================== */
@media (max-width: 768px) {
    .ostl-heatmap {
        --cell: 10px;
        --gap: 2px;
        padding: var(--sp-2, 8px) var(--sp-2, 8px) var(--sp-3, 12px);
    }

    .ostl-stat-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3, 12px);
    }

    .ostl-stat-card__icon {
        width: 40px;
        height: 40px;
    }

    .ostl-stat-card__value {
        font-size: clamp(1.5rem, 6vw, 1.75rem);
    }

    .ostl-badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: var(--sp-2, 8px);
    }

    .ostl-badge-tile__emoji {
        font-size: 28px;
    }

    .ostl-badge-tile__icon {
        width: 38px;
        height: 38px;
    }

    .ostl-streak-display {
        flex-wrap: wrap;
        max-width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .ostl-heatmap {
        --cell: 8px;
    }
}

@media (max-width: 768px) and (hover: none) {
    .ostl-stat-card:hover,
    .ostl-badge-tile:hover,
    .ostl-heatmap__cell:hover {
        transform: none;
    }

    .ostl-heatmap__cell:hover {
        outline: none;
    }
}