/* =========================
   BASE
========================= */

.ig-dark-theme{
    background:#151515;
    color:#fff;
    padding:10px;
    border-radius:14px;
    font-family:sans-serif;
    max-width:520px;
    margin:auto;
    box-sizing:border-box;
}

.ig-card{
    background:#202020;
    padding:12px;
    margin-bottom:10px;
    border-radius:12px;
}

/* Título Principal: más grande y con más espacio */
.ig-subtitle {
    font-size: 2rem !important; /* Tamaño mayor */
    color: #ffffff !important;   /* Blanco puro para destacar */
    text-align: center !important;
    font-weight: 800 !important; /* Más negrita */
    margin: 20px 0 10px 0;
    text-transform: uppercase;   /* Estilo profesional */
    letter-spacing: 1px;
}

/* Subtítulo: más pequeño y gris para separar jerarquía */
.ig-title {
    font-size: 1.1rem !important;
    color: #cccccc !important;   /* Gris claro para menos peso visual */
    text-align: center !important;
    font-weight: 600 !important;
    margin: 0 0 25px 0;
    line-height: 1.4;
}

/* =========================
   UPLOAD
========================= */

.upload-box{
    border:2px dashed #ff6600;
    padding:18px;
    text-align:center;
    cursor:pointer;
    border-radius:10px;
    transition:.25s;
    background:#252525;
    font-size:.95rem;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.upload-box:hover{
    background:#ff660015;
}

#file-name{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* =========================
   PRODUCTOS
========================= */

.ig-grid-products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.prod-item{
    background:#303030;
    padding:10px 4px;
    text-align:center;
    border-radius:8px;
    cursor:pointer;
    font-size:.72rem;
    transition:.2s;
    min-height:64px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.prod-item span{
    display:block;
    font-size:1.2rem;
    margin-bottom:4px;
}

.prod-item.active{
    background:#ff6600;
    font-weight:bold;
}

/* =========================
   INFO BOX
========================= */

.ig-info-box{
    background:#303030;
    padding:10px;
    border-radius:10px;
    margin-bottom:12px;
    border-left:4px solid #ff6600;
    font-size:.84rem;
    line-height:1.45;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */

.ig-main-layout{
    display:grid;
    grid-template-columns:1fr 155px;
    gap:12px;
    align-items:start;
    margin-top:10px;
}

.ig-left-column{
    min-width:0;
}

.ig-right-column{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* =========================
   INPUTS
========================= */

.field{
    margin-bottom:10px;
}

.field label{
    font-size:.82rem;
    color:#f1f1f1;
    display:block;
    margin-bottom:5px;
}

.ig-input{
    width:100%;
    background:#2d2d2d;
    color:#fff;
    border:1px solid #444;
    padding:10px;
    border-radius:7px;
    box-sizing:border-box;
    font-size:16px;
}

.ig-input:focus{
    outline:none;
    border-color:#ff6600;
}

/* =========================
   DIMENSIONES
========================= */

.ig-dimensions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.ig-dimensions input{
    width:100%;
    background:#101010;
    border:1px solid #444;
    color:#fff;
    padding:10px;
    border-radius:7px;
    box-sizing:border-box;
}

/* =========================
   MOCKUP
========================= */

#ig-mockup-preview{
    width:155px;
    height:155px;
    background:#000;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    border:1px solid #333;
}

#base-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================
   USER DESIGN
========================= */

#user-design{
    position:absolute;
    z-index:3;
    pointer-events:none;
    mix-blend-mode:multiply;
}

/* =========================
   POSICIONES
========================= */

.pos-carta-back {
    top: 45%; 
    left: 50%;
    width: 37%;
    height: 45%; /* Límite de altura para que no se salga de la espalda */
    transform: translate(-50%, -50%);
    object-fit: contain; /* Ajuste perfecto sin deformar */
}

.pos-escudo-front {
    top: 35%; 
    left: 63%; 
    width: 12%;
    height: 15%; /* Límite de altura para que no invada el abdomen */
    transform: translate(-50%, -50%);
    object-fit: contain; /* Ajuste perfecto para logos verticales */
}

.pos-gorra {
    top: 38%; 
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* EL TRUCO: Definimos un área máxima de ocupación */
    width: 38%;          /* Ancho máximo para horizontales */
    height: 30%;         /* Altura máxima para verticales */
    
    /* Aseguramos que la imagen no se deforme y quepa en ese "cuadro" */
    object-fit: contain; 
}

.pos-dtf {
    /* Centrado en la parte de la hoja que cuelga */
    top: 55%; 
    left: 50%;
    transform: translate(-50%, -50%);

    /* Área máxima de ocupación sobre el material blanco */
    width: 85%;  /* Ocupa casi todo el ancho del rollo */
    height: 70%; /* Ocupa la mayor parte del largo que cuelga */

    /* La clave para que se vea "al ancho o alto completo" sin estirarse */
    object-fit: contain;
}
.pos-dtf {
    top: 55%; left: 50%; width: 85%; height: 70%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}
.pos-lona {
    position: absolute;
    /* Centrado absoluto dentro del área de la lona */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Área máxima de impresión dentro del mockup de lona */
    width: 85%; 
    height: 85%;
    
    /* Ajuste proporcional automático */
    object-fit: contain; 
    display: block;
}
.pos-vinil {
    top: 55%; left: 50%; width: 85%; height: 70%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}
.pos-microperforado {
    top: 55%; left: 50%; width: 85%; height: 70%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

/* =========================
   STICKERS
========================= */

#mosaic-container {
    position: absolute;
    /* Ajustamos el área para que quede dentro de las guías negras */
    top: 12%; 
    left: 12%;
    width: 76%; 
    height: 76%;
    
    /* Configuración del mosaico */
    background-repeat: repeat;
    background-size: 20%; /* Ajusta este valor para cambiar el tamaño del sticker individual */
    
    /* Evita que los stickers se salgan del recuadro blanco */
    overflow: hidden;
    display: block;
    
    /* Suavizado de bordes para que no tape las guías por completo */
    border-radius: 2px; 
}

/* Ocultar el diseño individual cuando estamos en modo sticker 
   para que no se encime al mosaico */
.prod-sticker #user-design {
    display: none !important;
}

/* =========================
   VIEW SWITCH
========================= */

#view-selector{
    display:flex;
    gap:4px;
    margin-bottom:6px;
    width:100%;
}

.view-btn{
    flex:1;
    background:#333;
    border:none;
    color:#fff;
    font-size:.62rem;
    padding:6px;
    cursor:pointer;
    border-radius:4px;
}

.view-btn.active{
    background:#ff6600;
    font-weight:bold;
}

/* =========================
   PRECIO
========================= */

.price-box-mobile{
    margin-top:10px;
    background:#262626;
    border-radius:10px;
    padding:10px;
}

.price-label{
    display:block;
    font-size:.8rem;
    color:#aaa;
    margin-bottom:4px;
}

#ig-total{
    display:block;
    font-size:1.75rem;
    font-weight:800;
    color:#ff6600;
    line-height:1;
}

/* =========================
   BOTON
========================= */

.ig-btn-main{
    width:100%;
    background:#ff6600;
    border:none;
    padding:14px;
    color:#fff;
    font-weight:800;
    border-radius:10px;
    margin-top:14px;
    cursor:pointer;
    font-size:.95rem;
    transition:.2s;
}

.ig-btn-main:hover{
    background:#e65c00;
}

#ig-whatsapp{
    position:sticky;
    bottom:10px;
    z-index:20;
}

/* =========================
   MOBILE
========================= */

@media(max-width:480px){

    .ig-dark-theme{
        padding:8px;
        border-radius:10px;
    }

    .ig-card{
        padding:10px;
    }

    .ig-title{
        font-size:1.9rem;
    }

    .ig-subtitle{
        font-size:1.15rem;
    }

    .ig-main-layout{
        grid-template-columns:1fr 145px;
        gap:10px;
    }

    #ig-mockup-preview{
        width:145px;
        height:145px;
    }

    .prod-item{
        min-height:58px;
        font-size:.63rem;
    }

    .prod-item span{
        font-size:1rem;
    }

    #ig-total{
        font-size:1.6rem;
    }

    .ig-btn-main{
        padding:13px;
        font-size:.9rem;
    }

    .upload-box{
        font-size:.82rem;
    }
}

/* =========================
   CAMBIAR DISEÑO UX
========================= */

.upload-box{
    position:relative;
}

#file-name{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:.92rem;
    font-weight:500;
}

.file-change-icon{
    font-size:1rem;
    flex-shrink:0;
}

.upload-box:hover{
    border-color:#ff8533;
    background:#ff660010;
}

.upload-box:active{
    transform:scale(.99);
}

@media(max-width:480px){

    #file-name{
        font-size:.8rem;
    }

}

/* =========================
   COTIZACIÓN ACUMULADA
========================= */

.ig-cart-box{
    margin-top:14px;
    background:#262626;
    border-radius:10px;
    padding:12px;
    border:1px solid #333;
}

.ig-cart-title{
    font-size:.95rem;
    font-weight:800;
    margin-bottom:10px;
    color:#ff6600;
}

.ig-cart-empty{
    font-size:.82rem;
    color:#aaa;
}

.ig-cart-item{
    background:#1f1f1f;
    border-radius:8px;
    padding:10px;
    margin-bottom:8px;
}

.ig-cart-item-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
}

.ig-cart-item-body{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.ig-cart-item-body span{
    color:#00cc88;
    font-weight:700;
    margin-top:4px;
}

.ig-remove-item{
    background:#ff4444;
    border:none;
    color:#fff;
    width:24px;
    height:24px;
    border-radius:50%;
    cursor:pointer;
    font-size:.75rem;
    font-weight:bold;
}

.ig-cart-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #444;
}

#ig-grand-total{
    color:#00cc88;
    font-size:1.1rem;
}

.ig-btn-secondary{
    width:100%;
    background:#333;
    border:none;
    padding:14px;
    color:#fff;
    font-weight:800;
    border-radius:10px;
    margin-top:14px;
    cursor:pointer;
    font-size:.95rem;
    transition:.2s;
}

.ig-btn-secondary:hover{
    background:#444;
}