html,body{
      height:100%;
      margin:0;
    }
    body{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
      background:#0b0f14;
      color:#e8eef6;
      display:flex;
      flex-direction:column;
      min-height:100vh;
      /* dejamos que haya scroll vertical global si hace falta */
    }

        /* ===== Scrollbars globales (Firefox) ===== */
    *{
      scrollbar-width: thin;
      scrollbar-color: #2b6cff rgba(5,7,11,.9);
    }

    /* ===== Scrollbars globales (WebKit: Chrome, Edge, Safari) ===== */
    ::-webkit-scrollbar{
      width:10px;
      height:10px;
    }
    ::-webkit-scrollbar-track{
      background:#05070b;
      border-radius:999px;
    }
    ::-webkit-scrollbar-thumb{
      background:#2b6cff;
      border-radius:999px;
      border:2px solid #05070b;
    }
    ::-webkit-scrollbar-thumb:hover{
      background:#5d88ff;
    }

    /* Scrollbars más finos en menús flotantes */
    .tool-menu::-webkit-scrollbar{
      width:6px;
      height:6px;
    }
    .tool-menu::-webkit-scrollbar-thumb{
      border-width:1px;
    }


    .top{
      position:sticky;
      top:0;
      z-index:1000; /* por encima de los canvas (20/21) */
      background:#0f1620;
      border-bottom:1px solid rgba(255,255,255,.08);
      padding:10px;
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }

    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:6px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      margin-right:4px;
    }
    .brand-logo{
      width:38px;
      height:38px;
      min-width:38px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,#2b6cff,#7a5cff);
      color:#fff;
      font-weight:800;
      font-size:14px;
      letter-spacing:.6px;
      box-shadow:0 6px 16px rgba(43,108,255,.35);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }
    .brand-title{
      font-weight:800;
      color:#ffffff;
      font-size:15px;
      letter-spacing:.4px;
    }
    .brand-sub{
      font-size:11px;
      opacity:.72;
    }

    .appFooter{
      border-top:1px solid rgba(255,255,255,.08);
      padding:12px 16px;
      text-align:center;
      color:#9aa4b2;
      font-size:12px;
      background:#0f1620;
    }

    .btn{
      background:#1c2a3a;
      color:#e8eef6;
      border:1px solid rgba(255,255,255,.12);
      padding:8px 10px;
      border-radius:10px;
      cursor:pointer
    }
    .btn:hover{filter:brightness(1.1)}
    .btn.primary{background:#2b6cff;border-color:rgba(43,108,255,.6)}
    .btn.active{
      outline:2px solid rgba(43,108,255,.8);
      box-shadow:0 0 0 3px rgba(43,108,255,.18)
    }

    /* Botones de herramientas sólo con ícono */
    .btn.tool{
      padding:6px;
      min-width:36px;
      height:36px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }

    .tool-icon{
      font-size:18px;
      line-height:1;
      pointer-events:none;
    }

    .tool-group{
      position:relative;
      display:inline-flex;
    }

    .tool-menu{
      position:absolute;
      top:110%;
      left:0;
      background:#0f1620;
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;
      padding:4px;
      display:none;
      flex-direction:column;
      gap:4px;
      z-index:1500;
      min-width:44px;
      max-height:260px;
      overflow:auto;
    }

    .tool-menu.show{
      display:flex;
    }

    .tool-menu-item{
      background:transparent;
      border:none;
      color:#e8eef6;
      cursor:pointer;
      padding:4px;
      border-radius:8px;
      font-size:18px;
      line-height:1;
    }

    .tool-menu-item:hover{
      background:rgba(255,255,255,.08);
    }

    /* MENÚ DE EMOJIS EN HORIZONTAL + WRAP */
    #emojiMenu{
      flex-direction:row;
      flex-wrap:wrap;
      max-width:260px;
    }
    #emojiMenu .tool-menu-item{
      font-size:22px;
    }

    .row{
      display:flex;
      gap:12px;
      padding:12px;
      flex:1;        /* ocupa el espacio disponible debajo de .top */
      min-height:0;  /* permite que los hijos puedan scrollear */
      overflow:hidden; /* el scroll lo manejan .main y .left */
    }

    .left{
      position:relative;
      z-index:500;
      width:210px;
      min-width:210px;
      max-height:100%;
      overflow:auto;
      border-right:1px solid rgba(255,255,255,.08);
      padding-right:10px;
    }

    .thumb{
      cursor:pointer;
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px;
      margin-bottom:10px;
      overflow:hidden;
      background:#0f1620
    }
    .thumb canvas{
      display:block;
      width:100%
    }

    .main{
      flex:1;
      min-width:0;
      overflow-y:auto;
      overflow-x:scroll;   /* SIEMPRE muestra la barra horizontal */
    }

    /* cursores para la herramienta Mano */
    .main.hand{
      cursor:grab;
    }
    .main.hand.panning{
      cursor:grabbing;
    }

    /* <<< CAMBIO IMPORTANTE: la página usa su ancho real >>> */
    .pageWrap{
      display:block;
      margin:18px auto;
      width:fit-content;   /* hace que el ancho sea el de la página (stack) */
    }

    .stack{
      position:relative;
      display:inline-block;
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 10px 30px rgba(0,0,0,.45);
      border:1px solid rgba(255,255,255,.10);
      user-select:none;
    }
    .hint{opacity:.8;font-size:13px}
    .err{
      background:#3a1c1c;
      border:1px solid rgba(255,0,0,.4);
      padding:10px;
      border-radius:12px;
      margin:12px
    }

    /* File input: botón "Seleccionar archivo" custom */
    input[type="file"]{
      position:relative;
      max-width:260px;
      background:#0f1620;
      color:#9aa4b2;
      border:1px solid rgba(255,255,255,.12);
      border-radius:999px;
      padding:6px 10px;
      font-size:13px;
      cursor:pointer;
    }

    /* Botón interno (Chrome, Edge, Opera, Safari moderno) */
    input[type="file"]::file-selector-button{
      background:#2b6cff;
      color:#e8eef6;
      border:none;
      padding:6px 14px;
      margin-right:10px;
      border-radius:999px;
      font-size:13px;
      cursor:pointer;
      transition:filter .15s ease, transform .05s ease;
    }

    input[type="file"]::file-selector-button:hover{
      filter:brightness(1.08);
      transform:translateY(-0.5px);
    }

    /* WebKit legacy */
    input[type="file"]::-webkit-file-upload-button{
      background:#2b6cff;
      color:#e8eef6;
      border:none;
      padding:6px 14px;
      margin-right:10px;
      border-radius:999px;
      font-size:13px;
      cursor:pointer;
      transition:filter .15s ease, transform .05s ease;
    }
    input[type="file"]::-webkit-file-upload-button:hover{
      filter:brightness(1.08);
      transform:translateY(-0.5px);
    }

    input[type="text"], select, input[type="number"], input[type="range"]{
      background:#0f1620;
      color:#e8eef6;
      border:1px solid rgba(255,255,255,.12);
      padding:8px;
      border-radius:10px
    }
    input[type="color"]{
      width:38px;
      height:36px;
      padding:0;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.12);
      background:#0f1620;
    }

    /* 2da barra (opciones por herramienta / selección) */
    .opts{
      flex-basis:100%;
      display:none;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      padding-top:10px;
      border-top:1px dashed rgba(255,255,255,.10);
      margin-top:4px;
    }
    .opts.show{display:flex}
    .optGroup{
      display:none;
      gap:10px;
      align-items:center;
      flex-wrap:wrap
    }
    .optGroup.show{display:flex}
    .pill{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      font-size:13px;
      opacity:.95
    }
    .mini{font-size:12px;opacity:.85}

    /* Fabric: que siempre quede arriba */
    .canvas-container{
      position:absolute !important;
      left:0;
      top:0;
      z-index:20
    }
    .canvas-container .upper-canvas{
      z-index:21 !important
    }

    .desktopOnly{display:inline-flex;}
    .mobileOnly{display:none;}

    @media (max-width: 768px) {
      body{
        font-size:15px;
      }

      .top{
        position:sticky;
        top:0;
        padding:6px 8px;
        gap:6px;
      }

      .row{
        flex-direction:column;
        padding:8px;
      }

      .left{
        order:2;
        width:100%;
        min-width:0;
        max-height:120px;
        border-right:none;
        border-top:1px solid rgba(255,255,255,.08);
        padding:8px 0 0 0;
        margin-top:8px;
        display:flex;
        gap:8px;
        overflow-x:auto;
        overflow-y:hidden;
      }

      .thumb{
        flex:0 0 80px;
        margin-bottom:0;
      }

      .main{
        order:1;
        flex:1;
        min-height:0;
        overflow-y:auto;
        overflow-x:scroll;  /* horizontal visible también en móvil */
      }

      /* mismo criterio en móvil */
      .pageWrap{
        margin:8px auto;
        width:fit-content;
      }

      .stack{
        margin:0 auto;
      }

      .hint{
        font-size:12px;
      }

      .desktopOnly{display:none;}
      .mobileOnly{display:inline-flex;}
    }