/* ---------- Editor web (vista a pantalla completa) ---------- */
body.studio-mode .layout { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 12px; }
body.studio-mode aside#side, body.studio-mode .foot { display: none; }

.studio-loading { padding: 40px; text-align: center; color: var(--muted); }
.studio { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 150px); min-height: 560px; }
.studio-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.sb-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sb-group select { min-height: 30px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); padding: 3px 8px; font-size: 13px; max-width: 220px; }
.seg { gap: 0; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 5px 11px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.btn.danger { color: var(--err); }

.studio-body { flex: 1; min-height: 0; display: grid; gap: 10px; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr) 300px; grid-template-areas: "left code view right"; }
.studio-body[data-mode="visual"] { grid-template-columns: 220px 0 minmax(0, 1fr) 300px; }
.studio-body[data-mode="visual"] .studio-code { display: none; }
.studio-body[data-mode="code"] { grid-template-columns: 220px minmax(0, 1fr) 0 300px; }
.studio-body[data-mode="code"] .studio-view { display: none; }
.studio-left { grid-area: left; }
.studio-code { grid-area: code; }
.studio-view { grid-area: view; }
.studio-right { grid-area: right; }
.studio-left, .studio-right, .studio-code, .studio-view { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 13px; min-height: 36px; }
.pane-head code { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-save { color: var(--muted); font-size: 12px; white-space: nowrap; }
.s-hint { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.s-tabs { display: flex; border-bottom: 1px solid var(--border); }
.s-tabs button { flex: 1; border: 0; background: transparent; padding: 9px 6px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.s-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.s-scroll { flex: 1; overflow: auto; padding: 10px; min-height: 0; }
.s-help { color: var(--muted); font-size: 12.5px; margin: 6px 0 10px; }
.s-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 4px; }
.s-file-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.s-file { display: flex; align-items: center; border-radius: 6px; }
.s-file:hover { background: var(--surface-2); }
.s-file.active { background: var(--accent-soft); }
.s-file.shown .s-file-name::before { content: "● "; color: var(--accent); }
.s-file-name { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 5px 6px; font: 12.5px var(--mono); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.s-file.active .s-file-name { color: var(--accent); font-weight: 700; }
.s-mini { border: 0; background: transparent; cursor: pointer; padding: 3px 5px; color: var(--muted); font-size: 12px; border-radius: 5px; visibility: hidden; }
.s-file:hover .s-mini, .s-file.active .s-mini, .s-mini:focus-visible { visibility: visible; }
.s-mini:hover { background: var(--surface); color: var(--text); }
.s-mini.danger:hover { color: var(--err); }
.s-blocks { display: grid; gap: 5px; }
.s-block { text-align: left; border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.s-block:hover { border-color: var(--accent); color: var(--accent); }

.code-host { flex: 1; min-height: 0; position: relative; }
.code-host .CodeMirror { height: 100%; font: 13px/1.55 var(--mono); }
.code-fallback { width: 100%; height: 100%; border: 0; resize: none; padding: 10px 12px; font: 13px/1.55 var(--mono); background: var(--code-bg); color: var(--code-text); tab-size: 2; white-space: pre; }
.code-fallback:focus { outline: none; }
.s-bin { flex: 1; overflow: auto; padding: 16px; display: grid; place-items: center; gap: 10px; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 20px 20px; }
.s-bin img { max-width: 100%; max-height: 60vh; box-shadow: var(--shadow); }
.s-bin p { font-size: 13px; background: var(--surface); padding: 4px 8px; border-radius: 6px; }

.frame-stage { flex: 1; min-height: 0; background: var(--surface-2); display: flex; justify-content: center; overflow: auto; }
.frame-wrap { width: 100%; height: 100%; transition: width .2s; }
.frame-wrap[data-device="tablet"] { width: 820px; max-width: 100%; border-inline: 1px solid var(--border); }
.frame-wrap[data-device="mobile"] { width: 390px; max-width: 100%; border-inline: 1px solid var(--border); }
.frame-wrap iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }

.s-console { border-top: 1px solid var(--border); max-height: 140px; display: flex; flex-direction: column; }
.s-console .pane-head { min-height: 30px; padding: 3px 10px; }
.s-console ol { list-style: none; margin: 0; padding: 4px 10px; overflow: auto; font: 12px/1.5 var(--mono); flex: 1; }
.s-console li span { color: var(--muted); }
.log-error { color: var(--err); }
.log-warn { color: var(--warn); }
.log-info { color: var(--info); }
.log-empty { color: var(--muted); font-family: var(--sans); }
.s-badge { background: var(--err-soft); color: var(--err); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; margin-right: auto; margin-left: 8px; }

.s-path { font-size: 12px; margin-bottom: 8px; word-break: break-all; }
.s-path code { color: var(--accent); }
.s-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.s-sec { border-top: 1px solid var(--border); padding: 10px 0; }
.s-sec h4 { display: inline; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.s-sec > h4 { display: block; margin-bottom: 8px; }
details.s-sec summary { cursor: pointer; list-style: revert; margin-bottom: 4px; }
.s-grid { display: grid; gap: 8px; margin-top: 6px; }
.s-field { display: grid; gap: 3px; font-size: 12.5px; }
.s-field > span:first-child { font-weight: 600; }
.s-field input, .s-field select, .s-text, .studio-right select { width: 100%; min-height: 30px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); font-size: 13px; }
.s-text { min-height: 64px; resize: vertical; font-family: var(--sans); margin-bottom: 6px; }
.s-color { display: flex; gap: 6px; }
.s-color input[type="color"] { width: 38px; min-width: 38px; padding: 2px; height: 30px; }
.s-fmt { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.s-fmt .btn { min-width: 32px; }
.s-palettes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.s-palette { display: flex; align-items: center; gap: 3px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--surface-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.s-palette span { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.s-palette[data-i="0"] .sw1 { background: #0f766e; } .s-palette[data-i="0"] .sw2 { background: #f59e0b; } .s-palette[data-i="0"] .sw3 { background: #16202a; }
.s-palette[data-i="1"] .sw1 { background: #7c3aed; } .s-palette[data-i="1"] .sw2 { background: #facc15; } .s-palette[data-i="1"] .sw3 { background: #1e1b2e; }
.s-palette[data-i="2"] .sw1 { background: #2563eb; } .s-palette[data-i="2"] .sw2 { background: #f97316; } .s-palette[data-i="2"] .sw3 { background: #111827; }
.s-palette[data-i="3"] .sw1 { background: #22d3ee; } .s-palette[data-i="3"] .sw2 { background: #a3e635; } .s-palette[data-i="3"] .sw3 { background: #0b1120; }
.s-palette[data-i="4"] .sw1 { background: #dc2626; } .s-palette[data-i="4"] .sw2 { background: #0ea5e9; } .s-palette[data-i="4"] .sw3 { background: #1f1414; }
.s-palette[data-i="5"] .sw1 { background: #15803d; } .s-palette[data-i="5"] .sw2 { background: #eab308; } .s-palette[data-i="5"] .sw3 { background: #14231a; }
kbd { font: 11px var(--mono); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--surface-2); }

/* Paquete editable (vista Resultado) */
.viewer .code-host { height: 64vh; }
.edited-badge { font-size: 11px; font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.file-btn.edited::after { content: " ●"; color: var(--warn); }
.files .btn { width: 100%; margin-bottom: 8px; }
.site-note { font-size: 12.5px; color: var(--muted); padding: 8px 6px; border-top: 1px solid var(--border); margin-top: 8px; }

@media (max-width: 1280px) {
  .studio-body { grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr) 260px; }
  .studio-body[data-mode="visual"] { grid-template-columns: 190px 0 minmax(0, 1fr) 260px; }
  .studio-body[data-mode="code"] { grid-template-columns: 190px minmax(0, 1fr) 0 260px; }
}
@media (max-width: 1000px) {
  .studio { height: auto; }
  .studio-body, .studio-body[data-mode="visual"], .studio-body[data-mode="code"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "view" "code" "right" "left"; }
  .studio-view { height: 70vh; }
  .studio-code { height: 60vh; }
  .studio-left, .studio-right { max-height: 60vh; }
  .s-hint { display: none; }
}