.export-for-responsive {
    display: none !important;
    border-left: 1px solid #ddd;
}

.editing-tools .editing-mode {
    overflow: hidden;
}

.close-color-btn,
.sidebar .items[data-type="text"]:not(.active) {
    display: none !important;
}

.close-color-btn {
    background: #eee !important;
    border: 1px solid #2b3741 !important;
    color: #2b3741 !important;
}

.tool-header {
    position: absolute;
    top: -42px;
    z-index: 999999;
    width: 100%;
    padding: 10px;
    background: var(--editor-primary-color);
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    display: none;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}



@media screen and (max-width: 1140px) {
    .editor-wraper {
        padding-inline: 6rem;
    }
}

@media screen and (max-width: 992px), screen and (max-device-width: 992px), screen and (hover: none) and (pointer: coarse) {
    .editor-wraper {
        padding-inline: 3rem;
    }
}

@media screen and (max-width:768px) {
    /* En móvil el modal se organiza en columna para mostrar el menú principal antes del lienzo. */
    .editor-popup {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .editing-tools .editing-mode {
        overflow: inherit;
    }

    .design-popup .categories:not(.active),
    .design-popup .categories.active~.panels {
        display: none;
    }

    .editing-tools .editing-mode[data-type="shirt"] .heading {
        padding: 10px;
        font-size: 15px;
    }

    .single-tool.active~.tool-header {
        display: flex;
    }

    .close-color-btn,
    .design-popup .categories:not(.active)~.panels .prev-btn {
        display: block !important;
    }

    .editor-wraper {
        padding-top: 0px;
        padding-inline: 0px;
    }

    .options-selector-panel,
    .editor-popup {
        border-radius: 0px;
    }

    .design-popup {
        top: 43%;
        box-shadow: none !important;
        border: 1px solid #ddd;
    }

    .design-popup .categories {
        width: 100%;
        padding-top: 30px;
    }

    .design-popup .panels {
        width: 100%;
    }

    .design-popup .panels .single-panel .single-design {
        max-width: none;
        flex: 0 0 calc((100% - 28px) / 3);
        flex-basis: calc((100% - 28px) / 3);
        width: calc((100% - 28px) / 3);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .export-for-responsive {
        display: flex !important;
    }

    .template-popup .template-preview {
        height: calc(100% - 90px);
    }

    .template-popup {
        width: 330px;
        top: 40%;
    }

    .template-popup .bottom-area button {
        padding: 7px;
        font-size: 12px;
    }

    .editing-mode {
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        box-shadow: none !important;
        border-radius: 0px !important;
    }


    .editor-popup {
        height: 100vh;
        padding: 0px;
    }

    /* El menú principal deja de anclarse abajo y pasa a formar parte del flujo superior del editor. */
    .sidebar {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        border-radius: 0px;
        padding: 0px;
        border-top: none;
        border-bottom: 1px solid #ddd;
        box-shadow: none;
        z-index: 3;
        order: 1;
        flex-shrink: 0;
    }

    /* El submenú móvil de texto deja de usarse para conservar el panel completo como en desktop. */
    .sidebar .items[data-type="text"] {
        display: none !important;
    }

    /* La zona de previsualización ocupa el espacio central disponible justo debajo del menú principal. */
    .shirt-editor-con {
        order: 2;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        padding-top: 9px;
    }

    /* La previsualización se alinea arriba para eliminar el hueco visual innecesario antes de la imagen. */
    .preview-area {
        padding-left: 0px;
        padding-right: 0px;
        height: 100%;
        justify-content: center;
        align-items: flex-start;
    }

    /* La imagen y el canvas se centran horizontalmente, priorizando el arranque desde la parte superior. */
    .preview-area .image {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }

    /* El recurso gráfico se ancla arriba para evitar el espacio vacío sobre la camiseta en mobile. */
    .preview-area .shirt-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-position: top center;
    }

    /* Los paneles inferiores vuelven al flujo del editor para mantenerse visibles dentro del modal móvil. */
    .editing-tools {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        order: 3;
        flex-shrink: 0;
        z-index: 8;
        pointer-events: none;
        margin-top: auto;
    }

    .editing-tools .editing-mode.active {
        pointer-events: auto;
    }

    /* El panel de texto vuelve a mostrar todos los controles a la vez, igual que en desktop. */
    .editing-mode[data-type="text"] .single-tool,
    .editing-mode[data-type="text"] .hide-tool {
        display: block !important;
    }

    .editing-mode[data-type="text"] .tool-header,
    .options-selector-panel#colorPicker .header,
    .close-color-btn {
        display: none !important;
    }

    /* El panel de color mantiene el comportamiento compacto dentro del panel flotante. */
    .editing-mode[data-type="text"] .options-selector-panel#colorPicker {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        height: auto;
        min-height: 100%;
        z-index: 12;
        background: rgba(255, 255, 255, 0.98);
        display: none !important;
    }

    /* El panel de fuentes recupera la presentación de desktop dentro del contenedor flotante móvil. */
    .editing-mode[data-type="text"] .options-selector-panel#fontFamily {
        position: absolute;
        top: 0px;
        right: -105%;
        bottom: 0px;
        left: 0px;
        height: auto;
        min-height: 100%;
        z-index: 12;
        background: #fff;
        border-radius: 0px;
        overflow: hidden;
        display: none !important;
    }

    .editing-mode[data-type="text"] .options-selector-panel#fontFamily.active,
    .editing-mode[data-type="text"] .options-selector-panel#colorPicker.active {
        display: flex !important;
    }

    .editing-mode[data-type="text"] .options-selector-panel#fontFamily.active {
        right: 0px;
    }

    .editing-mode[data-type="text"] .options-selector-panel#fontFamily .header {
        display: flex !important;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid #ddd;
        justify-content: inherit;
        padding-right: 32px;
    }

    .editing-mode[data-type="text"] .options-selector-panel#fontFamily .header .title {
        font-size: 15px;
    }

    .editing-mode[data-type="text"] .options-selector-panel#fontFamily .list {
        height: auto;
        max-height: min(180px, 28vh);
        overflow-y: auto;
    }

    .editing-mode[data-type="text"] .options-selector-panel#fontFamily .list .item {
        font-size: 17px;
        padding: 10px 12px;
        line-height: 1.2;
    }

    .editing-mode[data-type="text"] .colors-con {
        border-top: 1px solid #ddd;
    }

    .editing-mode[data-type="text"] {
        max-height: min(236px, 38vh);
        overflow-y: auto !important;
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid #d8dee6;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.14) !important;
    }

    .editing-mode[data-type="text"] .text-edit-input {
        padding: 6px;
    }

    .editing-mode[data-type="text"] .text-edit-inp {
        height: 50px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .editing-mode[data-type="text"] .options-selector {
        padding: 8px 12px;
        display: block;
        position: relative;
        padding-right: 30px;
    }

    .editing-mode[data-type="text"] .options-selector .item {
        font-size: 15px;
        margin: 0px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        line-height: 1.2;
        display: block;
    }

    .editing-mode[data-type="text"] .options-selector img {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
    }

    .editing-mode[data-type="text"] .curve-text-inp-con {
        padding: 10px 12px;
    }

    .editing-mode[data-type="text"] .alignments .align-btn {
        padding: 4px 10px;
    }

    .editing-mode[data-type="text"] .alignments .align-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    .editing-mode[data-type="text"] .colors-con {
        padding: 8px 10px 10px;
        gap: 8px;
    }

    .editing-mode[data-type="text"] .colors-con .list {
        display: grid;
        grid-template-columns: repeat(6, 28px);
        grid-template-rows: repeat(2, 28px);
        justify-content: space-between;
        gap: 8px 10px;
    }

    .editing-mode[data-type="text"] .colors-con .single-color,
    .editing-mode[data-type="text"] .color-picker-toggle {
        width: 28px;
        height: 28px;
    }

    .editing-mode[data-type="shirt"] {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12) !important;
    }

    /* Los accesos flotantes mantienen su posición sobre el lienzo, ahora debajo del menú principal. */
    .top-area {
        top: 10px;
        padding: 0px;
    }

    .top-area.zoom-con {
        left: 6px;
    }

    .top-area.zone-selector-con {
        right: 6px;
    }

    .top-area .zoom-btn {
        gap: 0px;
        padding: 4px;
        border-radius: 4px;
        width: 28px;
        height: 28px;
    }

    .top-area .zoom-btn img {
        width: 14px;
        height: 14px;
    }

    .zone-selector-button {
        font-size: 12px;
        padding: 6px 8px;
    }

    .zone-options {
        width: 204px;
    }

    .zone-option {
        width: 86px;
    }

    .zone-option-image {
        width: 72px;
        height: 72px;
    }

    .zone-option-name {
        font-size: 11px;
    }

    .sidebar .items {
        display: flex;
        flex-direction: row;
    }

    .sidebar .items .item {
        border-bottom: none;
        gap: 3px;
        padding: 10px 4px;
        min-width: 0px;
    }

    .sidebar .items[data-type="text"] .item:nth-child(3),
    .sidebar .items .item:nth-child(2) {
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }

    .sidebar .items[data-type="sidebar"] .item {
        width: 20%;
    }

    .sidebar .items .item .image {
        width: 20px;
        height: 20px;
    }

    .sidebar .items .item .title {
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0px;
    }

    .sidebar .items[data-type="sidebar"] .mis-disenos-accion-btn .title {
        display: block;
        width: 100%;
        font-size: 13px !important;
        white-space: nowrap;
    }

    .mis-disenos-modal-contenido {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
    }

    .mis-disenos-tabla {
        min-width: 500px;
    }


    .single-tool#fontFamily .list {
        max-height: none;
    }
}

@media screen and (max-width:650px) {}

@media screen and (max-width:574px) {}

@media screen and (max-width:478px) {}

@media screen and (max-width:394px) {}