/*
======================================================
Two Glass Designer
Admin Designer - Konva
======================================================
*/

/*====================================================
GENERAL
====================================================*/

.tgd-wrapper{
    padding:15px;
}

.tgd-wrapper h2{
    margin-top:0;
}

.tgd-wrapper p{
    color:#666;
}

/*====================================================
VISTA PREVIA
====================================================*/

#tgd-preview{

    margin-top:20px;

    padding:20px;

    background:#fff;

    border:1px solid #dcdcde;

    border-radius:8px;

    text-align:center;

    min-height:220px;

}

#tgd-preview img{

    max-width:350px;

    height:auto;

    display:block;

    margin:auto;

}

#tgd-preview-placeholder{

    padding:70px 20px;

    border:2px dashed #dcdcde;

    color:#777;

    border-radius:8px;

}

/*====================================================
BOTONES
====================================================*/

#tgd-remove-image{

    margin-left:10px;

}

#tgd-open-editor{

    margin-top:15px;

}

/*====================================================
MODAL
====================================================*/

#tgd-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.70);

    z-index:999999;

}

/*====================================================
VENTANA
====================================================*/

.tgd-modal-window{

    width:1200px;

    max-width:95vw;

    height:90vh;

    margin:3vh auto;

    background:#fff;

    border-radius:10px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

/*====================================================
HEADER
====================================================*/

.tgd-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 25px;

    border-bottom:1px solid #e5e5e5;

}

.tgd-modal-header h2{

    margin:0;

    font-size:18px;

}

.tgd-modal-header button{

    cursor:pointer;

}

/*====================================================
BODY
====================================================*/

.tgd-modal-body{

    flex:1;

    overflow:auto;

    background:#f6f7f7;

    padding:25px;

}

/*====================================================
FOOTER
====================================================*/

.tgd-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    padding:18px;

    border-top:1px solid #e5e5e5;

    background:#fff;

}

/*====================================================
STAGE
====================================================*/

#tgd-stage-wrapper{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

#tgd-stage{

    width:700px;

    height:700px;

    max-width:100%;

    margin:auto;

    background:#fff;

    border:1px solid #dcdcde;

    border-radius:8px;

    overflow:hidden;

}

/*====================================================
ESTADO VACÍO
====================================================*/

.tgd-empty-state{

    width:100%;

    padding:100px 40px;

    text-align:center;

    border:2px dashed #dcdcde;

    border-radius:10px;

    background:#fff;

    color:#777;

}

.tgd-empty-state h3{

    margin:0 0 10px;

}

/*====================================================
KONVA
====================================================*/

.konvajs-content{

    margin:auto;

}

.konvajs-content canvas{

    border-radius:8px;

}

/*====================================================
RESPONSIVE
====================================================*/

@media (max-width:1024px){

    .tgd-modal-window{

        width:98vw;

        height:95vh;

    }

    #tgd-stage{

        width:600px;

        height:600px;

    }

}

@media (max-width:768px){

    #tgd-stage{

        width:500px;

        height:500px;

    }

}
/*
====================================================
LOADER
====================================================
*/

#tgd-loader{

    position:absolute;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.70);

    font-size:18px;

    font-weight:bold;

    z-index:999;

}
/*
====================================================
CURSORES
====================================================
*/

#tgd-stage{

    cursor:default;

}

#tgd-stage canvas{

    cursor:move;

}
/*
====================================================
BOTONES
====================================================
*/

.tgd-modal-footer .button{

    min-width:140px;

}
/*
====================================================
FRONTEND - PESTAÑA PERSONALIZA TU DISEÑO
====================================================
*/


/* =====================================================
   FRONTEND — PESTAÑA PERSONALIZA TU DISEÑO
===================================================== */

/* Contenedor principal — columna */
.tgd-container {
    max-width: 100%;
    padding: 10px 0 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tgd-header h2 {
    font-size: 20px;
    margin: 0 0 6px;
}

.tgd-header p {
    color: #666;
    margin: 0;
    font-size: 14px;
}


/* =====================================================
   FRONTEND — layout principal
===================================================== */
.tgd-container {
    max-width: 100%;
    padding: 10px 0 30px;
}

.tgd-header { margin-bottom: 16px; }
.tgd-header h2 { font-size: 20px; margin: 0 0 4px; }
.tgd-header p  { color: #666; margin: 0; font-size: 14px; }

/* ── SELECTOR DE ENVASES ──────────────────────────── */
.tgd-selector-wrap  { margin-bottom: 18px; }
.tgd-selector-title { margin: 0 0 10px; font-size: 14px; color: #333; }

.tgd-selector-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* DIV — sin herencia de estilos de botón del tema */
.tgd-selector-item {
    /* reset total */
    all: initial;
    /* estilos propios */
    display:        inline-flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    width:          100px;
    padding:        10px 8px;
    background:     #ffffff;
    border:         2px solid #dddddd;
    border-radius:  10px;
    cursor:         pointer;
    box-sizing:     border-box;
    font-family:    inherit;
    transition:     border-color .15s, box-shadow .15s;
    user-select:    none;
}

.tgd-selector-item img {
    width:        72px;
    height:       80px;
    object-fit:   contain;
    display:      block;
    pointer-events: none;
}

.tgd-selector-item span {
    font-size:   12px;
    color:       #555;
    font-family: inherit;
    pointer-events: none;
}

.tgd-selector-item:hover {
    border-color: #4a90e2;
    box-shadow:   0 2px 8px rgba(74,144,226,.25);
}

.tgd-selector-item.active {
    border-color: #2271b1;
    background:   #eef4fb;
    box-shadow:   0 0 0 3px rgba(34,113,177,.18);
}

.tgd-selector-item.active span {
    color:       #2271b1;
    font-weight: 600;
}

/* ── DISEÑADOR: canvas + tools en fila ──────────── */
.tgd-designer {
    display:     flex;
    gap:         20px;
    align-items: flex-start;
    flex-wrap:   wrap;
}

.tgd-canvas { flex: 0 0 auto; }

.tgd-canvas #tgd-stage {
    width:        340px;
    height:       340px;
    background:   #ffffff;
    border:       1px solid #dddddd;
    border-radius:10px;
    box-shadow:   0 2px 10px rgba(0,0,0,.08);
    display:      block;
}

.tgd-canvas #tgd-stage canvas {
    border-radius: 10px;
    cursor:        move;
}

/* ── HERRAMIENTAS ─────────────────────────────── */
.tgd-tools {
    flex:           1;
    min-width:      180px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.tgd-tools .button {
    width:      100%;
    text-align: left;
    padding:    10px 14px;
    font-size:  13px;
}

/* Opciones de texto */
.tgd-text-options {
    padding:        14px;
    background:     #f8f8f8;
    border:         1px solid #e5e5e5;
    border-radius:  8px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     4px;
}

.tgd-text-options label {
    font-size:      11px;
    font-weight:    600;
    color:          #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tgd-text-options input[type="text"] {
    width:       100%;
    padding:     7px 10px;
    border:      1px solid #ddd;
    border-radius: 5px;
    font-size:   13px;
    box-sizing:  border-box;
}

.tgd-text-options input[type="color"] {
    width:         46px;
    height:        34px;
    border:        1px solid #ddd;
    border-radius: 5px;
    cursor:        pointer;
    padding:       2px;
}

.tgd-text-options input[type="range"] {
    width:        100%;
    accent-color: #2271b1;
}

/* ── MENSAJES ─────────────────────────────────── */
.tgd-message {
    display:     none;
    padding:     12px 16px;
    border-radius: 6px;
    font-size:   14px;
    font-weight: 500;
    margin-top:  10px;
}
.tgd-message--success { background:#edfaef; border:1px solid #68c77f; color:#1a6630; }
.tgd-message--error   { background:#fde8e8; border:1px solid #e07070; color:#8b1a1a; }
.tgd-message--warning { background:#fff8e5; border:1px solid #e0b840; color:#7a5a00; }
.tgd-message--info    { background:#e8f0fb; border:1px solid #6090d0; color:#1a3a70; }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 640px) {
    .tgd-canvas #tgd-stage { width: 300px; height: 300px; }
    .tgd-designer { flex-direction: column; }
    .tgd-tools { width: 100%; }
}