/* BIGOTESUCIO LAB / visual edition 02 */
:root {
  --color-bg:#e9e8e1; --color-bg-elevated:#f4f3ed; --color-bg-panel:#f4f3ed;
  --color-bg-hover:transparent; --color-bg-active:transparent;
  --color-border-subtle:rgba(20,20,20,.2); --color-text-primary:#141414;
  --color-text-secondary:#484842; --sidebar-width:248px; --tool-flyout-width:300px;
}
body { background:#e9e8e1; }
.app-header { height:54px; background:#f4f3ed; padding:0 22px; }
.app-header__logo::after { content:"/ 01  EFECTOS DE IMAGEN"; border:0; padding-left:12px; color:#696963; }
.app-header__actions { gap:8px; }
.app-body { background:#e9e8e1; }
.sidebar-left { order:2; width:var(--sidebar-width); border-right:0; border-left:1px solid var(--color-border-subtle); background:#f4f3ed; }
.sidebar-left::before { content:"ÍNDICE  /  41 PROCESOS"; display:block; padding:17px 18px 4px; color:#787872; font-size:10px; letter-spacing:.08em; }
.sidebar-left__header { padding:13px 18px 8px; font-size:11px; border:0; }
.sidebar-left__section { border-color:var(--color-border-subtle); }
.sidebar-item { height:auto; min-height:34px; padding:6px 18px; border-radius:0; font-size:11px; line-height:1.35; transition:color .15s ease; }
.sidebar-item:hover, .sidebar-item.is-active { background:transparent; color:#141414; }
.sidebar-item:hover::before, .sidebar-item.is-active::before { content:""; position:absolute; inset:50% 10px auto 15px; height:16px; transform:translateY(-50%); background:#e7ff00; filter:blur(11px); z-index:-1; }
.sidebar-item.is-active { font-weight:600; }
.canvas-area { order:1; background:#e9e8e1; }
.canvas-viewport { background:#e9e8e1; background-image:none; padding:24px; }
.canvas-viewport::before { content:"BIGOTESUCIO / LAB  001"; position:absolute; top:14px; left:18px; font-size:10px; color:#696963; letter-spacing:.05em; pointer-events:none; z-index:2; }
.canvas-area__canvas { border-radius:0; box-shadow:0 1px 16px rgba(20,20,20,.11); }
.zoom-bar { background:#e9e8e1; border-top:1px solid var(--color-border-subtle); }
.tool-flyout { left:auto; right:var(--sidebar-width); border-right:0; border-left:1px solid var(--color-border-subtle); box-shadow:-8px 0 26px rgba(20,20,20,.05); background:#f4f3ed; }
.tool-flyout__header { padding:18px 18px 10px; }
.canvas-area.has-tool-open .zoom-bar { margin-left:0; }
.upload-overlay { background:#e9e8e1; }
.upload-overlay__home { width:min(480px,calc(100vw - 60px)); min-width:0; padding:34px 36px; align-items:flex-start; text-align:left; border:0; border-top:1px solid #141414; background:transparent; box-shadow:none; }
.upload-overlay__home::before { content:"001 / IMAGEN EN PROCESO"; align-self:flex-start; margin-bottom:23px; font-size:10px; color:#777770; letter-spacing:.08em; }
.upload-overlay__text { max-width:400px; padding:0; text-align:left; font-size:14px; line-height:1.55; letter-spacing:0; }
.upload-overlay__about { border:0; border-top:1px solid #141414; background:#f4f3ed; }
.btn { border-radius:0; }
.btn--primary,.btn--import { background:#141414; color:#f4f3ed; }
.btn--primary:hover,.btn--import:hover { background:#141414; color:#e7ff00; }
.lab-back { border:0; padding:8px 2px; }
.lab-back:hover, a:hover, button:hover { text-decoration-color:#e7ff00; }
@media (max-width:768px) {
  :root { --sidebar-width:min(80vw,280px); --tool-flyout-width:min(80vw,300px); }
  .app-header { padding:0 12px; }
  .sidebar-left { order:initial; }
  .canvas-area { order:initial; }
  .sidebar-left::before,.canvas-viewport::before { display:none; }
  .tool-flyout { right:0; }
  .upload-overlay__home { padding:24px; }
}

/* Shared LAB layout: index, unobstructed canvas, separate controls. */
.app-header__logo img { display:none !important; }
.app-header__logo::after { content:"EFECTOS DE IMAGEN" !important; border:0 !important; padding:0 !important; font-size:12px !important; color:#141414 !important; }
.app-body { gap:0; }
.sidebar-left { order:1; width:220px; border-left:0; border-right:1px solid var(--color-border-subtle); }
.sidebar-left::before { content:"PROCESOS / 41"; }
.sidebar-left__list { padding:8px 10px 20px; }
.sidebar-item { min-height:29px; padding:4px 9px; font-size:10px; }
.sidebar-item.is-active { background:radial-gradient(ellipse at 28% 55%,rgba(231,255,0,.75),transparent 75%); }
.canvas-area { order:2; min-width:0; }
.canvas-viewport { background:#e9e8e1 !important; background-image:none !important; padding:28px; cursor:grab !important; }
.canvas-viewport:active { cursor:grabbing !important; }
.canvas-viewport::before { content:"ARRASTRA PARA MOVER · RUEDA PARA ZOOM"; color:#777770; }
.tool-flyout,.tool-flyout.is-open { order:3; position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; width:min(290px,28vw); flex-shrink:0; border-left:1px solid var(--color-border-subtle); border-right:0; box-shadow:none; }
.canvas-area.has-tool-open .zoom-bar { margin-left:0; }
.upload-overlay .slime-canvas { display:none !important; }
.upload-overlay__home { position:relative; z-index:2; }
@media(max-width:900px){.sidebar-left{width:170px}.tool-flyout,.tool-flyout.is-open{width:250px}.canvas-viewport{padding:12px}}
@media(max-width:768px){.sidebar-left{order:initial;width:var(--sidebar-width)}.canvas-area{order:initial}.tool-flyout,.tool-flyout.is-open{position:absolute;top:0;bottom:0;right:0;left:auto;width:var(--tool-flyout-width);z-index:70}.canvas-viewport::before{display:none}}

/* Shared LAB layout: index, unobstructed canvas, separate controls. */
.app-header__logo img { display:none !important; }
.app-header__logo::after { content:"EFECTOS DE IMAGEN" !important; border:0 !important; padding:0 !important; font-size:12px !important; color:#141414 !important; }
.app-body { gap:0; }
.sidebar-left { order:1; width:220px; border-left:0; border-right:1px solid var(--color-border-subtle); }
.sidebar-left::before { content:"PROCESOS / 41"; }
.sidebar-left__list { padding:8px 10px 20px; }
.sidebar-item { min-height:29px; padding:4px 9px; font-size:10px; }
.sidebar-item.is-active { background:radial-gradient(ellipse at 28% 55%,rgba(231,255,0,.75),transparent 75%); }
.canvas-area { order:2; min-width:0; }
.canvas-viewport { background:#e9e8e1 !important; background-image:none !important; padding:28px; cursor:grab !important; }
.canvas-viewport:active { cursor:grabbing !important; }
.canvas-viewport::before { content:"ARRASTRA PARA MOVER · RUEDA PARA ZOOM"; color:#777770; }
.tool-flyout,.tool-flyout.is-open { order:3; position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; width:min(290px,28vw); flex-shrink:0; border-left:1px solid var(--color-border-subtle); border-right:0; box-shadow:none; }
.canvas-area.has-tool-open .zoom-bar { margin-left:0; }
.upload-overlay .slime-canvas { display:none !important; }
.upload-overlay__home { position:relative; z-index:2; }
@media(max-width:900px){.sidebar-left{width:170px}.tool-flyout,.tool-flyout.is-open{width:250px}.canvas-viewport{padding:12px}}
@media(max-width:768px){.sidebar-left{order:initial;width:var(--sidebar-width)}.canvas-area{order:initial}.tool-flyout,.tool-flyout.is-open{position:absolute;top:0;bottom:0;right:0;left:auto;width:var(--tool-flyout-width);z-index:70}.canvas-viewport::before{display:none}}

.scribble-overlay { display:none !important; }
.app-header__logo::after { display:inline-flex !important; }
@media(max-width:768px){.app-header__logo::after{font-size:10px !important}}