/* HTML Cleaner — disposición. Móvil primero: 360 → 768 → 1024 → 1280 px (manual §7). */

body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: var(--z-dialog); background: var(--color-surface);
}

.app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "main" "bottom";
}

/* ---------- Barra superior ---------- */
.topbar {
  grid-area: top;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-1);
  min-height: 56px;
  padding-block: 0;
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-2), env(safe-area-inset-right, 0px));
  background: var(--color-surface);
  border-bottom: var(--border-width-1) solid var(--color-border);
  box-shadow: var(--shadow-1);
}
.topbar__brand { display: flex; align-items: center; flex: 1; min-width: 0; margin: 0; }
.brand-link { display: flex; align-items: center; min-height: var(--size-touch-min); border-radius: var(--radius-sm); }
.topbar__tools, .topbar__actions { display: none; align-items: center; gap: var(--space-2); }
.topbar .sep { width: 1px; height: 24px; background: var(--color-border); margin: 0 var(--space-1); }

/* ---------- Área principal ---------- */
.main {
  grid-area: main;
  display: flex; flex-direction: column; gap: var(--space-3);
  min-width: 0; min-height: 0;
  padding-block: var(--space-3);
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}
.toolrow { display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none; }
.toolrow::-webkit-scrollbar { display: none; }
.toolrow .btn { flex: none; }
.toolrow .push { margin-left: auto; }
.banners { display: grid; gap: var(--space-2); }
.banners:empty { display: none; }

.workspace {
  flex: 1; min-height: 420px;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.pane-preview, .resizer { display: none; }
.pane-editor { min-height: 420px; }

.statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.statusbar .push { margin-left: auto; }

/* ---------- Barra inferior fija (móvil) ---------- */
.bottombar {
  grid-area: bottom;
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-2);
  padding-top: var(--space-3);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
  background: var(--color-surface);
  border-top: var(--border-width-1) solid var(--color-border);
  box-shadow: var(--shadow-1);
}

.sidebar { display: none; }

/* Textos que se acortan en pantallas estrechas */
.lbl-long { display: none; }
@media (max-width: 359px) {
  .tab .tab__text { display: none; }
  .bottombar .btn--stack span { display: none; }
}

/* ---------- Tableta vertical: acciones arriba ---------- */
@media (min-width: 768px) {
  .bottombar { display: none; }
  .app { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .topbar { min-height: 64px; padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-6), env(safe-area-inset-right, 0px)); gap: var(--space-2); }
  .topbar__actions { display: flex; }
  .main { padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-6), env(safe-area-inset-right, 0px)); padding-block: var(--space-4); gap: var(--space-4); }
  .lbl-long { display: inline; }
  .lbl-short { display: none; }
  .editor { font-size: var(--font-size-code); line-height: var(--font-line-height-code); }
}

/* ---------- Tableta horizontal: paneles divididos, opciones en hoja lateral ---------- */
@media (min-width: 1024px) {
  .app { height: 100dvh; min-height: 0; }
  .topbar__brand { flex: 0 0 auto; margin-right: var(--space-4); }
  .topbar__spacer { flex: 1; }
  .workspace {
    min-height: 0;
    grid-template-columns: minmax(0, calc(var(--split, 50%) - 6px)) 12px minmax(0, 1fr);
  }
  .pane-preview, .resizer { display: flex; }
  .pane-editor { min-height: 0; }
  .tab[data-tab="vista"] { display: none; }
}

/* ---------- Escritorio: barra lateral fija ---------- */
@media (min-width: 1280px) {
  .app {
    grid-template-columns: var(--size-sidebar) minmax(0, 1fr);
    grid-template-areas: "top top" "side main";
    max-width: 1600px; margin-inline: auto;
  }
  .topbar { padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); }
  .sidebar {
    grid-area: side; display: block; overflow-y: auto; min-height: 0;
    background: var(--color-surface); border-right: var(--border-width-1) solid var(--color-border);
    padding: var(--space-4) var(--space-3) var(--space-6) var(--space-4);
  }
  .main { padding: var(--space-4) var(--space-8) var(--space-4) var(--space-6); }
  .btn-options { display: none; }
  .topbar__tools { display: flex; flex: 0 1 auto; }
  .toolrow { display: none; }
}