* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, system-ui, sans-serif; background: #1e1e1e; color: #eee; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
[hidden] { display: none !important; }
.workspace-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 6px 8px; background: #252525; border-bottom: 1px solid #383838; font-size: 12px; line-height: 1.4; }
.workspace-toolbar label { display: inline-flex; align-items: center; gap: 4px; }
.workspace-toolbar input[type="checkbox"] { margin: 0; }
.workspace-toolbar button { font-size: 12px; padding: 4px 8px; }
#run { background: #293b32; color: #b6dfc8; border-color: #4a6757; font-size: 12px; font-weight: 600; padding: 4px 10px; }
#run:hover { background: #354c40; }
#run-status, #save-status { color: #aaa; font-size: 11px; }
.panel-toggles { display: flex; flex-wrap: wrap; gap: 8px; border: 0; border-left: 1px solid #494949; padding: 2px 0 2px 10px; margin: 0; min-width: 0; }
.panel-toggles legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.width-control input { width: 70px; margin: 0; }
.symbols-picker { position: relative; }
.symbols-picker summary { cursor: pointer; padding: 4px 8px; border: 1px solid #666; border-radius: 4px; background: #303030; }
.symbols-picker summary:focus-visible { outline: 2px solid #82c9ff; outline-offset: 2px; }
.symbols-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 100; width: 272px; max-width: calc(100vw - 100px); padding: 10px; border: 1px solid #666; border-radius: 6px; background: #292929; box-shadow: 0 6px 20px #0008; }
#symbols-target { margin: 0 0 8px; font-size: 11px; color: #bbb; }
#symbols-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
#symbols-grid button { min-height: 32px; padding: 4px; font: 17px/1.2 Consolas, Monaco, monospace; }
.container { display: grid; grid-template-columns: minmax(0, var(--code-width, 50fr)) minmax(0, var(--output-width, 50fr)); flex: 1; min-height: 0; gap: 4px; }
.container.single-column { grid-template-columns: minmax(0, 1fr); }
.editors { display: flex; flex-direction: column; gap: 4px; background: #2d2d2d; padding: 4px; min-height: 0; min-width: 0; }
.editor-container, .console { flex: 1 1 0; }
.preview { flex: 2 1 0; }
.container .compact { flex: 0 0 100px; }
.panel-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.panel-actions button { font-size: 11px; padding: 4px 6px; }
.empty-layout { padding: 24px; color: #bbb; }
.editor-container { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #212121; border-radius: 4px; overflow: hidden; }
.editor-header { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 8px; border-bottom: 1px solid #383838; font-size: 14px; }
.editor-header small { color: #aaa; font-size: 11px; margin-left: 12px; }
.CodeMirror { flex: 1; min-height: 0; width: 100%; font: 14px/1.5 Consolas, Monaco, monospace; }
.error-gutter { width: 14px; }
.error-marker { color: #ffaaa4; font-weight: bold; text-align: center; }
.CodeMirror .error-line { background: rgba(255, 95, 95, 0.12); }
.error-lens { padding: 2px 8px; color: #ffaaa4; background: #382322; border-left: 2px solid #ff8787; font: 12px/1.5 Consolas, Monaco, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.output { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 4px; padding: 4px 4px 4px 0; }
.preview, .console { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: space-between; padding: 6px 8px; background: #2d2d2d; font-size: 14px; }
button { background: #3c3c3c; color: #eee; border: 1px solid #666; border-radius: 4px; padding: 5px 10px; cursor: pointer; }
button:hover { background: #505050; }
button:focus-visible { outline: 2px solid #82c9ff; outline-offset: 2px; }
#preview-frame { width: 100%; flex: 1; min-height: 0; border: 0; background: #fff; }
#console-output { flex: 1; min-height: 0; overflow: auto; font: 13px/1.5 Consolas, Monaco, monospace; }
#console-output:empty::before { content: 'La consola está lista.'; display: block; padding: 10px 12px; color: #aaa; }
.console-entry { margin: 0; padding: 6px 12px; border-bottom: 1px solid #333; white-space: pre-wrap; overflow-wrap: anywhere; }
.console-entry.warn { color: #ffe298; background: #332d1c; }
.console-entry.error { color: #ffaaa4; background: #382322; }
.console-entry.info { color: #9ed5ff; }
.console-help { margin: 0; padding: 6px 12px; font-size: 11px; color: #aaa; border-top: 1px solid #383838; }
@media (max-width: 700px) {
    body { height: auto; min-height: 100vh; }
    .container { grid-template-columns: minmax(0, 1fr); height: auto; }
    .width-control { display: none !important; }
    .editors { height: 75vh; min-height: 480px; }
    .output { height: 70vh; min-height: 400px; padding: 0 4px 4px; }
}