/* ============================================
   playground.edubox.app — Override / estilos específicos de proyecto
   Se carga SIEMPRE después de boxui.css y boxui-public.css.
   Fuera de capas: gana a todo BoxUI por defecto.
   Solo variables y reglas del proyecto, sin !important.
   ============================================ */

/* === IDENTIDAD DE MARCA === */
:root {
    --box-brand-500: var(--box-brand);
}

[v-cloak] { display: none; }

/* === EXPLORADOR DE TRES COLUMNAS === */
.playground-explorer__head { margin-bottom: var(--box-spacing); }
.playground-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--box-gutter);
    align-items: start;
}
.playground-column {
    min-width: 0;
    border: var(--box-border-width) solid var(--box-border);
    border-radius: var(--box-radius-lg);
    background: var(--box-surface);
    overflow: hidden;
}
.playground-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--box-spacing);
    padding: var(--box-spacing);
    border-bottom: var(--box-border-width) solid var(--box-border);
}
.playground-column__title { display: flex; align-items: center; gap: calc(var(--box-spacing) * 0.7); min-width: 0; }
.playground-column__title h2 { margin: 0; font-size: var(--box-text-base); line-height: var(--box-line-height); }
.playground-column__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    border-radius: var(--box-radius-sm);
    color: var(--box-text-on-brand);
    background: var(--box-brand-500);
}
.playground-column__count { color: var(--box-text-muted); font-size: var(--box-text-xs); white-space: nowrap; }
.playground-column__search {
    display: flex;
    align-items: center;
    gap: var(--box-spacing);
    margin: var(--box-spacing);
    padding: 0 var(--box-spacing);
    min-height: var(--box-control-h);
    border: var(--box-border-width) solid var(--box-border);
    border-radius: var(--box-radius-pill);
    color: var(--box-text-muted);
    background: var(--box-surface);
}
.playground-column__search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.playground-column__search:focus-within { border-color: var(--box-brand-500); }
.playground-column__list {
    height: min(62vh, 42rem);
    min-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--box-spacing) var(--box-spacing);
    scrollbar-width: thin;
}
.playground-column__list--static { height: auto; min-height: 0; }
.playground-tool-card {
    position: relative;
    height: 5rem;
    min-height: 5rem;
    margin-top: calc(var(--box-spacing) * 0.5);
    border: var(--box-border-width) solid var(--box-border);
    border-radius: var(--box-radius-sm);
    background: var(--box-surface);
    overflow: hidden;
    isolation: isolate;
    transition: var(--box-transition);
}
.playground-tool-card__normal { display: flex; align-items: center; gap: var(--box-spacing); min-height: 4rem; padding: var(--box-spacing); }
.playground-tool-card__normal strong { min-width: 0; flex: 1; font-size: var(--box-text-sm); line-height: 1.25; }
.playground-tool-card__icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: var(--box-radius-xs); color: var(--box-brand-500); background: var(--box-brand-100); }
.playground-tool-card__access { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; padding: 0.4rem 0.5rem; border-radius: var(--box-radius-xs); color: var(--box-brand-500); font-size: var(--box-text-xs); font-weight: 700; text-decoration: none; }
.playground-tool-card__description {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.45rem;
    padding: var(--box-spacing);
    color: var(--box-text-on-brand);
    background: var(--box-brand-700);
    opacity: 1;
    overflow: hidden;
    transform: none;
}
.playground-tool-card__description span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--box-text-xs); line-height: 1.35; }
.playground-tool-card__description a { align-self: flex-start; color: inherit; font-size: var(--box-text-xs); font-weight: 700; text-decoration: none; }

/* === FICHA: VALORACIÓN === */
.playground-rating-card { padding: var(--box-spacing); overflow: hidden; background: linear-gradient(145deg, var(--box-brand-100), var(--box-surface)); border-color: var(--box-brand-200); }
.playground-rating-card__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--box-brand-500); font-size: var(--box-text-xs); font-weight: 800; letter-spacing: var(--box-tracking-wide); text-transform: uppercase; }
.playground-rating-card h3 { margin: 0.55rem 0 1rem; font-size: var(--box-text-lg); }
.playground-rating-card__score { display: flex; align-items: center; gap: var(--box-spacing); }
.playground-rating-score { color: var(--box-text); font-size: var(--box-text-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.playground-rating-card__votes { color: var(--box-text-muted); font-size: var(--box-text-xs); line-height: 1.35; }
.playground-rating.playground-rating { display: flex; justify-content: center; gap: 0.25rem; width: 100%; margin: 1rem 0 0.65rem; }
.playground-rating .box-rating-star { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; min-height: 0; padding: 0; border: var(--box-border-width) solid var(--box-amber-500); border-radius: var(--box-radius-sm); color: var(--box-amber-500); background: var(--box-surface); cursor: pointer; transition: var(--box-transition); }
.playground-rating .box-rating-star.is-active { color: white; border-color: var(--box-amber-700); background: var(--box-amber-500); transform: translateY(-2px); outline: none; }

/* === NAV: BOTÔN CREAR ✨ === */
.box-crear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.85rem;
    font-weight: 700;
    letter-spacing: var(--box-tracking-tight);
    background: linear-gradient(135deg, var(--box-brand-500), var(--box-brand-700));
    border: none;
    box-shadow: var(--box-shadow-brand);
}
.box-crear-btn:hover {
    box-shadow: var(--box-shadow-brand);
    translate: none;
}

/* === NAV: USUARIO LOGEADO (header + drawer) === */
.box-nav-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
}
.box-nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--box-border);
    object-fit: cover;
}
.box-nav-user-row {
    opacity: 0.7;
    pointer-events: none;
}

/* === CONTENEDORES CENTRADOS === */
/* box-container-narrow solo define max-width; le sumamos margin-inline:auto
   para que se centre dentro del <main class="box-container"> cuando se usa
   directamente (sin wrapper flex que lo empuje). */
body[data-ui-context="public"] .box-container-narrow {
    margin-inline: auto;
}

/* === AJUSTES DE TARJETAS (Landing) === */
[id^="panel-"] .box-card,
#app-buscador .box-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[id^="panel-"] .box-card .box-actions,
#app-buscador .box-card .box-actions {
    margin-top: auto;
    padding-top: var(--box-spacing);
}

/* === UTILIDADES EXTRAS === */
.box-w-full { width: 100%; }
.box-h-full { height: 100%; }
.box-h-400 { height: 400px; }
.box-border-none { border: none; }
.box-icon-xs { width: 14px; height: 14px; }
.box-icon-sm { width: 16px; height: 16px; }
.box-icon-fill { fill: currentColor; }

/* === CHEVRON ROTATIVO EN <details> === */
.box-chevron-rotate {
    transition: transform var(--box-transition);
}
details[open] .box-chevron-rotate {
    transform: rotate(180deg);
}

/* === PIE DE PÁGINA === */
body[data-ui-context="public"] { min-height: 100vh; display: flex; flex-direction: column; }
body[data-ui-context="public"] > main.box-container { flex: 1 0 auto; }
body[data-ui-context="public"] > .box-public-footer { flex: 0 0 auto; clear: both; }
.box-public-footer { width: 100%; }
.box-public-footer .box-container { max-width: var(--box-container-max); }
.box-public-footer .box-footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(150px, 1fr)); gap: var(--box-gutter); }
@media (max-width: 720px) {
    .box-public-footer .box-footer-grid { grid-template-columns: 1fr 1fr; }
    .box-public-footer .box-footer-brand-col { grid-column: 1 / -1; }
}
.box-footer-brand-col .box-nav-brand { text-decoration: none; }
.box-footer-legal a { min-height: 2rem; display: inline-flex; align-items: center; }
.box-nav-brand-name { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; }

@media (max-width: 600px) {
    .box-nav-btn-text { display: none; }
    .box-crear-btn { padding-inline: 0.65rem; aspect-ratio: 1; justify-content: center; }
}

/* === MARGIN HELPERS === */
.box-mt-0 { margin-top: 0; }
.box-mt-1 { margin-top: calc(var(--box-spacing) * 0.5); }
.box-mt-2 { margin-top: var(--box-spacing); }
.box-mt-3 { margin-top: var(--box-gutter); }
.box-mb-0 { margin-bottom: 0.25rem; }
.box-mb-1 { margin-bottom: calc(var(--box-spacing) * 0.5); }
.box-mb-2 { margin-bottom: var(--box-spacing); }
.box-mb-3 { margin-bottom: var(--box-gutter); }

/* === GAP HELPERS === */
.box-gap-0 { gap: 0.45rem; }
.box-gap-1 { gap: var(--box-spacing); }
.box-gap-2 { gap: calc(var(--box-spacing) * 1.5); }
.box-gap-3 { gap: var(--box-gutter); }

/* === FLEX HELPERS === */
.box-cluster { display: flex; align-items: center; gap: var(--box-spacing); }
.box-cluster-between { justify-content: space-between; }
.box-stack { display: flex; flex-direction: column; }

/* === TEXT HELPERS === */
.box-block { display: block; }
.box-text-center { text-align: center; }
.box-text-right { text-align: right; }
.box-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* === CONTAINER HELPERS === */
.box-container-narrow { max-width: 26rem; width: 100%; margin-inline: auto; }

/* === STAT-ICON VARIANTS === */
.box-stat-icon--success {
    background: var(--box-success-bg);
    color: var(--box-success-fg);
}

.box-stat-icon--info {
    background: var(--box-info-bg);
    color: var(--box-info-fg);
}

.box-stat-icon--brand {
    background: var(--box-brand-soft);
    color: var(--box-brand-500);
}

.box-stat-icon--warning {
    background: var(--box-warning-bg);
    color: var(--box-warning-fg);
}

.box-stat-icon--danger {
    background: var(--box-danger-bg);
    color: var(--box-danger-fg);
}

/* === FICHA: LAYOUT DE DOS COLUMNAS === */
.playground-ficha {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.playground-ficha__main {
    flex: 1 1 0%;
    min-width: 0;
}
.playground-ficha__sidebar {
    width: 300px;
    flex-shrink: 0;
}
@media (max-width: 960px) {
    .playground-ficha {
        flex-direction: column;
        gap: var(--box-gutter);
    }
    .playground-ficha__sidebar {
        width: 100%;
    }
}

/* === JUGAR: ALTURA DEL IFRAME === */
.playground-game-frame {
    min-height: 480px;
    height: calc(100vh - 320px);
}

/* === FONT WEIGHT HELPER === */
.box-font-bold { font-weight: 700; }

/* === HERO SEARCH FIELD === */
.hero-search-field {
    display: flex;
    align-items: center;
    gap: var(--box-spacing);
    padding: 0 var(--box-spacing);
    height: var(--box-control-h);
    border: var(--box-border-width) solid var(--box-border);
    border-radius: var(--box-radius-pill);
    background: var(--box-surface);
    transition: var(--box-transition);
}

.hero-search-field:focus-within {
    border-color: var(--box-brand-500);
    box-shadow: var(--box-focus-ring);
}

.hero-search-field .fa-solid {
    color: var(--box-text-muted);
    flex: 0 0 auto;
}

.hero-search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--box-text);
    font-size: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.hero-search-field input::-webkit-search-decoration,
.hero-search-field input::-webkit-search-cancel-button,
.hero-search-field input::-webkit-search-results-button,
.hero-search-field input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* === ADMIN: UTILIDADES ADICIONALES === */
.box-inline-cluster { display: inline-flex; align-items: center; gap: 0.4rem; }
.box-text-none { text-decoration: none; color: inherit; }
.box-text-primary { color: var(--box-brand-500); }
.box-text-md { font-size: var(--box-text-md); }
.box-text-xl { font-size: 1.5rem; }
.box-avatar--brand { background: var(--box-brand-500); color: var(--box-text-on-brand); }
.admin-login-wrap { display: grid; place-items: center; min-height: 100vh; background: var(--box-canvas); padding: var(--box-gutter); }

/* === ADMIN: SHELL Y MENÚ LATERAL === */
.admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--box-spacing);
    padding: var(--box-spacing);
    background: var(--box-surface);
    border: var(--box-border-width) solid var(--box-border);
    border-radius: var(--box-radius-lg);
}
.admin-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--box-spacing);
    padding-block-end: var(--box-spacing);
    border-bottom: var(--box-border-width) solid var(--box-border-subtle);
}
.admin-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.admin-sidebar__brand:hover { text-decoration: none; }
.admin-sidebar__brand-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    border-radius: var(--box-radius-sm);
    background: var(--box-brand-soft);
    color: var(--box-brand);
    font-size: var(--box-text-lg);
}
.admin-sidebar__brand-text { display: flex; flex-direction: column; min-width: 0; }
.admin-sidebar__brand-text strong { font-size: var(--box-text-sm); line-height: 1.2; }
.admin-sidebar__brand-text small { color: var(--box-text-muted); font-size: var(--box-text-xs); }

/* Tarjetas de métrica clicables: sin subrayado ni color de enlace */
a.box-stat,
a.box-stat:hover {
    color: inherit;
    text-decoration: none;
}

/* === ADMIN: CHIPS DE FILTRO === */
/* El chip base de BoxUI representa un filtro aplicado. Cuando lleva
   aria-pressed se usa como opción seleccionable dentro de .box-filter-bar. */
.box-filter-chip[aria-pressed] {
    background: var(--box-surface);
    border: var(--box-border-width) solid var(--box-border);
    color: var(--box-text-muted);
    text-decoration: none;
    cursor: pointer;
}
.box-filter-chip[aria-pressed]:hover {
    background: var(--box-surface-hover);
    color: var(--box-text);
    text-decoration: none;
}
.box-filter-chip[aria-pressed="true"] {
    background: var(--box-brand-soft);
    border-color: var(--box-brand-border);
    color: var(--box-brand);
}

/* === ADMIN: SEGMENTADO (pestañas y opciones con radio) === */
.box-segmented-button {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--box-control-h-sm);
    padding: 0.3rem 0.8rem;
    border: 0;
    border-radius: var(--box-radius-pill);
    background: transparent;
    color: var(--box-text-muted);
    font-size: var(--box-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--box-dur-fast) var(--box-ease),
                color var(--box-dur-fast) var(--box-ease);
}
.box-segmented-button:hover {
    color: var(--box-text);
    background: var(--box-surface-hover);
    text-decoration: none;
}
.box-segmented-button.is-active,
.box-segmented-button[aria-selected="true"],
.box-segmented-button:has(input:checked) {
    color: var(--box-brand);
    background: var(--box-surface);
    box-shadow: var(--box-shadow-xs);
}
.box-segmented-button input[type="radio"] { display: none; }
.box-segmented-button i { font-size: 1em; }

/* === CORRECCIONES DE CASCADE LAYERS: Botones ===
   boxui-public.min.css define [data-ui-context=public] .box-btn dentro de
   @layer box.public, lo cual pisa las variantes (.box-btn-secondary,
   .box-btn-outline, etc.) al tener mayor especificidad y última capa.
   Redefinimos aquí todas las variantes SIN capa para que ganen siempre. */

/* --- Variantes de color (pisan variables base de box.public) --- */
[data-ui-context="public"] .box-btn-primary {
    --_bg: var(--boxp-accent);
    --_fg: var(--boxp-accent-contrast);
    --_bd: var(--_bg);
    --_bg-hover: var(--box-brand-hover);
}

[data-ui-context="public"] .box-btn-secondary {
    --_bg: var(--box-surface);
    --_fg: var(--box-text);
    --_bd: var(--box-border);
    --_bg-hover: var(--box-surface-hover);
}

[data-ui-context="public"] .box-btn-outline {
    --_bg: transparent;
    --_fg: var(--boxp-accent);
    --_bd: var(--boxp-border-strong);
    --_bg-hover: var(--boxp-accent-ghost);
}
[data-ui-context="public"] .box-btn-outline:hover {
    border-color: var(--boxp-accent);
}
[data-ui-context="public"] .box-btn-outline.box-btn-secondary {
    --_fg: var(--box-text-muted);
    --_bd: var(--box-border);
    --_bg-hover: var(--box-surface-hover);
}
[data-ui-context="public"] .box-btn-outline.box-btn-secondary:hover {
    color: var(--box-text);
    border-color: var(--box-border-strong);
}

[data-ui-context="public"] .box-btn-ghost {
    --_bg: transparent;
    --_fg: var(--box-text-muted);
    --_bd: transparent;
    --_bg-hover: var(--box-surface-hover);
}

[data-ui-context="public"] .box-btn-contrast,
[data-ui-context="public"] .box-btn-invert {
    --_bg: var(--box-text);
    --_fg: var(--box-canvas);
    --_bd: var(--box-text);
    --_bg-hover: var(--box-gray-700);
}

[data-ui-context="public"] .box-btn-success {
    --_bg: var(--box-success-solid);
    --_fg: var(--box-text-on-success-solid, var(--box-canvas));
    --_bd: var(--box-success-solid);
    --_bg-hover: color-mix(in srgb, var(--box-success-solid) 85%, var(--box-text));
}

[data-ui-context="public"] .box-btn-warning {
    --_bg: var(--box-warning-solid);
    --_fg: var(--box-text-on-warning-solid, var(--box-canvas));
    --_bd: var(--box-warning-solid);
    --_bg-hover: color-mix(in srgb, var(--box-warning-solid) 85%, var(--box-text));
}

[data-ui-context="public"] .box-btn-danger {
    --_bg: var(--box-danger-solid);
    --_fg: var(--box-text-on-danger-solid, var(--box-canvas));
    --_bd: var(--box-danger-solid);
    --_bg-hover: color-mix(in srgb, var(--box-danger-solid) 85%, var(--box-text));
}

[data-ui-context="public"] .box-btn-danger-outline {
    --_bg: transparent;
    --_fg: var(--box-danger-fg);
    --_bd: color-mix(in srgb, var(--box-danger-solid) 40%, transparent);
    --_bg-hover: var(--box-danger-bg);
}

[data-ui-context="public"] .box-btn-gradient {
    background: var(--boxp-gradient);
    background-position: 0%;
    background-size: 180% 180%;
    transition: background-position var(--boxp-dur-slow) var(--boxp-ease),
                translate var(--boxp-dur) var(--boxp-ease),
                box-shadow var(--boxp-dur) var(--boxp-ease);
}
[data-ui-context="public"] .box-btn-gradient:hover {
    background-position: 100%;
}

/* --- Tamaños y utilidades --- */
[data-ui-context="public"] .box-btn-block {
    width: 100%;
}

[data-ui-context="public"] .box-btn-xs {
    min-height: 26px;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
}

/* --- Correcciones de hover (mantener lift, sombras, sin transform para nav) --- */
[data-ui-context="public"] .box-nav-icon-btn:hover,
[data-ui-context="public"] .box-nav-toggle:hover,
[data-ui-context="public"] .box-nav-link:hover,
[data-ui-context="public"] .box-nav-brand:hover {
    transform: none;
}

[data-ui-context="public"] .box-btn:not(.box-btn-ghost):not(.box-btn-icon):hover,
[data-ui-context="public"] .box-btn-primary:hover,
[data-ui-context="public"] .box-btn-outline:hover {
    box-shadow: var(--box-shadow-sm);
}

[data-ui-context="public"] .box-btn-ghost:hover {
    background: var(--box-surface-hover);
    color: var(--box-text);
    box-shadow: none;
}

[data-ui-context="public"] .box-btn-icon:hover {
    background: var(--box-surface-hover);
    box-shadow: none;
}

[data-ui-context="public"] .box-link:hover,
[data-ui-context="public"] a:not(.box-btn):hover {
    box-shadow: none;
}

[data-ui-context="public"] .box-btn {
    --_bg: var(--boxp-accent);
    --_fg: var(--boxp-accent-contrast);
    --_bd: var(--boxp-accent);
    --_bg-hover: var(--box-brand-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.4rem;
    padding: 0 1rem;
    border-radius: var(--box-radius);
    border: 1px solid;
    background: var(--_bg);
    color: var(--_fg);
    border-color: var(--_bd);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease,
                border-color 180ms ease, translate 180ms ease,
                box-shadow 180ms ease, opacity 180ms ease;
}
[data-ui-context="public"] .box-btn-block { display: flex; width: 100%; }
[data-ui-context="public"] .box-btn-sm { min-height: 2rem; padding: 0 0.8rem; font-size: var(--box-text-sm); }
[data-ui-context="public"] .box-btn-lg { min-height: 2.8rem; padding: 0 1.2rem; font-size: var(--box-text-lg); }
[data-ui-context="public"] .box-btn-icon { width: 2.4rem; min-width: 2.4rem; padding: 0; justify-content: center; }
[data-ui-context="public"] .box-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* === CORRECCIONES: inputs con icono (box-input-group / box-input-icon) === */
.box-field {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}
.box-field > label,
label.box-field > span {
    display: block;
    font-size: var(--box-text-sm);
    font-weight: 600;
    color: var(--box-text);
}
.box-input-group {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--box-border);
    border-radius: var(--box-radius);
    background: var(--box-surface);
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.box-input-group:focus-within {
    border-color: var(--box-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--box-brand) 18%, transparent);
    background: var(--box-canvas);
}
.box-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.65rem;
    color: var(--box-text-muted);
    background: var(--box-surface-hover);
    border-right: 1px solid var(--box-border);
    min-width: 2.25rem;
    font-size: 0.95em;
    line-height: 1;
}
.box-input-icon i { display: block; margin: 0; line-height: 1; }
.box-input-group input,
.box-input-group textarea,
.box-input-group select {
    width: 100%;
    min-height: 2.35rem;
    padding: 0 0.75rem;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--box-text);
    font: inherit;
    line-height: 1.25;
    box-shadow: none;
    border-radius: 0;
}
.box-input-group input::placeholder,
.box-input-group textarea::placeholder { color: var(--box-text-muted); opacity: 0.85; }

[data-ui-context="public"] .box-input-group { min-height: 2.6rem; }
[data-ui-context="public"] .box-input-icon { min-width: 2.6rem; padding: 0 0.75rem; }
[data-ui-context="public"] .box-input-group input,
[data-ui-context="public"] .box-input-group textarea { min-height: 2.6rem; }

/* === admin/login: centrado visual del formulario */
.admin-login-wrap .box-container-narrow { max-width: 26rem; }

/* --- Fallback genérico de variantes (sin contexto, admin/app) */
.box-btn {
    --_bg: var(--box-brand);
    --_fg: var(--box-text-on-brand);
    --_bd: var(--box-brand);
    --_bg-hover: var(--box-brand-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0 0.9rem;
    border: 1px solid;
    border-radius: var(--box-radius);
    background: var(--_bg);
    color: var(--_fg);
    border-color: var(--_bd);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease,
                border-color 160ms ease, translate 160ms ease,
                box-shadow 160ms ease, opacity 160ms ease;
    user-select: none;
}
.box-btn:not(.box-btn-ghost):not(.box-btn-icon):hover {
    background: var(--_bg-hover, var(--_bg));
    transform: translateY(-1px);
    box-shadow: var(--box-shadow-sm);
}
.box-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.box-btn-block { display: flex; width: 100%; }
.box-btn-sm { min-height: 1.9rem; padding: 0 0.7rem; font-size: var(--box-text-sm); }
.box-btn-lg { min-height: 2.6rem; padding: 0 1.1rem; font-size: var(--box-text-lg); }
.box-btn-primary {
    --_bg: var(--box-brand);
    --_fg: var(--box-text-on-brand);
    --_bd: var(--box-brand);
    --_bg-hover: var(--box-brand-hover);
}
.box-btn-secondary {
    --_bg: var(--box-surface);
    --_fg: var(--box-text);
    --_bd: var(--box-border);
    --_bg-hover: var(--box-surface-hover);
}
.box-btn-outline {
    --_bg: transparent;
    --_fg: var(--box-brand);
    --_bd: color-mix(in srgb, var(--box-brand) 45%, transparent);
    --_bg-hover: color-mix(in srgb, var(--box-brand) 12%, transparent);
}
.box-btn-ghost {
    --_bg: transparent;
    --_fg: var(--box-text);
    --_bd: transparent;
    --_bg-hover: var(--box-surface-hover);
}
.box-btn-danger-outline {
    --_bg: transparent;
    --_fg: var(--box-danger-solid);
    --_bd: color-mix(in srgb, var(--box-danger-solid) 40%, transparent);
    --_bg-hover: var(--box-danger-bg);
}
.box-btn-success {
    --_bg: var(--box-success-solid);
    --_fg: var(--box-text-on-success-solid, var(--box-canvas));
    --_bd: var(--box-success-solid);
    --_bg-hover: color-mix(in srgb, var(--box-success-solid) 85%, var(--box-text));
}
.box-btn-warning {
    --_bg: var(--box-warning-solid);
    --_fg: var(--box-text-on-warning-solid, var(--box-canvas));
    --_bd: var(--box-warning-solid);
    --_bg-hover: color-mix(in srgb, var(--box-warning-solid) 85%, var(--box-text));
}
.box-btn-danger {
    --_bg: var(--box-danger-solid);
    --_fg: var(--box-text-on-danger-solid, var(--box-canvas));
    --_bd: var(--box-danger-solid);
    --_bg-hover: color-mix(in srgb, var(--box-danger-solid) 85%, var(--box-text));
}
.box-btn-contrast,
.box-btn-invert {
    --_bg: var(--box-text);
    --_fg: var(--box-canvas);
    --_bd: var(--box-text);
    --_bg-hover: color-mix(in srgb, var(--box-text) 85%, var(--box-brand));
}
.box-btn-gradient {
    background: linear-gradient(135deg, var(--box-brand) 0%, var(--box-success-solid) 100%);
    background-position: 0%;
    background-size: 180% 180%;
    color: var(--box-text-on-brand);
    border-color: transparent;
    transition: background-position var(--boxp-dur-slow, 600ms) var(--boxp-ease, ease),
                translate var(--boxp-dur, 160ms) var(--boxp-ease, ease),
                box-shadow var(--boxp-dur, 160ms) var(--boxp-ease, ease);
}
.box-btn-gradient:hover { background-position: 100%; box-shadow: var(--box-shadow-md); }
.box-btn-xs {
    min-height: 26px;
    height: 26px;
    padding: 0 0.55rem;
    font-size: 0.8rem;
}
.box-btn-icon {
    width: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
    justify-content: center;
}
.box-btn-icon.box-btn-sm { width: 1.9rem; min-width: 1.9rem; }
.box-btn-icon.box-btn-lg { width: 2.6rem; min-width: 2.6rem; }
.box-btn-icon.box-btn-xs { width: 26px; min-width: 26px; }

/* === TALLER: Stepper de estado del proyecto (Opción A) */
.box-workbench-state {
    grid-column: 1 / -1;
    padding: var(--box-spacing) calc(var(--box-spacing) * 1.25) 0;
    border-bottom: 1px solid var(--box-border);
    background: color-mix(in srgb, var(--box-surface) 88%, transparent);
}
.box-workbench-state .box-steps {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0.35rem 0 0.6rem;
}
[data-ui-mode="compact"] .box-workbench-state { display: none; }

/* === TALLER: Pasos orientadores del flujo (Opción B) */
.box-workbench-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    margin: 0;
    padding: 0.55rem 0.85rem 0.65rem;
    list-style: none;
    border-bottom: 1px solid var(--box-border);
    background: color-mix(in srgb, var(--box-surface-hover) 55%, transparent);
}
.box-workbench-flow__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--box-text-sm);
    color: var(--box-text-muted);
}
.box-workbench-flow__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    font-size: var(--box-text-xs);
    font-weight: 700;
    background: var(--box-brand);
    color: var(--box-text-on-brand);
}
[data-ui-mode="compact"] .box-workbench-flow { padding: 0.35rem 0.7rem; }

/* === TALLER: Fases dinámicas del trabajo del agente (Opción C) */
.taller-fases {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--box-border);
    background: color-mix(in srgb, var(--box-brand) 8%, transparent);
}
.taller-fases__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--box-text-sm);
    font-weight: 600;
    color: var(--box-text);
    margin-bottom: 0.45rem;
}
.taller-fases__titulo .box-spinner {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--box-brand);
}
.taller-fases__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.3rem;
}
.taller-fase {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--box-text-sm);
    color: var(--box-text-muted);
    padding: 0.18rem 0.25rem;
    border-radius: calc(var(--box-radius) * 0.7);
    transition: color 160ms ease, background 160ms ease;
}
.taller-fase i {
    width: 1.05rem;
    text-align: center;
    opacity: 0.75;
}
.taller-fase.is-done {
    color: var(--box-success-solid);
    background: color-mix(in srgb, var(--box-success-solid) 10%, transparent);
}
.taller-fase.is-done i::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
}
.taller-fase.is-done i { opacity: 1; }
.taller-fase.is-active {
    color: var(--box-brand);
    background: color-mix(in srgb, var(--box-brand) 12%, transparent);
}
.taller-fase.is-active i { opacity: 1; animation: taller-fase-pulse 1.4s ease-in-out infinite; }
@keyframes taller-fase-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

/* === TALLER: Wizard guiado de publicación / devolución / rechazo (Opción D) */
.taller-wizard-steps {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--box-border);
}
.taller-wizard-step {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--box-radius);
    font-size: var(--box-text-sm);
    color: var(--box-text-muted);
    background: var(--box-surface);
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
    position: relative;
}
.taller-wizard-step + .taller-wizard-step::before {
    content: '';
    position: absolute;
    left: -0.15rem;
    top: 50%;
    width: 0.3rem;
    height: 2px;
    background: var(--box-border);
    transform: translateY(-50%);
}
.taller-wizard-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--box-surface-hover);
    color: var(--box-text-muted);
    font-size: var(--box-text-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.taller-wizard-step.is-active {
    background: color-mix(in srgb, var(--box-brand) 12%, transparent);
    color: var(--box-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--box-brand) 35%, transparent);
}
.taller-wizard-step.is-active .taller-wizard-step__num {
    background: var(--box-brand);
    color: var(--box-text-on-brand);
}
.taller-wizard-step.is-done {
    background: color-mix(in srgb, var(--box-success-solid) 10%, transparent);
    color: var(--box-success-solid);
}
.taller-wizard-step.is-done .taller-wizard-step__num {
    background: var(--box-success-solid);
    color: var(--box-text-on-success-solid, var(--box-canvas));
}

.taller-wizard-pane { animation: taller-wizard-in 180ms ease; }
@keyframes taller-wizard-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.taller-wizard-checklist {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.75rem;
}
.taller-wizard-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    border-radius: calc(var(--box-radius) * 0.8);
    font-size: var(--box-text-sm);
}
.taller-wizard-check i {
    margin-top: 0.12rem;
    flex-shrink: 0;
}
.taller-wizard-check.is-ok {
    color: var(--box-success-solid);
    background: color-mix(in srgb, var(--box-success-solid) 8%, transparent);
}
.taller-wizard-check.is-warn {
    color: var(--box-warning-solid);
    background: color-mix(in srgb, var(--box-warning-solid) 10%, transparent);
}

.taller-wizard-resumen {
    display: grid;
    gap: 0.25rem;
}
.taller-wizard-resumen__fila {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--box-border);
    font-size: var(--box-text-sm);
    word-break: break-word;
}
.taller-wizard-resumen__fila:last-child { border-bottom: none; }
.taller-wizard-resumen__fila strong {
    color: var(--box-text-muted);
    font-weight: 600;
}

.box-radio-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.box-radio {
    display: grid;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--box-border);
    border-radius: var(--box-radius);
    background: var(--box-surface);
    cursor: pointer;
    font-size: var(--box-text-sm);
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.box-radio small {
    color: var(--box-text-muted);
    font-size: var(--box-text-xs);
}
.box-radio:has(input[type="radio"]:checked) {
    border-color: var(--box-brand);
    background: color-mix(in srgb, var(--box-brand) 10%, var(--box-surface));
    transform: translateY(-1px);
    box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--box-brand) 18%, transparent);
}
.box-radio input[type="radio"] { margin: 0; }

[data-ui-mode="compact"] .box-radio-row { grid-template-columns: 1fr; }
[data-ui-mode="compact"] .taller-wizard-steps { flex-direction: column; }
[data-ui-mode="compact"] .taller-wizard-step + .taller-wizard-step::before {
    left: 0.85rem;
    top: -0.15rem;
    width: 2px;
    height: 0.3rem;
}
[data-ui-mode="compact"] .taller-wizard-resumen__fila {
    grid-template-columns: 1fr;
    gap: 0.05rem;
}

/* === ADMIN: HELPERS ADICIONALES (T8 + T9) === */
.box-text-lg { font-size: var(--box-text-lg); }
.box-text-sm { font-size: var(--box-text-sm); }
.box-text-xs { font-size: var(--box-text-xs); }
.box-text-success { color: var(--box-success-solid); }
.box-text-warning { color: var(--box-warning-solid); }
.box-text-danger { color: var(--box-danger-solid); }
.box-pointer { cursor: pointer; list-style: none; }
.box-scroll-500 { max-height: 500px; overflow: auto; scrollbar-width: thin; }
.admin-iframe-preview {
    display: none;
    width: 100%;
    height: 480px;
    border: 1px solid var(--box-border);
    border-radius: var(--box-radius);
    background: var(--box-surface);
}
.box-input-group--md { max-width: 20rem; }
.box-max-w-28 { max-width: 28rem; }
.box-card--wide { max-width: 64rem; margin-inline: auto; }

/* Spacing: margin */
.box-m-0 { margin: 0; }
.box-mt-quarter { margin-top: 0.15rem; }
.box-mb-quarter { margin-bottom: 0.25rem; }
.box-mb-half { margin-bottom: 0.5rem; }
.box-ml-1 { margin-left: calc(var(--box-spacing) * 0.5); }

/* Spacing: padding */
.box-p-1 { padding: var(--box-spacing); }
.box-rounded { border-radius: var(--box-radius); }
.box-py-half-px-threequarter { padding-top: calc(var(--box-spacing) * 0.5); padding-bottom: calc(var(--box-spacing) * 0.5); padding-left: calc(var(--box-spacing) * 0.75); padding-right: calc(var(--box-spacing) * 0.75); }
.hl-denuncia-resolucion-box { padding: calc(var(--box-spacing) * 0.5) calc(var(--box-spacing) * 0.75); border-radius: var(--box-radius); }
.box-p-md { padding: 0.75rem 1rem; }
.box-pt-2 { padding-top: var(--box-spacing); }

/* Border */
.box-border { border: 1px solid var(--box-border); }
.box-border-top { border-top: 1px solid var(--box-border); }
.box-row-border-success { border-left: 4px solid var(--box-success-solid); }
.box-row-border-warning { border-left: 4px solid var(--box-warning-solid); }
.box-row-border-danger { border-left: 4px solid var(--box-danger-solid); }
.box-card-border-success { border: 1px solid var(--box-success-solid); }
.box-card-border-danger { border: 1px solid var(--box-danger-solid); }
.box-card-border-warning { border: 1px solid var(--box-warning-solid); }

/* Width helpers (table cols) */
.box-w-6rem { width: 6rem; }
.box-w-9rem { width: 9rem; }
.box-w-10rem { width: 10rem; }
.box-w-14rem { width: 14rem; }

/* Flex helpers */
.box-flex-1 { flex: 1 1 0%; min-width: 0; }
.box-wrap { flex-wrap: wrap; }
.box-justify-end { justify-content: flex-end; }
.box-cluster-start { display: flex; gap: 0.5rem; align-items: flex-start; }
.box-gap-quarter { gap: 0.25rem; }
.box-gap-half { gap: 0.5rem; }

/* Display */
.box-d-none { display: none; }
.box-d-inline { display: inline; }

/* Misc */
.box-radius { border-radius: var(--box-radius); }
.box-mono { font-family: var(--box-font-mono); }
.box-pre-wrap { white-space: pre-wrap; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* JUGAR: Frame del juego (sin inline style) */
.jugar-game-frame {
    width: 100%;
    max-width: 1100px;
    min-height: 480px;
    height: 560px;
    margin-inline: auto;
    margin-top: var(--box-gutter);
    background: var(--box-surface);
    border: 1px solid var(--box-border);
    border-radius: var(--box-radius);
    overflow: hidden;
}

/* MIS_APORTES: Paneles y componentes (antes inline style block) */
.aportes-devuelto-panel {
    border-left: 4px solid var(--box-warning-solid);
    padding: var(--box-gutter);
}
.aportes-devuelto-cabecera h3 {
    color: var(--box-warning-fg);
}
.box-bg-warning-soft {
    background: var(--box-warning-bg);
    border: 1px solid var(--box-warning-border, var(--box-warning-border-subtle, var(--box-border)));
}
.box-btn-warning-ghost {
    background: color-mix(in srgb, var(--box-warning-solid) 15%, transparent);
    color: var(--box-warning-fg);
}
.box-btn-warning-ghost:hover {
    background: color-mix(in srgb, var(--box-warning-solid) 25%, transparent);
}
.box-col-actions-2 {
    width: 120px;
}
@media (max-width: 720px) {
    .aportes-devuelto-cabecera .box-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--box-spacing);
    }
}

/* CREAR.PHP: Segmentado UI (estilos antes inline, ahora helper global) */
.box-segmented {
    display: inline-flex;
    align-items: center;
    background: var(--box-surface-sunken);
    border: var(--box-border-width) solid var(--box-border-subtle);
    border-radius: var(--box-radius-pill);
    padding: 4px;
    gap: 4px;
    margin: 0 auto;
    width: 100%;
    max-width: 820px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.box-section-head + .box-segmented {
    margin-top: var(--box-space-4, 1rem);
    display: flex;
}
.box-segmented-item,
.box-segmented > button {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--box-text-muted);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
    white-space: nowrap;
}
.box-segmented-item:hover,
.box-segmented > button:hover {
    color: var(--box-text);
    background: var(--box-surface-hover);
    text-decoration: none;
}
.box-segmented-item.is-active,
.box-segmented > button.is-active,
.box-segmented > button[aria-selected="true"],
.box-segmented > button[aria-pressed="true"] {
    background: var(--box-surface);
    color: var(--box-brand);
    box-shadow: var(--box-shadow-xs);
}
.box-segmented-item i,
.box-segmented > button i { font-size: 1rem; }
.box-segmented .box-badge-count,
.box-segmented > button .box-badge-count {
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.75rem;
    border-radius: 999px;
    background: var(--box-surface-sunken);
    color: var(--box-text-muted);
}
.box-segmented > button.is-active .box-badge-count,
.box-segmented > button[aria-selected="true"] .box-badge-count,
.box-segmented > button[aria-pressed="true"] .box-badge-count {
    background: var(--box-brand-soft);
    color: var(--box-brand);
}

@media (max-width: 640px) {
    .box-segmented {
        max-width: 100%;
        padding: 3px;
    }
    .box-segmented > button,
    .box-segmented-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        gap: 0.35rem;
    }
    .box-segmented .box-badge-count,
    .box-segmented > button .box-badge-count {
        padding: 1px 5px;
        font-size: 0.7rem;
    }
}

/* CREAR.PHP: Contenedor de resultado, estructura stack uniforme */
.playground-create__form {
    padding: var(--box-gutter);
}
.playground-create__result {
    margin-top: var(--box-gutter);
}

/* === RESPONSIVE GRID HELPERS (fallback para dashboard y tarjetas 4/5 cols) === */
.box-grid {
    display: grid;
    gap: var(--box-gutter, 1rem);
}
.box-grid > * { min-width: 0; }

.box-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.box-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.box-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.box-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (min-width: 576px) {
    .box-grid-2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .box-grid-3-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .box-grid-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .box-grid-3-md { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .box-grid-4-md { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .box-grid-3-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .box-grid-4-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .box-grid-5-lg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .box-grid-4-xl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .box-grid-5-xl { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =============================================================================
   Workbench (editor tipo IDE + agente)
   ============================================================================= */
.box-workbench-html,
.box-workbench-html body,
html:has(.box-workbench-page),
.box-workbench-page {
    height: 100%;
    overflow: hidden;
}
.box-workbench-html body {
    margin: 0;
}
.box-workbench {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100dvh;
    background: var(--box-canvas);
    color: var(--box-text);
}
.box-workbench-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--box-spacing);
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0 var(--box-spacing);
    border-bottom: var(--box-border-width) solid var(--box-border);
    background: var(--box-surface);
}
.box-workbench-titlebar-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.box-workbench-titlebar-name {
    font-weight: 700;
    font-size: var(--box-text-sm);
}
.box-workbench-titlebar-file {
    color: var(--box-text-muted);
    font-size: var(--box-text-xs);
    font-family: var(--box-font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.box-workbench-titlebar-file.is-dirty::after {
    content: " ●";
    color: var(--box-warning);
}
.box-workbench-titlebar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}
.box-workbench-body {
    display: grid;
    grid-template-columns: 3rem 16rem minmax(0, 1.7fr) minmax(18rem, 0.95fr);
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}
.box-workbench-activity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0;
    background: var(--box-surface-sunken);
    border-right: var(--box-border-width) solid var(--box-border);
}
.box-workbench-activity-btn {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: var(--box-radius-xs);
    background: transparent;
    color: var(--box-text-muted);
    text-decoration: none;
    cursor: pointer;
}
.box-workbench-activity-btn:hover,
.box-workbench-activity-btn:focus-visible {
    color: var(--box-text);
    background: var(--box-surface);
    outline: none;
}
.box-workbench-activity-btn.is-active {
    color: var(--box-brand);
    box-shadow: inset 2px 0 0 var(--box-brand);
}
.box-workbench-activity .box-push {
    margin-top: auto;
}
.box-workbench-explorer {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--box-surface-sunken);
    border-right: var(--box-border-width) solid var(--box-border);
}
.box-workbench-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem 0.35rem;
    font-size: var(--box-text-xs);
    font-weight: 800;
    letter-spacing: var(--box-tracking-wide);
    text-transform: uppercase;
    color: var(--box-text-muted);
}
.box-workbench-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0.55rem 0.45rem;
    padding: 0.3rem 0.5rem;
    border: var(--box-border-width) solid var(--box-border);
    border-radius: var(--box-radius-xs);
    background: var(--box-surface);
    color: var(--box-text-muted);
}
.box-workbench-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--box-text);
    font-size: var(--box-text-sm);
}
.box-workbench-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0 0.35rem 0.75rem;
}
.box-workbench-folder {
    margin: 0.15rem 0;
}
.box-workbench-folder > summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.35rem 0.4rem;
    border-radius: var(--box-radius-xs);
    font-size: var(--box-text-xs);
    font-weight: 700;
    color: var(--box-text);
}
.box-workbench-folder > summary:hover {
    background: var(--box-surface);
}
.box-workbench-folder-count {
    margin-left: auto;
    color: var(--box-text-muted);
    font-variant-numeric: tabular-nums;
}
.box-workbench-file {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.4rem 0.45rem 0.4rem 1.15rem;
    border: 0;
    border-radius: var(--box-radius-xs);
    background: transparent;
    color: var(--box-text);
    font-size: var(--box-text-sm);
    text-align: left;
    cursor: pointer;
}
.box-workbench-file:hover,
.box-workbench-file:focus-visible {
    background: var(--box-surface);
    outline: none;
}
.box-workbench-file.is-active {
    background: var(--box-brand-soft);
    color: var(--box-brand-active);
}
.box-workbench-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.box-workbench-file i {
    flex: 0 0 auto;
    color: var(--box-text-muted);
}
.box-workbench-tree-empty {
    padding: 0.35rem 0.45rem 0.5rem 1.15rem;
    color: var(--box-text-muted);
    font-size: var(--box-text-xs);
}
.box-workbench-editor {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--box-canvas);
}
.box-workbench-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.box-workbench-tabs > .box-tablist {
    flex: 0 0 auto;
    border-bottom: var(--box-border-width) solid var(--box-border);
    background: var(--box-surface-sunken);
}
.box-workbench-tabpanel {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}
.box-workbench-tabpanel[hidden] {
    display: none;
}
.box-workbench-preview {
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: var(--box-surface);
}
.box-workbench-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    padding: var(--box-gutter);
    text-align: center;
}
.box-workbench-preview-empty h2 {
    margin: 0;
    font-size: var(--box-text-lg);
}
.box-workbench-preview-empty p {
    max-width: 28rem;
    margin: 0;
}
.box-workbench-preview-busy {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.55rem;
    background: var(--box-surface);
    border-top: var(--box-border-width) solid var(--box-border);
    font-size: var(--box-text-sm);
}
.box-workbench-preview-empty[hidden],
.box-workbench-preview-busy[hidden],
.box-workbench-preview[hidden] {
    display: none;
}
.box-workbench-code {
    flex: 1 1 auto;
    margin: 0;
    padding: var(--box-spacing);
    overflow: auto;
    background: var(--box-surface-sunken);
    color: var(--box-text);
    font-family: var(--box-font-mono);
    font-size: var(--box-text-xs);
    line-height: 1.55;
    white-space: pre;
}
.box-workbench .box-workbench-agent {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
    top: auto;
    width: auto;
    height: auto;
    inset: auto;
    max-width: none;
    background: var(--box-surface);
    border-left: var(--box-border-width) solid var(--box-border);
}
.box-workbench .ai-sidebar-resizer {
    display: none;
}
.box-workbench .ai-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.65rem 0.8rem;
    border-bottom: var(--box-border-width) solid var(--box-border);
}
.box-workbench .ai-chat-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.box-workbench .ai-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--box-spacing);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.box-workbench .ai-messages .message {
    max-width: 92%;
    padding: 0.55rem 0.75rem;
    border-radius: var(--box-radius);
    font-size: var(--box-text-sm);
    line-height: 1.45;
}
.box-workbench .ai-messages .message-ai {
    align-self: flex-start;
    background: var(--box-surface-sunken);
}
.box-workbench .ai-messages .message-user {
    align-self: flex-end;
    background: var(--box-brand-soft);
    color: var(--box-brand-active);
}
.box-workbench .ai-input-container {
    flex: 0 0 auto;
    padding: 0.65rem 0.8rem 0.85rem;
    border-top: var(--box-border-width) solid var(--box-border);
}
.box-workbench .ai-input-container textarea {
    width: 100%;
    resize: vertical;
    margin-bottom: 0.5rem;
}
.box-workbench-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}
.box-workbench-chip {
    border: var(--box-border-width) solid var(--box-border);
    border-radius: 999px;
    background: var(--box-surface-sunken);
    color: var(--box-text);
    font-size: var(--box-text-xs);
    padding: 0.25rem 0.65rem;
    cursor: pointer;
}
.box-workbench-chip:hover,
.box-workbench-chip:focus-visible {
    border-color: var(--box-brand);
    color: var(--box-brand-active);
    outline: none;
}
.box-workbench-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--box-spacing);
    flex: 0 0 auto;
    min-height: 1.65rem;
    padding: 0 0.75rem;
    background: var(--box-brand);
    color: var(--box-text-on-brand);
    font-size: var(--box-text-xs);
}
.box-workbench-help-list {
    margin: 0.75rem 0;
    padding-left: 1.2rem;
}
.box-workbench-help-list li {
    margin-bottom: 0.55rem;
}
.box-workbench-help-list strong {
    display: inline;
}

@media (max-width: 1100px) {
    .box-workbench-body {
        grid-template-columns: 3rem minmax(0, 1.4fr) minmax(16rem, 1fr);
    }
    .box-workbench-explorer {
        display: none;
    }
    .box-workbench.is-explorer-open .box-workbench-explorer {
        display: flex;
        position: absolute;
        z-index: var(--box-z-dropdown, 20);
        top: 2.75rem;
        left: 3rem;
        bottom: 1.65rem;
        width: 16rem;
        box-shadow: var(--box-shadow);
    }
}
@media (max-width: 720px) {
    .box-workbench-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(40vh, 1fr) minmax(40vh, 1fr);
    }
    .box-workbench-activity,
    .box-workbench-explorer {
        display: none;
    }
    .box-workbench-titlebar-file {
        display: none;
    }
}

/* Admin mobile vnav toggle integration */
@media (width <= 991px) {
  .box-main-content > .box-vnav-toggle:first-child {
    margin: 0 0 0.5rem;
    display: inline-flex;
  }
}

/* === GAME MODAL — Migración de game-modal.js a tokens BoxUI (sin hex/rgba) === */
.game-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    flex-direction: column;
}
.game-modal.active {
    display: flex;
}
.game-modal-overlay {
    position: absolute;
    inset: 0;
    background: var(--box-overlay);
    cursor: pointer;
}
.game-modal-container {
    position: absolute;
    top: 3%;
    left: 3%;
    right: 3%;
    bottom: 3%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: var(--box-surface);
    border-radius: var(--box-radius-lg);
    box-shadow: var(--box-shadow-xl, var(--box-shadow));
    overflow: hidden;
}
.game-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: var(--box-border-width) solid var(--box-border);
    background: var(--box-surface);
    flex-shrink: 0;
    border-radius: var(--box-radius-lg) var(--box-radius-lg) 0 0;
}
.game-modal-header h2 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--box-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: var(--box-border-width) solid var(--box-border);
    border-radius: var(--box-radius-sm);
    cursor: pointer;
    color: var(--box-text-muted);
    font-size: 14px;
    transition: var(--box-transition);
    flex-shrink: 0;
}
.game-modal-close:hover {
    background: var(--box-surface-hover);
    color: var(--box-text);
}
.game-modal-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--box-surface);
}
#game-iframe {
    width: 100%;
    height: 100%;
    border: none;
}
@media (max-width: 640px) {
    .game-modal-container {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }
    .game-modal-header {
        padding: 0.4rem 0.6rem;
        border-radius: 0;
    }
    .game-modal-header h2 {
        font-size: 0.85rem;
    }
    .game-modal-close {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
}

/* === GENERADOR EXÁMENES — línea separadora (antes #000 inline) === */
.hl-examen-linea-separadora {
    border-bottom: var(--box-border-width) solid var(--box-border-strong, var(--box-border));
    padding-top: calc(var(--box-spacing) * 1.5);
}