/* Cr — la cara de CorelDRAW 2025 encima del motor de Krea.
   app.css (de Krea) carga antes; aquí se cambia el reparto de la ventana y se
   ponen los temas de Corel (Claro es el de fábrica; también Medio, Oscuro y
   Negro, como en Herramientas › Opciones). */

body[data-ws="corel"][data-tema="claro"], body[data-tema="claro"] {
  --bg: #e6e6e6; --panel: #f0f0f0; --panel2: #ffffff; --line: #c8c8c8; --line2: #d4d4d4;
  --text: #1e1e1e; --text-dim: #5c5c5c; --accent: #2f7fd6; --accent2: #1f63b0;
  --canvas-bg: #d7d7d7; --page-shadow: rgba(0,0,0,.35);
  --hover: #dbe7f5; --sel: #cfe0f6; --ico: #3a3a3a;
}
body[data-tema="medio"] {
  --bg: #4b4b4b; --panel: #565656; --panel2: #666666; --line: #3a3a3a; --line2: #777;
  --text: #ececec; --text-dim: #bdbdbd; --accent: #3d8ee0; --accent2: #2d74bd;
  --canvas-bg: #6d6d6d; --hover: #6d7784; --sel: #5c6b7c; --ico: #e8e8e8;
}
body[data-tema="oscuro"] {
  --bg: #2b2b2b; --panel: #333333; --panel2: #3d3d3d; --line: #1f1f1f; --line2: #4a4a4a;
  --text: #e4e4e4; --text-dim: #a6a6a6; --accent: #3d8ee0; --accent2: #2d74bd;
  --canvas-bg: #4a4a4a; --hover: #4a5563; --sel: #3f4d5c; --ico: #dcdcdc;
}
body[data-tema="negro"] {
  --bg: #161616; --panel: #1e1e1e; --panel2: #262626; --line: #0d0d0d; --line2: #333;
  --text: #e4e4e4; --text-dim: #9a9a9a; --accent: #3d8ee0; --accent2: #2d74bd;
  --canvas-bg: #2e2e2e; --hover: #35404b; --sel: #2c3a48; --ico: #d8d8d8;
}

body {
  --font: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif;
  --tool-w: 34px; --dock-w: 258px; --pal-w: 22px; --radius: 3px;
  font: 12px/1.35 var(--font);
  grid-template-rows: 26px 24px 34px 34px 1fr 22px 24px;
}
body.sin-std { grid-template-rows: 26px 24px 0 34px 1fr 22px 24px; }
body.sin-std #crStd { display: none; }
body.sin-prop { grid-template-rows: 26px 24px 34px 0 1fr 22px 24px; }
body.sin-prop #propbar { display: none; }
body.sin-estado { grid-template-rows: 26px 24px 34px 34px 1fr 22px 0; }
body.sin-estado #statusbar { display: none; }
body.sin-docpal { grid-template-rows: 26px 24px 34px 34px 1fr 0 24px; }
body.sin-docpal #crDocPal { display: none; }

/* ------------------------------------------------------------- título */
#crTitle {
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: var(--panel); border-bottom: 1px solid var(--line); font-size: 12px;
}
#crTitle .crLogo { width: 16px; height: 16px; }
.crTitleHint { color: var(--text-dim); font-size: 11px; }

/* ------------------------------------------------------------- menús */
#menubar { padding: 0 4px; gap: 0; }
#crMenus { display: flex; height: 100%; }
#crMenus > .crM { padding: 0 8px; display: flex; align-items: center; cursor: default; border-radius: 0; }
#crMenus > .crM:hover, #crMenus > .crM.open { background: var(--hover); }
#crMenus > .crM u { text-decoration: underline; }
#crBuscar { position: relative; margin-right: 6px; }
#crBuscarIn {
  width: 170px; height: 19px; padding: 0 20px 0 6px; font-size: 11px;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 3px; outline: none; color: var(--text);
}
#crBuscarIn:focus { border-color: var(--accent); }
#crBuscar .lupa { position: absolute; right: 5px; top: 1px; color: var(--text-dim); font-size: 13px; pointer-events: none; }

/* desplegables de Corel (menús, submenús, flyouts, listas) */
#crMenuPop { position: fixed; left: 0; top: 0; z-index: 700; pointer-events: none; }
.crPop {
  position: fixed; z-index: 700; min-width: 200px; padding: 3px 0; pointer-events: auto;
  background: var(--panel2); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.28);
  color: var(--text); font-size: 12px; max-height: calc(100vh - 12px); overflow-y: auto;
}
.crPop::-webkit-scrollbar { width: 8px; }
.crPop::-webkit-scrollbar-thumb { background: var(--line2); }
.crPop .it {
  display: grid; grid-template-columns: 24px 1fr auto 16px; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px 0 4px; white-space: nowrap; cursor: default;
}
.crPop .it:hover { background: var(--hover); }
.crPop .it.dis { opacity: .4; }
.crPop .it.dis:hover { background: transparent; }
.crPop .it .ico { width: 18px; height: 18px; display: grid; place-items: center; }
.crPop .it .ico svg { width: 16px; height: 16px; fill: none; stroke: var(--ico); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.crPop .it .chk { font-size: 12px; text-align: center; }
.crPop .it .k { color: var(--text-dim); font-size: 11px; margin-left: 18px; }
.crPop .it .sub { color: var(--text-dim); font-size: 10px; text-align: right; }
.crPop .sep { height: 1px; background: var(--line2); margin: 3px 4px 3px 30px; }
.crPop .grp { padding: 4px 8px 2px 30px; color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }

/* ------------------------------------------------------------- barra estándar */
#crStd, #propbar {
  display: flex; align-items: center; gap: 2px; padding: 0 6px; background: var(--panel);
  border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden;
}
#crStd::-webkit-scrollbar { height: 0; }
.crTb {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 3px;
  border: 1px solid transparent; background: transparent; color: var(--ico); cursor: default; position: relative;
}
.crTb:hover { background: var(--hover); border-color: var(--line2); }
.crTb.on { background: var(--sel); border-color: var(--accent); }
.crTb.dis { opacity: .35; pointer-events: none; }
.crTb svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.crTb .fly { position: absolute; right: 1px; bottom: 1px; border-left: 4px solid transparent; border-bottom: 4px solid currentColor; }
.crTbSep { width: 1px; height: 20px; background: var(--line2); margin: 0 4px; flex: none; }
.crTbLab { color: var(--text-dim); font-size: 11px; padding: 0 3px; white-space: nowrap; }
select.crSel, input.crNum {
  height: 22px; background: var(--panel2); color: var(--text); border: 1px solid var(--line2);
  border-radius: 3px; padding: 0 4px; font: inherit; font-size: 11.5px; outline: none;
}
select.crSel:focus, input.crNum:focus { border-color: var(--accent); }
input.crNum { width: 62px; text-align: right; }

/* la barra de propiedades del motor, con la pinta de Corel */
#propbar .pgrp + .pgrp::before { margin: 0 4px; }
#propbar .plab { font-size: 11px; }
#propbar .num, #propbar select.sel, #propbar input.txt, #propbar .btn {
  height: 22px; padding: 0 5px; border-radius: 3px; font-size: 11.5px;
}
#propbar .btn.icon { min-width: 24px; }
#propbar .btn:hover { background: var(--hover); }
#propbar .btn.on { background: var(--sel); border-color: var(--accent); color: var(--text); }
#propbar .btn.primary { background: var(--accent); color: #fff; }
.cr-pgrp { display: flex; align-items: center; gap: 4px; }
.cr-pgrp + .pgrp::before, .pgrp + .cr-pgrp::before, .cr-pgrp + .cr-pgrp::before { content: ""; width: 1px; height: 18px; background: var(--line2); margin: 0 4px; }
.cr-pgrp .crTbLab { padding: 0 2px; }
.cr-pgrp input[type=range] { width: 110px; }

/* ------------------------------------------------------------- caja de herramientas */
#crToolbox {
  width: var(--tool-w); background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; padding: 3px 0; gap: 1px; overflow-y: auto; overflow-x: hidden;
}
#crToolbox::-webkit-scrollbar { width: 0; }
.crTool {
  position: relative; width: 28px; height: 26px; flex: none; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--ico); cursor: default;
}
.crTool:hover { background: var(--hover); border-color: var(--line2); }
.crTool.on { background: var(--sel); border-color: var(--accent); }
.crTool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.crTool .fly { position: absolute; right: 1px; bottom: 1px; border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: .8; }
.crToolSep { width: 20px; height: 1px; background: var(--line2); margin: 2px 0; flex: none; }

/* flyout de herramientas (se abre a la derecha del botón) */
.crFly { display: flex; flex-direction: row; padding: 3px; gap: 1px; min-width: 0; }
.crFly .crTool { width: 30px; height: 28px; }
.crFly .crTool.on { background: var(--sel); }
.crFlyList .it { grid-template-columns: 24px 1fr auto; }

/* ------------------------------------------------------------- pestañas de documento e inicio */
#crTabsRow { display: flex; align-items: stretch; height: 24px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
#doctabs { flex: 1; height: 100%; border-bottom: 0; padding: 0 2px; }
.crTab {
  display: flex; align-items: center; gap: 5px; padding: 0 10px; border-right: 1px solid var(--line2);
  color: var(--text-dim); cursor: default; font-size: 11px;
}
.crTab svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.crTab:hover { color: var(--text); background: var(--hover); }
.crTab.on { background: var(--canvas-bg); color: var(--text); }
.dtab { border-radius: 0; border-top: 0; margin-top: 0; }
.dtab.on { border-bottom: 2px solid var(--accent); }

/* ------------------------------------------------------------- lienzo, reglas, páginas */
#stage { position: relative; }
#rulerCorner { font-size: 8.5px; }
#pagebar { height: 24px; padding: 0 3px; font-size: 11px; align-items: center; }
#pagebar .pgb { margin-bottom: 0; height: 18px; font-size: 10px; }
#pagebar .pgnum { padding: 0 6px; color: var(--text); }
#pagebar .ptabs { align-items: center; }
#pagebar .ptab { padding: 2px 12px; border-radius: 0; border-bottom: 1px solid var(--line2); background: var(--panel); }
#pagebar .ptab.on { background: var(--canvas-bg); border-color: var(--accent); }

/* ------------------------------------------------------------- pantalla de inicio */
#crInicio {
  position: absolute; left: 0; right: 0; top: 24px; bottom: 0; z-index: 30; display: none;
  background: var(--panel); color: var(--text); overflow: auto;
}
#crInicio.show { display: grid; grid-template-columns: 200px 1fr; }
.crIniNav { background: var(--bg); border-right: 1px solid var(--line); padding: 20px 0; }
.crIniNav .n { padding: 9px 22px; cursor: default; color: var(--text-dim); border-left: 3px solid transparent; }
.crIniNav .n:hover { color: var(--text); background: var(--hover); }
.crIniNav .n.on { color: var(--text); border-left-color: var(--accent); background: var(--panel); }
.crIniBody { padding: 30px 40px; max-width: 1100px; }
.crIniBody h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.crIniBody h2 { margin: 26px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-weight: 600; }
.crIniBody p { margin: 0 0 10px; color: var(--text-dim); line-height: 1.5; max-width: 700px; }
.crIniCards { display: flex; gap: 12px; flex-wrap: wrap; }
.crIniCard {
  width: 170px; padding: 16px 14px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 6px;
  cursor: pointer; display: flex; flex-direction: column; gap: 8px;
}
.crIniCard:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.crIniCard svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.crIniCard b { font-size: 13px; font-weight: 600; }
.crIniCard span { color: var(--text-dim); font-size: 11px; line-height: 1.4; }
.crIniRec { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.crIniDoc {
  padding: 10px 12px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 5px; cursor: pointer;
}
.crIniDoc:hover { border-color: var(--accent); }
.crIniDoc b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crIniDoc span { color: var(--text-dim); font-size: 11px; }
.crIniTips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; max-width: 800px; }
.crIniTip { display: flex; gap: 10px; align-items: flex-start; }
.crIniTip kbd {
  flex: none; font: 11px/1 Consolas, monospace; padding: 4px 6px; background: var(--panel2);
  border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; min-width: 52px; text-align: center;
}
.crIniFoot { margin-top: 30px; display: flex; gap: 14px; align-items: center; color: var(--text-dim); font-size: 11px; }
.crIniFoot label { display: flex; gap: 5px; align-items: center; }

/* ------------------------------------------------------------- ventanas acoplables */
#crDock { display: flex; flex-direction: row; flex: none; background: var(--panel); border-left: 1px solid var(--line); }
#crDockBody { width: var(--dock-w); display: none; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
#crDock.abierto #crDockBody { display: flex; }
#crDock.oculto { display: none; }
#crDockTabs { width: 22px; display: flex; flex-direction: column; gap: 2px; padding: 4px 0; background: var(--bg); overflow: hidden; }
.crDockTab {
  writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 3px; font-size: 11px; color: var(--text-dim);
  cursor: default; border-right: 2px solid transparent; white-space: nowrap; flex: none;
}
.crDockTab:hover { color: var(--text); background: var(--hover); }
.crDockTab.on { color: var(--text); background: var(--panel); border-right-color: var(--accent); }
.crDockHead {
  display: flex; align-items: center; height: 26px; padding: 0 6px 0 10px; font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--line); flex: none;
}
.crDockHead .spacer { flex: 1; }
.crDockHead button { background: none; border: 0; color: var(--text-dim); font-size: 14px; width: 20px; height: 20px; cursor: pointer; border-radius: 3px; }
.crDockHead button:hover { background: var(--hover); color: var(--text); }
.crDockCont { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.crDockCont::-webkit-scrollbar { width: 9px; }
.crDockCont::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; }
/* los paneles del motor, sin su cabecera (el título ya va en la ventana acoplable) */
.crDockCont .panel > h3 { display: none; }
.crDockCont .panel { border-bottom: 0; }
.crDockCont .panel > .body { padding: 10px 10px 12px; }
.crDockNativo { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.crDockNativo .row .lab { width: 70px; }
.crDockNativo .titulo { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; }
.crDockBtns { display: flex; gap: 4px; flex-wrap: wrap; }
.crDockBtns .btn { padding: 3px 6px; }
.crDockTabs2 { display: flex; border-bottom: 1px solid var(--line); margin: -10px -10px 8px; }
.crDockTabs2 .t { flex: 1; text-align: center; padding: 6px 2px; font-size: 11px; color: var(--text-dim); cursor: default; border-bottom: 2px solid transparent; }
.crDockTabs2 .t:hover { color: var(--text); }
.crDockTabs2 .t.on { color: var(--text); border-bottom-color: var(--accent); }
.crHist { display: flex; flex-direction: column; }
.crHist .h { padding: 4px 8px; font-size: 11.5px; cursor: default; display: flex; gap: 6px; }
.crHist .h:hover { background: var(--hover); }
.crHist .h.on { background: var(--sel); }
.crHist .h.futuro { opacity: .45; }
.crHist .h .n { color: var(--text-dim); width: 24px; text-align: right; }

/* ------------------------------------------------------------- paleta de colores */
#crPalette {
  width: var(--pal-w); background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; padding: 2px 0; flex: none; overflow: hidden;
}
#crPalSw { flex: 1; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden; width: 100%; }
#crPalSw::-webkit-scrollbar { width: 0; }
.crPsw { width: 17px; height: 12px; margin-bottom: 1px; border: 1px solid rgba(0,0,0,.3); flex: none; cursor: default; position: relative; }
.crPsw:hover { outline: 2px solid var(--accent); z-index: 2; }
.crPsw.none { background: #fff; }
.crPsw.none::after { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; background: linear-gradient(to top right, transparent 44%, #d00 45%, #d00 55%, transparent 56%); }
.crPalBtn { width: 18px; height: 14px; border: 0; background: transparent; color: var(--text-dim); font-size: 9px; cursor: pointer; padding: 0; line-height: 1; flex: none; }
.crPalBtn:hover { color: var(--text); background: var(--hover); }
.crTintas { display: grid; grid-template-columns: repeat(7, 18px); gap: 1px; padding: 6px; }
.crTintas .crPsw { width: 18px; height: 14px; margin: 0; }
.crPalPop .cab { padding: 4px 8px; font-size: 11px; color: var(--text-dim); border-bottom: 1px solid var(--line2); }

/* paleta del documento */
#crDocPal { display: flex; align-items: center; gap: 6px; padding: 0 6px; background: var(--panel); border-top: 1px solid var(--line); overflow: hidden; }
.crDocPalLab { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
#crDocPalSw { display: flex; gap: 1px; align-items: center; height: 100%; }
#crDocPalSw .crPsw { width: 14px; height: 14px; margin: 0; }

/* ------------------------------------------------------------- barra de estado */
#statusbar { gap: 0; padding: 0; font-size: 11px; color: var(--text); }
.crSt { display: flex; align-items: center; height: 100%; padding: 0 10px; border-right: 1px solid var(--line2); white-space: nowrap; font-variant-numeric: tabular-nums; }
#crStCoords { min-width: 150px; }
#crStInfo { min-width: 200px; color: var(--text); }
.crStHint { border-right: 0; color: var(--text-dim); font-style: italic; }
#crStColores { border-right: 0; border-left: 1px solid var(--line2); gap: 5px; }
.crStLab { color: var(--text-dim); }
.crSw {
  display: inline-block; width: 16px; height: 12px; border: 1px solid rgba(0,0,0,.35); position: relative;
  background-image: linear-gradient(45deg,#999 25%,transparent 25%,transparent 75%,#999 75%), linear-gradient(45deg,#999 25%,#fff 25%,#fff 75%,#999 75%);
  background-size: 6px 6px; background-position: 0 0, 3px 3px;
}
.crSw i { position: absolute; inset: 0; display: block; }
.crSw.none::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 44%, #d00 45%, #d00 55%, transparent 56%); }

/* ------------------------------------------------------------- cuadros de diálogo con cara de Corel */
#modal { border-radius: 4px; min-width: 420px; }
#modal h2 { font-size: 13px; font-weight: 600; padding: 9px 14px; background: var(--panel); }
#modal .mbody { padding: 12px 14px; }
#modal .mfoot { padding: 8px 14px; background: var(--panel); }
.btn { border-radius: 3px; }
.btn:hover { background: var(--hover); }
.btn.on { background: var(--sel); border-color: var(--accent); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; min-width: 80px; justify-content: center; }
.btn.primary:hover { background: var(--accent2); }
.crForm { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; align-items: center; }
.crForm .lab { color: var(--text); font-size: 12px; }
.crForm .fila { display: flex; gap: 6px; align-items: center; }
.crForm .fila .num, .crForm .fila select { height: 24px; }
.crSecc { font-weight: 600; font-size: 12px; margin: 8px 0 2px; grid-column: 1 / -1; border-bottom: 1px solid var(--line2); padding-bottom: 3px; }
.crNuevo { display: grid; grid-template-columns: 1fr 220px; gap: 16px; }
.crNuevoPrev { display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; min-height: 260px; }
.crNuevoPrev i { display: block; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.crOri { display: inline-flex; gap: 3px; }
.crOri .btn { width: 30px; height: 26px; justify-content: center; padding: 0; }
.crOri .btn i { display: block; border: 1.5px solid currentColor; }
.crOpc { display: grid; grid-template-columns: 170px 1fr; min-height: 340px; }
.crOpcNav { border-right: 1px solid var(--line2); padding-right: 8px; margin-right: 14px; }
.crOpcNav .n { padding: 6px 10px; cursor: default; border-radius: 3px; color: var(--text-dim); }
.crOpcNav .n:hover { background: var(--hover); color: var(--text); }
.crOpcNav .n.on { background: var(--sel); color: var(--text); }
.crOpcPag { display: none; flex-direction: column; gap: 10px; }
.crOpcPag.on { display: flex; }
.crOpcPag h4 { margin: 0 0 4px; font-size: 13px; }
.crTemas { display: flex; gap: 8px; }
.crTema { width: 74px; height: 50px; border: 2px solid var(--line2); border-radius: 4px; cursor: pointer; display: grid; place-items: end center; font-size: 10px; padding-bottom: 3px; }
.crTema.on { border-color: var(--accent); }
.crCaracteres { display: grid; grid-template-columns: repeat(12, 28px); gap: 2px; max-height: 260px; overflow: auto; }
.crCaracteres button { width: 28px; height: 28px; font-size: 15px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 3px; cursor: pointer; }
.crCaracteres button:hover { border-color: var(--accent); background: var(--hover); }
.crFormasGrid { display: grid; grid-template-columns: repeat(6, 34px); gap: 3px; padding: 4px; }
.crFormasGrid .crTool { width: 34px; height: 30px; }
.crFormasGrid .crTool svg { width: 22px; height: 22px; }
.crAyudaTabla { width: 100%; border-collapse: collapse; }
.crAyudaTabla td { padding: 3px 4px; border-bottom: 1px solid var(--line2); }
.crAyudaTabla td:last-child { text-align: right; color: var(--text-dim); white-space: nowrap; }
.crAcerca { display: flex; gap: 16px; align-items: flex-start; }
.crAcerca img { width: 64px; height: 64px; }

/* lo de Krea que no pinta en Corel (su CSS les pone display:flex, así que
   el atributo hidden no basta) */
#wsswitch, #btnInstalar, #floatbar, #menus, #toolbox, #leftdock, #rightdock, #palette, #docname,
#statusbar .st-style, #stInfo, #stCoords, #statusbar .st-zoom { display: none !important; }
body.norulers #crInicio { top: 24px; }
.vernueva span::before { content: ""; }

/* vista previa a pantalla completa (F9): sólo el dibujo */
body.crFull { grid-template-rows: 0 0 0 0 1fr 0 0; }
body.crFull > *:not(#workspace):not(#modalbg):not(#toast):not(#crMenuPop):not(#ctxmenu) { display: none !important; }
body.crFull #crToolbox, body.crFull #crDock, body.crFull #crPalette, body.crFull #crTabsRow, body.crFull #pagebar, body.crFull #rulers { display: none !important; }
body.crFull #canvasWrap { margin-left: 0; }

/* modo Lite: menos barras */
body.lite #crDocPal { display: none; }
body.lite { grid-template-rows: 26px 24px 34px 34px 1fr 0 24px; }