@font-face {
    font-family: 'Trajan';
    src: url('../fonts/Trajan-Regular.ttf') format('truetype');
    font-display: swap;
}

/* ---- CONTENEDOR GENERAL ---- */

#pn-contenedor-etiqueta {

    display: flex;

    flex-wrap: wrap;

    gap: 36px;

    justify-content: space-between;

    align-items: flex-start;

    margin-top: 2rem;

    font-family: 'Inter', 'Roboto', Arial, sans-serif;

    background: #fff;

    box-shadow: 0 4px 28px rgba(44,37,37,0.07);

    border-radius: 22px;

    padding: 34px 24px 34px 34px;

}



/* ---- FORMULARIO ---- */

.pn-formulario {

    flex: 1 1 340px;

    max-width: 430px;

    min-width: 300px;

    display: flex;

    flex-direction: column;

    gap: 25px;

}



/* ---- CAMPOS Y SECCIONES ---- */

.pn-campo {

    margin-bottom: 0.2rem;

    padding-bottom: 0.5rem;

}



.pn-seccion-titulo,

.pn-campo label {

    display: block;

    margin-bottom: 7px;

    font-weight: bold;

    font-size: 1.08em;

    color: #222;

}



.pn-seccion-titulo strong,

.pn-campo label strong {

    font-size: 1.14em;

    font-weight: 700;

    color: #1a1a1a;

    display: block;

    margin-bottom: 2px;

    letter-spacing: 0.3px;

}



.pn-seccion-titulo span,

.pn-campo label span {

    display: block;

    font-size: 1.01em;

    color: #888;

    font-weight: 400;

    line-height: 1.48;

    margin-top: 0;

}



/* --- INPUTS --- */

.pn-campo input[type="text"], 

.pn-campo input[type="number"], 

.pn-campo input[type="file"] {

    width: 100%;

    padding: 10px 12px;

    font-size: 1em;

    border: 1px solid #d9d9d9;

    border-radius: 7px;

    background: #fff;

    box-sizing: border-box;

    margin-top: 4px;

    transition: border-color .18s;

}

.pn-campo input[type="text"]:focus, 

.pn-campo input[type="number"]:focus {

    border-color: #bc5b5b;

    outline: none;

}

.pn-campo input[type="file"] {

    padding: 8px 2px;

    background: #faf9fa;

}

.pn-campo input[type="file"]::-webkit-file-upload-button {

    font-weight: 600;

    color: #fff;

    border: none;

    background: #111;

    border-radius: 5px;

    padding: 8px 16px;

    cursor: pointer;

    transition: background .18s;

}

.pn-campo input[type="file"]::-webkit-file-upload-button:hover {

    background: #333;

}



#pn-char-count {

    display: block;

    margin-top: 0.15rem;

    font-size: 12px;

    color: #666;

    text-align: right;

    font-family: inherit;

}



/* ---- CONTROLES DE IMAGEN ---- */

#pn-controles-imagen {

    padding: 32px 0;

    border: 1px solid #eee;

    border-radius: 22px;

    background: #fafafa;

    box-shadow: 0 2px 12px rgba(44,37,37,0.05);

    margin-top: 0;

}

#pn-controles-imagen > div {

    margin-top: 6px;

}

#pn-controles-imagen .pn-control {

    border: 1px solid #ccc;

    background: #fff;

    color: #bc5b5b;

    border-radius: 9px;

    padding: 0;

    width: 50px;

    height: 50px;

    font-size: 22px;

    margin: 3px;

    font-weight: 600;

    cursor: pointer;

    transition: border .18s, box-shadow .15s, background .16s;

    box-shadow: 0 1px 6px rgba(188,91,91,0.02);

}

#pn-controles-imagen .pn-control:hover {

    border-color: #bc5b5b;

    background: #f5eaea;

}

#pn-controles-imagen .pn-control:active {

    background: #eee;

}



/* ---- ZOOM Y MOVER ---- */

#pn-controles-imagen .pn-controles-grupo {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.6rem;

    min-width: 110px;

}



#pn-controles-imagen .pn-controles-label {

    font-weight: 600;

    font-size: 15px;

    color: #2c2322;

    margin-bottom: 0.15rem;

    letter-spacing: 0.5px;

}



.pn-escala, .pn-movimiento-flechas {

    display: flex;

    gap: 14px;

    margin-top: 5px;

}



.pn-movimiento-flechas {

    flex-direction: column;

    align-items: center;

    gap: 7px;

}

.pn-movimiento-flechas > div {

    display: flex;

    gap: 7px;

}



/* ---- BOTONES PRINCIPALES ---- */

#pn-add-to-cart, #pn-vista-previa {

    display: inline-block;

    margin-top: 0.5rem;

    padding: 13px 40px;

    background: #bc5b5b;

    color: #fff;

    border: none;

    border-radius: 7px;

    cursor: pointer;

    font-size: 19px;

    font-weight: bold;

    box-shadow: 0 2px 10px rgba(188,91,91,0.05);

    letter-spacing: 1px;

    transition: background .18s;

}

#pn-add-to-cart:hover, #pn-vista-previa:hover {

    background: #a84242;

}

#pn-add-to-cart:active {

    background: #923a3a;

}



/* ---- SOLO PERSONALIZADOR: SELECTOR DE CANTIDAD ---- */

#pn-contenedor-etiqueta .quantity {

    display: inline-flex;

    align-items: center;

    border-radius: 4px;

    border: 1px solid #ddd;

    overflow: hidden;

    box-shadow: 0 1px 6px rgba(44,37,37,0.03);

    background: #fff;

    height: 50px;

}



#pn-contenedor-etiqueta .quantity button.minus,

#pn-contenedor-etiqueta .quantity button.plus {

    background: #fff;

    border: none;

    width: 40px;

    height: 50px;

    font-size: 22px;

    color: #bc5b5b;

    cursor: pointer;

    font-weight: 700;

    transition: background .14s;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    line-height: 1;

}



#pn-contenedor-etiqueta .quantity button.minus:hover,

#pn-contenedor-etiqueta .quantity button.plus:hover {

    background: #f5eaea;

}



#pn-contenedor-etiqueta .quantity input[type="number"] {

    width: 48px;

    text-align: center;

    border: none;

    font-size: 20px;

    height: 50px;

    outline: none;

    background: #fff;

    box-shadow: none;

    padding: 0;

    margin: 0;

    appearance: textfield;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Elimina los spinners nativos SOLO aquí */

#pn-contenedor-etiqueta .quantity input[type="number"]::-webkit-inner-spin-button,

#pn-contenedor-etiqueta .quantity input[type="number"]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

#pn-contenedor-etiqueta .quantity input[type="number"] {

    -moz-appearance: textfield;

}



/* ---- COLUMNA DERECHA (CANVAS Y BLOQUE COMPRA) ---- */

.pn-canvas-col {

    flex: 1 1 410px;

    max-width: 420px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    min-width: 320px;

}



.pn-canvas-wrapper {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: flex-start;

}



#pn-canvas {

    width: 375px;

    height: 506.25px;

    display: block;

    border: 1px solid #ccc;

    border-radius: 13px;

    box-shadow: 0 2px 16px rgba(44,37,37,0.12);

    background: #fff;

    margin: 0 auto;

    max-width: 100%;

}



/* ------ CANTIDAD + BOTÓN COMPRAR: EN FILA ------ */

.pn-comprar-block {

    width: 100%;

    max-width: 375px;

    display: flex;

    align-items: flex-end;

    gap: 32px;

    margin-top: 30px;

    justify-content: center;

    flex-wrap: nowrap;

}

.pn-cantidad-col {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 120px;

    margin-bottom: 0;

}

.single_add_to_cart_button {

    margin: 0 !important;

}



/* Responsive ajuste para móvil: */

@media (max-width: 900px) {

    #pn-contenedor-etiqueta {

        flex-direction: column;

        padding: 12px;

        gap: 20px;

    }

    .pn-formulario, .pn-canvas-col {

        width: 100%;

        max-width: 100%;

        min-width: 0;

    }

    .pn-canvas-wrapper {

        width: 100%;

    }

    .pn-comprar-block {

        max-width: 100vw;

        justify-content: flex-start;

    }

}



@media (max-width: 580px) {

    #pn-contenedor-etiqueta {

        border-radius: 12px;

        padding: 7px 2vw 24px 2vw;

        box-shadow: none;

    }

    .pn-formulario {

        gap: 13px;

        padding: 0;

    }

    #pn-canvas {

        width: 94vw !important;

        height: auto;

        min-width: 200px;

    }

    .pn-comprar-block {

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

    }

}



/* Spinner dentro del botón */

.pn-spinner {

    display: inline-block;

    vertical-align: middle;

    width: 22px;

    height: 22px;

    margin-right: 10px;

    border: 3px solid #fff;

    border-top: 3px solid #a84242;

    border-radius: 50%;

    animation: pn-spin 0.7s linear infinite;

}

@keyframes pn-spin {

    0% { transform: rotate(0deg);}

    100% { transform: rotate(360deg);}

}



.pn-bajo-comprar {

    text-align: left !important;

    margin-top: 20px;

    color: #666;

    font-size: 1em;

    width: 100%;

    padding-left: 0;

    line-height: 1.6;

}



/* ---- BOTÓN "PONER EN BLANCO Y NEGRO" AJUSTADO ---- */

#pn-toggle-filtro {

    display: inline-block;

    margin-top: 0.5rem;

    padding: 8px 22px;

    background: #111;

    color: #fff;

    border: none;

    border-radius: 7px;

    cursor: pointer;

    font-size: 1.08em;

    font-weight: bold;

    box-shadow: 0 2px 10px rgba(44,37,37,0.07);

    letter-spacing: 1px;

    transition: background .18s;

    width: auto;

}

#pn-toggle-filtro:hover {

    background: #222;

}



/* Mundial/plantilla: estilos que antes dependían de JS inline */
body.pn-mundial-body .pn-formulario {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}
#pn-contenedor-etiqueta.pn-mundial-mode {
    justify-content: center !important;
}
#pn-contenedor-etiqueta.pn-mundial-mode .pn-canvas-col {
    max-width: 520px !important;
    margin: 0 auto !important;
}