/* El panel y la carta tienen superficies separadas en escritorio y móvil. */
.resolver-workspace { --resolver-header-height:64px; --workspace-top:calc(var(--resolver-header-height) + 50px); --workspace-panel-width:clamp(350px,34vw,460px); color:#243b4a; }
.resolver-workspace #resolver-container { height:100dvh; background:#f2f6f8; }
.resolver-workspace .resolver-header { min-height:60px; padding:10px 16px; background:#15384f; gap:12px; box-shadow:none; }
.resolver-workspace .ejercicio-titulo { font-size:1rem; line-height:1.3; }
.resolver-workspace .resolver-meta { gap:6px; margin-top:5px; }
.resolver-workspace .resolver-meta-item { font-size:.65rem; }
.resolver-workspace .btn-volver, .resolver-workspace .header-actions .btn { min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; font-size:.8rem; }
.resolver-workspace .header-actions .btn-secondary { background:#31566e; color:white; }
.workspace-switcher { position:absolute; top:var(--resolver-header-height); left:0; right:0; height:50px; display:flex; gap:6px; align-items:center; padding:5px 12px; background:#fff; border-bottom:1px solid #d8e2e8; z-index:1001; overflow-x:auto; }
.workspace-switcher button { flex-shrink:0; white-space:nowrap; min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:6px; background:transparent; color:#4b6273; font-size:.82rem; font-weight:600; cursor:pointer; }
.workspace-switcher button[aria-pressed=true] { color:#085e69; background:#e3f2f1; border-color:#b9dcda; }
.workspace-switcher .workspace-center { margin-left:auto; border-color:#d8e2e8; }
.resolver-workspace .panel-flotante { top:var(--workspace-top) !important; left:0 !important; right:auto !important; bottom:0 !important; width:var(--workspace-panel-width) !important; height:auto !important; min-width:0; max-width:none; max-height:none; border-radius:0; resize:none; box-shadow:none; border-right:1px solid #d8e2e8; }
.resolver-workspace .panel-header { border-radius:0; background:#f2f6f8; color:#244459; cursor:default; min-height:42px; padding:6px 18px; flex-shrink:0; }
.resolver-workspace .btn-toggle-collapse { background:#dfe9ee; color:#244459; width:32px; height:32px; }
.resolver-workspace .panel-pasos::after { display:none; }
.resolver-workspace .panel-body { padding:16px 20px; }
.resolver-workspace .panel-pasos .panel-body { overflow:hidden; }
.resolver-workspace .panel-mareas .panel-body { max-height:none; }
.resolver-workspace[data-panel=pasos] #panel-pasos,
.resolver-workspace[data-panel=enunciado] #panel-enunciado,
.resolver-workspace[data-panel=mareas] #panel-mareas { display:flex !important; }
.resolver-workspace:not([data-panel=pasos]) #panel-pasos,
.resolver-workspace:not([data-panel=enunciado]) #panel-enunciado,
.resolver-workspace:not([data-panel=mareas]) #panel-mareas { display:none !important; }
.resolver-workspace #resolver-container #container { top:var(--workspace-top); left:var(--workspace-panel-width) !important; width:calc(100% - var(--workspace-panel-width)) !important; height:calc(100% - var(--workspace-top)) !important; }
.resolver-workspace[data-panel=carta] #resolver-container #container { left:0 !important; width:100% !important; }
.resolver-workspace #resolver-container #loading { top:var(--workspace-top); left:var(--workspace-panel-width); width:auto; height:auto; }
.resolver-workspace #resolver-container #ruler-controls { top:40px; left:40px; max-width:calc(100% - 60px); }
.resolver-workspace[data-panel=carta] #resolver-container #ruler-controls { left:40px; max-width:calc(100vw - 60px); }
.resolver-workspace #simulation-clock { top:30px; left:auto; right:50px; transform:none; padding:8px; font-size:.8rem; }
.step-progress-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:.8rem; margin-bottom:8px; }
.step-progress-heading strong { color:#086c78; font-size:1rem; }
.step-progress-heading span { color:#647580; font-size:.7rem; }
#paso-progreso { flex-shrink:0; width:100%; height:6px; border:0; border-radius:6px; accent-color:#0c8585; background:#e5eff0; margin-bottom:12px; }
#paso-progreso::-webkit-progress-bar { background:#e5eff0; }
#paso-progreso::-webkit-progress-value { background:#0c8585; }
.step-jump-label { color:#536c7b; font-size:.72rem; margin-bottom:4px; }
#paso-selector { flex-shrink:0; width:100%; min-height:40px; border:1px solid #ccdbe2; border-radius:6px; background:#fff; color:#28485d; font:inherit; font-size:.85rem; padding:8px; text-overflow:ellipsis; }
.resolver-workspace .pasos-navegacion { margin-top:8px; padding-bottom:8px; }
.resolver-workspace .paso-num { min-width:36px; height:36px; border-radius:6px; font-size:.8rem; }
.resolver-workspace .paso-num.activo { background:#0b7580; border-color:#0b7580; transform:none; }
.resolver-workspace .paso-num.completado { background:#e3eeef; color:#355e66; border-color:#c9dddf; }
.resolver-workspace #paso-titulo { font-size:1.2rem; color:#183e54; line-height:1.35; margin:10px 0; }
.resolver-workspace #paso-descripcion, .resolver-workspace .enunciado-texto { font-size:1rem; line-height:1.7; color:#344f61; }
.resolver-workspace #paso-calculos { padding:0; border:0; background:none; }
.resolver-workspace .calculo-item { padding:14px 14px 14px 36px; margin:10px 0; }
.resolver-workspace .calculo-formula, .resolver-workspace .calculo-sustitucion { font-size:.95rem; line-height:1.65; overflow-wrap:anywhere; white-space:pre-wrap; }
.resolver-workspace .calculo-formula::before { content:'Fórmula'; display:block; color:#627584; font:600 .68rem/1.8 sans-serif; }
.resolver-workspace .calculo-sustitucion::before { content:'Sustitución'; display:block; color:#627584; font:600 .68rem/1.8 sans-serif; }
.resolver-workspace .calculo-operacion { padding:10px; background:#e6f4ee; border-radius:5px; color:#165f48; line-height:1.6; font-size:1rem; overflow-wrap:anywhere; }
.resolver-workspace .calculo-explicacion { font-size:.85rem; line-height:1.6; }
.step-footer { display:flex; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid #dde6eb; margin-top:10px; flex-shrink:0; }
.step-footer .btn-paso { min-height:44px; padding:10px 16px; background:#0b7580; }
.step-footer .btn-paso:disabled { background:#e9eef1; color:#526774; opacity:1; }
.resolver-workspace .opcion-item { display:block; width:100%; text-align:left; font:inherit; font-size:.93rem; line-height:1.5; min-height:44px; }
.resolver-workspace .notas-calculo { font-size:1rem; line-height:1.6; }
#paso-retomado { background:#eef6fc; border:1px solid #c9deed; border-radius:6px; padding:10px; font-size:.8rem; line-height:1.5; }
#paso-retomado button { border:0; color:#175f8c; background:none; text-decoration:underline; padding:8px 0; cursor:pointer; }
#resolucion-final { background:#eaf5f1; border:1px solid #c5e4d7; padding:16px; margin-top:16px; border-radius:8px; line-height:1.5; }
#resolucion-final p { margin:8px 0 12px; }
#resolucion-final a { display:block; margin-top:12px; color:#086c78; }
.resolver-workspace [hidden] { display:none !important; }
.resolver-workspace :focus-visible { outline:3px solid #d29922; outline-offset:2px; }
.resolver-workspace .resultado-intento .btn { line-height:1.5; min-height:40px; padding:8px; border:1px solid currentColor; }
@media(max-width:760px) {
    .resolver-workspace { --workspace-panel-width:100%; --mobile-panel-height:calc((100dvh - var(--workspace-top)) * .56); }
    .resolver-workspace .resolver-header { flex-wrap:wrap; padding:8px 10px; gap:8px; }
    .resolver-workspace .header-left { flex-basis:100%; }
    .resolver-workspace .header-right { margin:0; width:100%; justify-content:flex-end; }
    .resolver-workspace .header-actions { width:100%; justify-content:flex-end; flex-wrap:wrap; }
    .resolver-workspace .resolver-save-state { margin-right:auto; max-width:45%; }
    .resolver-workspace .resolver-meta { display:none; }
    .resolver-workspace .resolver-mode-badge { font-size:.55rem; }
    .workspace-switcher { padding:5px 8px; }
    .workspace-switcher { scrollbar-width:none; }
    .workspace-switcher::-webkit-scrollbar { display:none; }
    .workspace-switcher button { padding:8px 10px; }
    .resolver-workspace #compass-rose { width:70px; height:70px; left:auto; right:66px; top:58px; transform:none; }
    .resolver-workspace .panel-flotante { top:auto !important; height:var(--mobile-panel-height) !important; width:100% !important; border-right:0; border-top:1px solid #c6d5de; }
    .resolver-workspace .panel-header { display:none; }
    .resolver-workspace .panel-body { padding:12px 16px; }
    .resolver-workspace #resolver-container #container { left:0 !important; width:100% !important; height:calc(100% - var(--workspace-top) - var(--mobile-panel-height)) !important; bottom:auto; }
    .resolver-workspace[data-panel=carta] #resolver-container #container { height:calc(100% - var(--workspace-top)) !important; }
    .resolver-workspace #resolver-container #loading { left:0; }
    .resolver-workspace #resolver-container #ruler-controls { left:32px; top:28px; max-width:calc(100vw - 64px); max-height:calc(100dvh - var(--workspace-top) - 40px); overflow:auto; }
    .resolver-workspace #simulation-clock { top:28px; right:32px; }
    .resolver-workspace .pasos-navegacion, .resolver-workspace .paso-hover-tiempo, .step-jump-label { display:none; }
    .step-progress-heading { margin-bottom:5px; }
    #paso-progreso { margin-bottom:8px; }
    #paso-selector { min-height:36px; padding:6px; }
    .step-footer { padding-top:8px; margin-top:6px; }
    .resolver-workspace #paso-titulo { font-size:1.05rem; }
    .resolver-workspace .practice-guide { bottom:8px; max-height:45dvh; overflow:auto; }
}
@media(max-height:650px) {
    .resolver-workspace .panel-header, .resolver-workspace .pasos-navegacion, .resolver-workspace .paso-hover-tiempo, .step-jump-label { display:none; }
    .resolver-workspace .panel-body { padding:10px 16px; }
}