/* Solo afecta a los estados de trabajo del tablero/editor. */
.silicio-task-tray {
    position: fixed;
    z-index: 30000;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(380px, calc(100vw - 24px));
    display: grid;
    gap: 8px;
    pointer-events: none;
}
.silicio-task-status {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    flex-shrink: 0;
    grid-column: 1 / -1;
    padding: 12px 14px;
    margin-block: 8px;
    border: 1px solid var(--theme-border, var(--color-accent, #d6ae4a));
    border-radius: 12px;
    background: var(--color-bg-medium, #191919);
    color: var(--color-text-white, #f4efe6);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    pointer-events: auto;
}
.silicio-task-status[hidden] { display: none !important; }
#pgnLibraryDialog > .silicio-task-status,
.game-selection-container > .silicio-task-status { margin: 8px 16px 12px; }
.silicio-task-tray .silicio-task-status { margin: 0; box-shadow: 0 6px 24px #0003; }
.silicio-task-label { min-width: 0; flex: 1; overflow-wrap: anywhere; }
/* El mismo punto de lectura para avisos y esperas. Vacío no reserva espacio. */
#silicioTaskTray:empty,
#silicioTaskTray:not(:has(> :not([hidden]))) { display: none; }
#silicioTaskTray[data-placement]:not([data-placement="fallback"]) {
    position: relative;
    inset: auto;
    transform: none;
    z-index: 2;
    grid-column: 1 / -1;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: min(220px, 32dvh);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    margin: 0 auto 8px;
    box-sizing: border-box;
    align-content: start;
}
html body .navigation-section:has(> #silicioTaskTray:not(:empty)) {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
}
/* La botonera no salta al aparecer un aviso. En vertical el aviso crece debajo;
   en el panel lateral crece hacia arriba, manteniendo el anclaje inferior. */
html[data-responsive-workspace="v2"] body .controls-container > .navigation-section {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding-block-start: 0 !important;
}
html[data-responsive-workspace="v2"] .navigation-section > .navigation-buttons-redesigned { order: 0; flex-shrink: 0; }
html[data-responsive-workspace="v2"] .navigation-section > #silicioTaskTray {
    order: 1;
    margin: 8px 0 0;
    max-height: min(160px, 24dvh);
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1), (min-width: 1181px) {
    html[data-responsive-workspace="v2"] .navigation-section > #silicioTaskTray { order: -1; margin: 0 0 8px; }
}
#silicioTaskTray .silicio-task-status {
    width: min(100%, 620px);
    margin-inline: auto;
    box-shadow: none;
    background: var(--editor-surface-raised, var(--theme-bg-secondary, var(--color-bg-medium, #191919)));
    color: var(--editor-text, var(--theme-text-primary, var(--color-text-white, #f4efe6)));
    border-color: var(--editor-border, var(--theme-border, var(--color-primary, #d6ae4a)));
}
#silicioTaskTray .silicio-notice {
    display: block;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    line-height: 1.45;
    padding: 11px 14px;
    border-inline-width: 3px;
    animation: silicio-notice-in 160ms ease-out;
}
#silicioTaskTray .silicio-notice:has(> button) { display:flex; flex-wrap:wrap; justify-content:center; }
#silicioTaskTray .silicio-notice > .silicio-task-label { flex:1 1 190px; }
#silicioTaskTray .silicio-notice[data-tone="error"],
#silicioTaskTray .silicio-notice[data-tone="warning"] {
    border-inline-color: var(--editor-accent, var(--theme-accent-primary, var(--color-primary, #d6ae4a)));
}
@keyframes silicio-notice-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    #silicioTaskTray .silicio-notice { animation: none; }
}
.silicio-task-spinner {
    box-sizing: border-box;
    flex: 0 0 18px;
    height: 18px;
    color: var(--theme-accent-primary, var(--color-accent, #d6ae4a));
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: silicio-task-spin .8s linear infinite;
}
.silicio-task-status > button {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
[data-silicio-task-lock] { cursor: progress !important; }
@keyframes silicio-task-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .silicio-task-spinner { animation: none; } }
@media (max-width: 600px) {
    .silicio-task-status { padding: 10px 12px; }
    .silicio-task-tray { bottom: max(14px, env(safe-area-inset-bottom)); }
}
/* La tableta horizontal usa el panel de escritorio, pero sigue siendo táctil. */
@media (pointer: coarse) {
    #pgn-viewer .move { font-size: 16px !important; line-height: 2 !important; min-height: 32px; box-sizing: border-box; }
    #pgn-viewer :is(.comment, .pre-comment, .variation) { font-size: 14px !important; line-height: 1.65 !important; overflow-wrap: anywhere; }
}
.workbench-training-action span { overflow-wrap: anywhere; white-space: normal; }
/* El reloj no flota sobre las tarjetas ni sobre casillas; los dígitos no mueven la fila. */
.navigation-section > #positionMemoryTimer {
    position: static;
    inset: auto;
    order: 1;
    flex: 0 0 auto;
    align-self: center;
    justify-content: center;
    box-sizing: border-box;
    width: min(100%, 200px);
    min-height: 44px;
    margin: 8px auto 0;
    padding: 7px 14px;
    transform: none;
    animation: none;
    transition: border-color .15s;
    color: var(--theme-text-primary, #f4efe6);
    background: var(--theme-bg-secondary, #191919);
    border-color: var(--theme-accent-primary, #d6ae4a);
    box-shadow: none;
    z-index: auto;
}
.navigation-section > #positionMemoryTimer .position-memory-timer-text { color: inherit; text-shadow: none; }
.navigation-section > #positionMemoryTimer.warning { border-style: dashed; }
.navigation-section > #positionMemoryTimer.critical { border-width: 3px; font-weight: 800; }