/***menu - left***/

.responsive-menu {
  display: flex;
  align-items: center;
   
  overflow: visible; /* <- Cambiado de hidden a visible */
  position: relative;
  z-index: 90; /* <- Para que sobresalga del layout */

}


    .menu-items {
      display: flex;
      flex: 1; 
    }

 .menu-item {
    position: relative;
    padding: 0px 5px;
    margin-right: 5px;
    cursor: pointer;
    white-space: nowrap;
    z-index: 1;
    border: 1px solid transparent;
}


    .menu-item:hover {
      background: var(--active-tab-bg);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: var(--bs-black);
    border: 1px solid var(--border-color);
    }

    /* Submenús */
 .menu-item .submenu {
  display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    background: var(--active-tab-bg);
    color: var(--bs-black);
    border: 1px solid var(--border-color);
    z-index: 999;
    min-width: 160px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}


    .menu-item:hover .submenu {
      display: block;
    }

    .submenu div {
      padding: 2px 5px;
      white-space: nowrap;
    }

    .submenu div:hover {
      background: var(--bs-light-primary);
    }

.menu-more,
.menu-hamburger {
  position: relative;
  cursor: pointer;
  padding: 8px;
  display:none;
}

    .menu-more:hover .more-dropdown,
    .menu-hamburger:hover .hamburger-dropdown {
      display: block;
    }

    .more-dropdown, .hamburger-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
    border-radius: 10px;
     background: var(--bg-color);
    border: 1px solid var(--border-color);
      display: none;
      z-index: 200;
      min-width: 160px;
      z-index: 9999;
    }

    .more-dropdown div, .hamburger-dropdown div {
      padding: 2px 5px;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 5px;
    margin: 5px;
    }

    .more-dropdown div:hover, .hamburger-dropdown div:hover {
      border-top-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 0px;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    }

    /* Responsive para vista móvil */ 
@media (max-width: 750px) {
  .menu-items {
    display: none !important;
  }

  .menu-more {
    display: none !important;
  }

  .menu-hamburger {
    display: block !important;
  }
  .responsive-menu{
      position: relative;
  }
} 
@media (min-width: 750px) {
  .menu-items {
    display: flex !important;
  }
 
  .menu-hamburger {
    display: none !important;
  }
  
  .responsive-menu{
      position: absolute;
    left: 60px;

  }
}


    .menu-clone {
  position: relative;
}

.menu-clone .submenu {
  display: none;
    position: absolute;
    top: -0.5px;
    left: 100%;
 margin: 0;
    background: var(--bg-color);
    z-index: 9999;
    min-width: 160px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 5px;
    border: 1px solid var(--border-color);
}

.menu-clone:hover .submenu {
  display: block;
} 


/***menu - right***/
      
.icode-container-right-actions-container {
    align-items: center;
    display: flex;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    gap: 4px;
    justify-content: flex-end
}

.icode-container-right-actions-container li {
    align-items: center;
    cursor: pointer;
    display: block;
    justify-content: center;
    position: relative;
    display: flex
}

.icode-container-right-actions-container li a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 3px;
    transition: color 0.2s ease;
}

.icode-container-right-actions-container li a:hover {
    background-color: var(--icode-toolbar-hoverBackground)
}

.i-regular { 
    color: var(--icode-editorWatermark-foreground); 
    font-size: 18px;
}

.icode-container-right-actions-container li a:hover .i-regular {
    color:  var(--bs-primary);
    
}


  









/***panel editor***/
            
.editor-group-watermark {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: auto;
    max-width: 350px
}

.letterpress {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 251 216"><g transform="translate(0,216) scale(0.1,-0.1)" stroke="none"><path d="M373 2105 c-78 -21 -130 -51 -191 -108 -125 -119 -172 -289 -122 -448 86 -279 402 -403 652 -256 54 31 139 120 166 173 71 140 67 303 -11 436 -32 54 -121 139 -175 167 -97 49 -218 63 -319 36z"/><path d="M1222 1564 l-363 -504 -375 0 -374 0 0 -505 0 -505 375 0 375 0 0 503 1 502 22 -25 c12 -14 190 -240 396 -503 l374 -477 395 0 394 0 -34 43 c-19 23 -197 250 -397 505 l-362 463 47 67 c27 37 189 262 361 500 172 238 313 435 313 438 0 2 -177 4 -392 3 l-393 0 -363 -505z"/></g></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  background-color: var(--bs-primary); /* Aquí sí funciona la variable */
  width: 175px;
  height: 157px;
    filter: opacity(.1)
}

.shortcuts>.watermark-box {
    border-collapse: separate;
    border-spacing: 11px 17px;
    display: inline-table;
    font-family: monospace
}

.shortcuts dl {
    color: var(--icode-editorWatermark-foreground);
    cursor: default;
    display: table-row;
    opacity: .8
}

.shortcuts dt,.shortcuts dd {
    display: table-cell;
    vertical-align: middle
}

.shortcuts dt {
    letter-spacing: .04em;
    text-align: right
}

.shortcuts dd {
    text-align: left
}

.icode-container-keybinding {
    align-items: center;
    display: flex;
    line-height: 10px;
    color: var(--icode-keybindingLabel-foreground)
}

.icode-container-keybinding>.icode-container-keybinding-key {
    border-radius: 3px;
    display: inline-block;
    font-size: 11px;
    margin: 0 5px;
    padding: 3px 5px;
    vertical-align: middle;
    color: var(--bs-body-color);
    background-color: var(--icode-keybindingLabel-background);
    border-bottom: 1px solid var(--icode-keybindingLabel-bottomBorder);
    box-shadow: inset 0 -1px 0 var(--icode-widget-shadow)
}

.icode-container-keybinding>.icode-container-keybinding-key-separator {
    display: inline-block;
    color: #ccc
}





/**panel 3 - view**/

.ikode-container-view {
    display: flex;
    flex-direction: column;
}
.ikode-container-view {
    width: 100%;
    height: 100%;
    white-space: normal;
    background-color: var(--icode-color-view);
    color: var(--icode-color-view-txt);
    border-left: 1px solid var(--icode-border);
    border-right: 0px none var(--icode-border);
}
.ikode-container-view-mnu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: var(--bg-color);
    height: 40px;
    border-bottom: 1px solid var(--border-color);
}
.ikode-container-view-mnu-select {
    padding: 5px;
    display: flex;
    font-size: 14px;
    align-items: center;
    flex-direction: row;
}
.sDimensions {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-left: 5px;
    padding: 2px;
    font-size: 10px;
    background: var(--bg-color); 
}
.ikode-container-view-mnu-input {
    display: flex;
    align-items: center;
    padding: 5px;
}
 
.l-design-widht {
    max-width: 40rem;
    padding: 1rem
}

.input {
    position: relative;
    font-weight: 300
}

.input__label {
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px 4px;
    margin: 0px 0px 0;
    white-space: nowrap;
    transform: translate(0);
    transform-origin: 0 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    transition: transform .12s ease-in;
    font-weight: 700;
    line-height: .9;
    font-size: 10px;
    font-family: monospace;
    border-radius: 5px;
}

.input__field {
    box-sizing: border-box;
    display: block;
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: cursive;
    position: relative;
    text-overflow: ellipsis;
    transition: background-color .15s;
    white-space: nowrap;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    min-width: 90px;
}

.input__field:not(:-moz-placeholder-shown)+.input__label {
    transform: translate(.25rem,-30%) scale(.8);
    padding: 2px 3px;
}

.input__field:not(:-ms-input-placeholder)+.input__label {
    transform: translate(.25rem,-30%) scale(.8);
    padding: 2px 3px;
}

.input__field:focus+.input__label,.input__field:not(:placeholder-shown)+.input__label {
    transform: translate(.25rem,-60%) scale(.8);
    padding: 2.5px 3px;
}

.icode-container-view-mnu-select {
    padding: 5px;
    display: flex;
    font-size: 14px;
    align-items: center;
    flex-direction: row
}
 
.sDimensions:focus-visible {
    outline-offset: unset!important
}

.ikode-container-view-ctn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
}