body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

.dtf-theme-light #dtfstore#dtfstore,
.dtf-theme-dark #dtfstore#dtfstore,
#dtfstore#dtfstore[data-dtf-theme="light"],
#dtfstore#dtfstore[data-dtf-theme="dark"],
#dtfstore#dtfstore {
    font-family: var(--dtf-mipedidodtf-mensaje-tipografia, 'dtfstore');
}

#dtf-visor {
    position: relative;
    z-index: 8;
}

#imagen_de_pedido {
    display: none !important;
}

.rojo {
    color: red;
}

.oculto {
    display: none;
}

.no-compatible {
    background-color: #1c0000e0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    text-align: center;
    padding: 10px;
    color: white;
    font-size: 13px;
}


.select-dtfstore,
.select-anchos-dtfstore,
.select-perfiles-dtfstore {
    height: 25px;
    width: 100%;
    border-radius: 0px;
    margin-left: 5px;
    text-align: center;
    font-weight: bold;
    font-family: monospace;
    font-size: small;
    padding: 0px;
    border: 0;
    outline: 0;
    background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em,
        linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
    color: #1000ff;
    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.select-dtfstore option {
    background-color: #cbcaca;
}

.select-anchos-dtfstore option {
    background-color: #cbcaca;
}

.select-perfiles-dtfstore option {
    background-color: #cbcaca;
}

#tipodeconsumo {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    padding: 8px 40px 3px 22px;
    border-bottom-right-radius: 46px;
    margin-top: -42px;
    margin-bottom: 32px;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0984768907563025) 32%, rgb(172 172 172) 53%);
    color: #4b4b4b;
    font-family: 'dtfstore';
    font-size: small;
}

/* cuadro infomacion */
#cuadroinfomacion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro */
    backdrop-filter: blur(5px);
    /* Aplicar desenfoque al fondo */
    display: none;
    /* Oculto por defecto */
    z-index: 1100;
    /* Para estar sobre el resto del contenido */
}

#contenidocuadroinfomacion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1200;
    padding-top: 40px;
}

#titulocuadroinfomacion {
    position: relative;
}

#titulocuadroinfomacion label {
    position: absolute;
    margin-top: -30px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
    width: 100%;
}

#mensajecuadroinfomacion {
    padding: 10px;
    margin-bottom: 34px;
}

#botoncuadroinfomacion {
    display: flex;
}

#botonaceptarcuadroinfomacion {
    border-radius: 0px;
    background-color: white;
    border: 1px solid #8d8d8d;
    color: #ff0000;
    width: 150px;
    text-align: center;
    cursor: pointer;
    margin-right: 5px;
}

#cerrarcuadroinfomacion {
    position: absolute;
    top: -20px;
    right: -15px;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    color: #727272;
}

/* fin cuadro infomacion */

/* cuadro eliminar */
#tituloeliminar {
    position: relative;
}

#tituloeliminar label {
    position: absolute;
    margin-top: -30px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
    width: 100%;
}

/* El fondo oscuro junto con el cuadro flotante */
#cuadroeliminar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro */
    backdrop-filter: blur(5px);
    /* Aplicar desenfoque al fondo */
    display: none;
    /* Oculto por defecto */
    z-index: 1100;
    /* Para estar sobre el resto del contenido */
}

/* El contenido del cuadro (formulario) centrado */
#contenidoCuadroeliminar {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1200;
    padding-top: 40px;
    color: #1d0000;
}

#cerrarCuadroeliminar {
    position: absolute;
    top: -20px;
    right: -15px;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    color: #727272;
}

#eliminar-status {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: x-large;
    font-family: monospace;
    max-width: 300px;
    flex-wrap: wrap;
    text-align: center;
    /* Asegura que el texto esté centrado */
    flex-direction: column;
    /* Para apilar elementos en una columna */
}

#botoneliminar {
    width: 300px;
    border-radius: 0px;
    background-color: #3bff416b;
    border: 1px solid black;
    font-family: monospace;
    color: black;
}

#botoneseliminar {
    display: flex;
}

#botoneliminar-si {
    border-radius: 0px;
    background-color: white;
    border: 1px solid #8d8d8d;
    color: #ff0000;
    width: 150px;
    text-align: center;
    cursor: pointer;
    margin-right: 5px;
}

#botoneliminar-no {
    border-radius: 0px;
    background-color: white;
    border: 1px solid #8d8d8d;
    color: #01440c;
    width: 150px;
    text-align: center;
    cursor: pointer;
}

#mensajeeliminar {
    padding: 10px;
    margin-bottom: 34px;
}

.imagen-eliminar {
    width: 100px;
    position: absolute;
    top: 0px;
    left: -100px;
    height: 100%;
    object-fit: contain;
    background-color: #00000080;
    padding: 9px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
}

/* Estilo visual del cuadro de eliminación. No altera su estructura ni comportamiento. */
#contenidoCuadroeliminar {
    width: min(calc(100vw - 40px), 440px);
    box-sizing: border-box;
    padding: 28px;
    border: 1px solid #e2e6ec;
    border-left: 4px solid #c93636;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
    color: #35404e;
}

#contenidoCuadroeliminar #tituloeliminar {
    display: block;
    padding-right: 32px;
}

#contenidoCuadroeliminar #tituloeliminar::before {
    display: none;
}

#contenidoCuadroeliminar #tituloeliminar label {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    color: #9f2525;
    font-size: 19px;
    font-weight: 700;
}

#contenidoCuadroeliminar #mensajeeliminar {
    margin: 14px 0 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #606d80;
    font-size: 14px;
    line-height: 1.55;
}

#contenidoCuadroeliminar #botoneseliminar {
    order: 5;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 26px;
}

#contenidoCuadroeliminar #botoneliminar-si,
#contenidoCuadroeliminar #botoneliminar-no {
    width: auto;
    min-width: 98px;
    margin: 0;
    padding: 9px 16px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}

#contenidoCuadroeliminar #botoneliminar-no {
    border: 1px solid #d4dae3;
    background: #fff;
    color: #4c5b70;
}

#contenidoCuadroeliminar #botoneliminar-si {
    border: 1px solid #b52e2e;
    background: #b52e2e;
    color: #fff;
}

#contenidoCuadroeliminar #botoneliminar-si:hover {
    background: #982424;
}

#contenidoCuadroeliminar #botoneliminar-no:hover {
    background: #f5f7f9;
}

#contenidoCuadroeliminar #cerrarCuadroeliminar {
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: #6b7481;
}

#contenidoCuadroeliminar #cerrarCuadroeliminar:hover {
    background: #f1f3f6;
    color: #35404e;
}

#contenidoCuadroeliminar #cerrarCuadroeliminar svg {
    width: 18px;
    height: 18px;
}

#contenidoCuadroeliminar #eliminar-status:empty {
    display: none;
}

#contenidoCuadroeliminar .media-eliminar {
    display: block;
    order: 4;
    width: auto;
    max-width: 100% !important;
    max-height: min(240px, 32vh);
    margin: 18px auto 0 !important;
    border: 1px solid #e1e6ed;
    border-radius: 8px;
    object-fit: contain;
}

@media (max-width: 480px) {
    #contenidoCuadroeliminar {
        padding: 22px 18px 18px;
    }

    #contenidoCuadroeliminar #botoneliminar-si,
    #contenidoCuadroeliminar #botoneliminar-no {
        flex: 1;
    }
}

/* cuadro-multiple */

/* Fondo del modal */
#cuadromultiple {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: none;
    z-index: 1010;
}

/* Contenedor centrado */

#contenidocuadromultiple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    padding: 25px 30px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: visible;
    z-index: 1050;
    font-family: system-ui, sans-serif;
}

#arrastrararchivos {
    border: 2px dashed #aaa;
    border-radius: 10px;
    text-align: center;
    padding: 10px 10px;
    color: #666;
    font-size: 14px;
    margin: 2px 0;
    transition: all 0.25s ease;
    cursor: pointer;
    background-color: #fafafa;
    margin-bottom: 10px;
}

#arrastrararchivos video {
    display: block;
    margin: 0 auto 8px auto;
    width: 100px;
    height: 100px;
    border-radius: 6px;
    opacity: 0.9;
    pointer-events: none;
}

#arrastrararchivos.dragover {
    border-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    transform: scale(1.02);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}



.contenido-scroll {
    max-height: 50vh;
    overflow-y: auto;
}

#uploaded-image-oculta {

    position: absolute;
    top: 180px;
    left: -100px;
    transform: translate(-50%, -50%);
    z-index: 1300;
    width: 110px;
    display: none;

}

/* Animación suave */
@keyframes aparecer {
    from {
        opacity: 0;
        transform: translate(-50%, -55%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Título */
#listamultiple h4 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #222;
    font-weight: 600;
}

/* Lista */
#listamultiple ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#listamultiple li {
    background: #f9f9f9;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    transition: background 0.2s;
}

#listamultiple li:hover {
    background: #f1f1f1;
}

#listamultiple strong {
    color: #111;
    font-weight: 600;
}

#listamultiple span {
    color: #666;
    font-size: 0.9em;
}


/* Botones de acción */


#boton-cerrar-multiple {
    position: absolute;
    top: -10px;
    right: -15px;
    border-radius: 60px;
    cursor: pointer;
    padding-left: 14px;
    padding-right: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: red;
    color: white;
    font-weight: bold;
}

#boton-cerrar-multiple:hover {
    background-color: rgb(110, 1, 1);
}

#boton-cerrar-multiple-continuar {
    background-color: #000480;
    display: block;
    width: 150px;
    text-align: center;
    margin-top: 10px;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

#boton-subir-multiple {
    background: #0073aa;
    color: var(--dtf-barracabeceradtf-descuento-texto, #ffffff);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.95em;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 20px;
}

#boton-subir-multiple:hover {
    background: #005e8a;
}

.piemultiple {
    display: flex;
    align-items: baseline;
    gap: 10px;
    align-content: stretch;
    justify-content: flex-end;
}

/* botón ocupa ancho fijo */
.piemultiple button {
    flex: 0 0 180px;
}

/* texto ocupa el resto */
.piemultiple span {
    flex: 1;
    color: #333;
    padding: 10px;
    font-size: small;
    color: red;
    font-weight: bold;
}

#listamultiple li.ok {
    border-color: #4CAF50;
    background: #e8f5e9;
}

#listamultiple li.error {
    border-color: #f44336;
    background: #fdecea;
}

#listamultiple li.advertencia {
    border-color: #ff9800;
    background: #fff3e0;
}

.estado-msg {
    font-size: 0.85em;
    margin-top: 4px;
    color: #333;
}


/* estructura */

.item-archivo {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    font-size: 13px;
    font-family: system-ui, sans-serif;
}

.archivo-contenedor {
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    gap: 10px;
    align-items: start;
}

/* Columna del icono */
.columna-icono {
    position: relative;
}

.columna-icono img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    opacity: 0.9;
}

.btn-borrar {
    position: absolute;
    left: 4px;
    top: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background-color: #ff0000;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    color: white;
}

.btn-borrar:hover {
    color: #000000;
}

/* Columna de información */
.columna-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Filas */
.columna-info .fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Nombre + tamaño */
.fila.nombre-peso strong {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #222;
}

/* Input copias */
.columna-copias {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: space-around;
}

.copias {
    display: flex;
    position: relative;
    flex-direction: column;
}

.copia {
    width: 80px;
}

.copias input.input-cantidad-multiple {
    width: 71px;
    height: 33px;
    text-align: center;
    font-size: 25px;
    border: 0px solid #ccc;
    border-radius: 4px;
    padding: 0;
    font-family: 'dtf2';
    align-items: center;
    /* border-bottom: 1px solid #d3d3d3; */
}

.copias input.input-cantidad-multiple:focus {
    border-color: #0073aa;
    outline: none;
}

/* Estado */
.fila.estado .estado-msg {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

/* Barra de progreso */
.fila.barra {
    display: flex;
    align-items: center;
}

.barra-externa {
    width: 200px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.barra-interna {
    height: 100%;
    width: 0%;
    background: #2196f3;
    transition: width 0.25s ease;
}

/* Estados visuales */
.item-archivo.ok .barra-interna {
    background: #4caf50;
}

.item-archivo.error .barra-interna {
    background: #f44336;
}

.item-archivo.advertencia .barra-interna {
    background: #ff9800;
}

#pesoproyectomultiple {
    position: absolute;
    margin-top: -51px;
    background-color: rgb(255, 255, 255);
    padding: 2px 20px 7px 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-height: 35px;
}

#titulosubidamultiple {
    color: #4d4d4d;
    font-family: 'puntos';
    font-size: 16pt;
}

#pesomultiple {
    color: #ffc762;
    font-weight: bold;
}

#valorespeso {
    display: none;
}

.peso-contenedor {
    position: relative;
    width: 170px;
    font-family: sans-serif;
    font-size: 11px;
    margin-top: 15px;
}

.peso-barra {
    width: 100%;
    height: 18px;
    background: #ddd;
    border-radius: 3px;
    overflow: hidden;
    position: absolute;
    top: -11px;
    left: 13px;
}

.disco {
    position: absolute;
    margin-left: -15px;
    margin-top: -15px;
}

.disco img {
    width: 25px;
}

.peso-progreso {
    height: 100%;
    width: 0;
    background: #4caf50;
    transition: width 0.5s ease;
}

.peso-texto {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    color: #333;
}


/* fin cuadro-multiple*/
.inferiormenu {
    padding-top: 5px;
    padding-right: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: flex-end;
    padding-bottom: 10px;
}

#iconosinferiores {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    margin-left: 7px;
}

#iconosinferiores img {
    width: 30px;
    height: 30px;
}

.iconoinferior {
    display: flex;
    align-content: space-between;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 10px 10px 10px 10px;
    margin-right: 10px;
    border-radius: 60px;
    color: white;
    cursor: pointer;
}

.dropdowndtf-item-eliminar {
    text-decoration: none;
    display: flex;
    justify-content: center;
    width: 235px;
    padding: 10px 15px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: 0.5s;
    cursor: pointer;
    text-align: center;
    background-color: #810101;
    border-bottom-left-radius: 14px;
    border-top-right-radius: 14px;
    align-items: center;
}

.dropdowndtf-item-eliminar:hover {
    background-color: #ff9900ad;
    border-radius: 50px;
    color: #000000 !important;
}

.dropdowndtf-item-eliminar.active {
    background-color: #1e2a5e;
    color: #ffffff;
    /* Blanco */
}

.dropdowndtf-item-servicios {
    text-decoration: none;
    display: flex;
    justify-content: center;
    width: 235px;
    padding: 10px 15px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: 0.5s;
    cursor: pointer;
    text-align: center;
    background-color: #e1e1e1;
    border-bottom-right-radius: 14px;
    border-top-left-radius: 14px;
    align-items: center;
    margin-left: 10px;
}

.dropdowndtf-item-servicios:hover {
    background-color: #ff9900ad;
    border-radius: 50px;
    color: #000000 !important;
}

.dropdowndtf-item-servicios.active {
    background-color: #1e2a5e;
    color: #ffffff;
    /* Blanco */
}

/* cuadro de subidas */
#titulosubida {
    position: relative;
}

#titulosubida label {
    position: absolute;
    margin-top: -30px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
    width: 100%;
}

/* El fondo oscuro junto con el cuadro flotante */
#cuadrosubidas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro */
    backdrop-filter: blur(5px);
    /* Aplicar desenfoque al fondo */
    display: none;
    /* Oculto por defecto */
    z-index: 1100;
    /* Para estar sobre el resto del contenido */
}

/* El contenido del cuadro (formulario) centrado */
#contenidoCuadrosubidas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1200;
    padding-top: 40px;
    border-radius: 29px;
    border: 3px #c7c7c7 dotted;
}

#upload-form {
    margin-bottom: 10px;
}

#cerrarCuadrosubidas {
    position: absolute;
    top: -20px;
    right: -15px;
    width: 40px;
    height: 40px;
    background-color: #bdbdbd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    border: 1px solid;
    color: #727272;
}


#image-container {
    position: relative;
    width: 300px;
    /* El mismo ancho que la imagen */
    height: auto;
    background-color: #f0f0f0;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
        linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    /* Ajusta el desplazamiento para cuadrar los patrones */
}

#uploaded-image {
    display: block;
    max-width: 100%;
    height: auto;
    border: 2px solid #a5a5a5;
    /*
    min-height: 200px;
    object-fit: scale-down;*/
}

#upload-button {
    width: 100%;
}

#file {
    display: none;
}

#controles_subida {
    background-color: #000000;
    color: white;
    display: none;
    width: 300px;
    border: 1px solid black;
}

#controles_subida button {
    background-color: #59595980;
    color: white;
    border-radius: 0px;
    height: 43px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-size: xxx-large;
    font-family: monospace;
    border: 0px;
}

#contador_subida {
    display: none;
    position: absolute;
    width: 105px;
    color: #ff0000;
    font-family: monospace;
    font-weight: bold;
    font-size: x-large;
    text-align: center;
    height: 49px;
    border-radius: 1px;
    background-color: #e5e5e5ad;
    border-bottom-right-radius: 20px;
    backdrop-filter: blur(2px);
    margin-top: 0px;
    padding-top: 21px;
    border: 2px solid #a5a5a5;
}

#contador_subida::-webkit-inner-spin-button,
#contador_subida::-webkit-outer-spin-button {
    opacity: var(--dtf-barracabeceradtf-descuento-opacidad, 1);
    /* Asegura que las flechas estén siempre visibles */
}

#contador_subida:focus {
    outline: none;
}

.numcopiassubida {
    display: none;
    position: absolute;
    z-index: 10;
    font-size: small;
    margin-top: -7px;
    background-color: #a5a5a56e;
    padding-left: 5px;
    padding-right: 10px;
    border-bottom-right-radius: 20px;
    backdrop-filter: blur(2px);
    border-left: 2px solid #a5a5a5;
    border-top: 2px solid #a5a5a5;
    border-right: 2px solid #a5a5a5;
}

#upload-status {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: x-large;
    font-family: monospace;
    max-width: 300px;
    flex-wrap: wrap;
    text-align: center;
    /* Asegura que el texto esté centrado */
    flex-direction: column;
    /* Para apilar elementos en una columna */
}

#insertararchivo {
    display: none;
    background-color: #ffffff6b;
    border: 1px solid #a5a5a5;
    font-family: monospace;
    color: black;
    cursor: pointer;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    margin-top: -60px;
    margin-left: 10px;
    backdrop-filter: blur(2px);
    align-items: center;
}

/* cuadro de editars */
#tituloeditar {
    position: relative;
}

#tituloeditar label {
    position: absolute;
    margin-top: -30px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
    width: 100%;
}

/* El fondo oscuro junto con el cuadro flotante */
#cuadroeditar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro */
    backdrop-filter: blur(5px);
    /* Aplicar desenfoque al fondo */
    display: none;
    /* Oculto por defecto */
    z-index: 1100;
    /* Para estar sobre el resto del contenido */
}

/* El contenido del cuadro (formulario) centrado */
#contenidoCuadroeditar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1200;
    padding-top: 40px;
    max-width: min(92vw, 900px);
}

#controles-imagen-avanzados {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.controles-tamano-lienzo {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 11px;
    border: 1px solid #cbd2dc;
    border-radius: 7px;
    background: #f7f9fc;
}

.controles-tamano-lienzo legend {
    padding: 0 5px;
    color: #35404e;
    font-size: 12px;
    font-weight: 600;
}

.campos-tamano-lienzo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.selectores-medidas-editor {
    display: grid;
    gap: 7px;
    margin-bottom: 9px;
}

.selectores-medidas-editor label {
    display: grid;
    gap: 4px;
    color: #4b5668;
    font-size: 10px;
    font-weight: 600;
}

.selectores-medidas-editor select {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid #c7d0dd;
    border-radius: 6px;
    background: #fff;
    color: #344054;
    font-size: 11px;
}

#contenedor_medida_lienzo_editor[hidden] {
    display: none;
}

.opciones-modelo-lienzo-editor {
    display: grid;
    gap: 8px;
}

.selector-tallas-editor {
    display: grid;
    gap: 5px;
}

.selector-tallas-editor>strong {
    color: #4b5668;
    font-size: 10px;
}

.botones-tallas-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.boton-talla-editor {
    min-width: 34px;
    min-height: 28px;
    padding: 3px 8px;
    border: 1px solid #c7d0dd;
    border-radius: 6px;
    background: #fff;
    color: #445065;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.boton-talla-editor[aria-pressed="true"] {
    border-color: #245be6;
    background: #eaf0ff;
    color: #1746bd;
    box-shadow: inset 0 0 0 1px #245be6;
}

.campos-tamano-lienzo label {
    display: grid;
    gap: 4px;
    font-size: 11px;
}

.campos-tamano-lienzo input {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 1px solid #bcc5d1;
    border-radius: 5px;
}

.bloquear-proporcion-lienzo {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
}

.control-imagen-avanzado {
    display: grid;
    gap: 8px;
}

.control-imagen-etiqueta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.control-imagen-avanzado input[type="range"] {
    width: 100%;
}

.control-imagen-avanzado output {
    text-align: right;
    font-weight: bold;
}

#restablecer_edicion_imagen {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd2dc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

#restaurar_imagen_original {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #9aa7b8;
    border-radius: 6px;
    background: #eef2f7;
    color: #35404e;
    font-weight: 600;
    cursor: pointer;
}

#restaurar_imagen_original[hidden] {
    display: none !important;
}

.ayuda-contextual-editor {
    position: absolute;
    top: calc(50% + min(45vh, 400px) - 24px);
    left: 50%;
    z-index: 42;
    width: min(92vw, 700px);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid #d7dee8;
    border-radius: 7px;
    background: rgba(247, 249, 252, .98);
    color: #526176;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -6px);
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s, border-color .16s ease, background-color .16s ease, color .16s ease;
}

.ayuda-contextual-editor--activa {
    border-color: #9db8eb;
    background: #eef4ff;
    color: #294a7a;
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
    transition-delay: 0s;
}

.ayuda-contextual-editor-titulo {
    display: block;
    margin-bottom: 3px;
    color: #35404e;
    font-size: 12px;
}

.ayuda-contextual-editor--activa .ayuda-contextual-editor-titulo {
    color: #1746bd;
}

.ayuda-contextual-editor-texto {
    margin: 0;
}

.ayuda-contextual-editor-icono {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}

#activar-edicion-imagen {
    display: flex;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #245be6;
    border-radius: 7px;
    background: #eef3ff;
    color: #1746bd;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
}

#activar-edicion-imagen img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) opacity(0.78);
    pointer-events: none;
}

#activar-edicion-imagen[hidden],
#controles-imagen-avanzados[hidden] {
    display: none !important;
}

#cuadroeditoravanzado {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1300;
    background: rgba(8, 12, 20, 0.78);
    backdrop-filter: blur(7px);
}

#contenidoEditorAvanzado {
    position: absolute;
    top: calc(50% - 36px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(96vw, 1380px);
    height: min(90vh, 800px);
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    background: #f6f8fb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

#notificaciones-editor-avanzado {
    position: absolute;
    top: 22px;
    left: 50%;
    z-index: 40;
    display: none;
    width: min(90vw, 500px);
    transform: translateX(-50%);
    pointer-events: none;
}

.notificacion-editor-avanzado {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(32, 42, 58, 0.2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

#guia-previsualizacion-editor {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}

#guia-previsualizacion-editor[hidden] {
    display: none;
}

.foco-guia-previsualizacion-editor {
    position: fixed;
    top: var(--guia-preview-y, 0);
    left: var(--guia-preview-x, 0);
    width: var(--guia-preview-ancho, 34px);
    height: var(--guia-preview-alto, 34px);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(10, 16, 27, 0.7), 0 0 0 3px #fff, 0 0 0 5px #245be6;
}

.mensaje-guia-previsualizacion-editor {
    position: fixed;
    top: calc(var(--guia-preview-y, 0) + var(--guia-preview-alto, 34px) + 14px);
    left: 50%;
    width: min(330px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 12px 14px;
    transform: translateX(-50%);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: #29364a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.notificacion-editor-avanzado>span {
    flex: 1;
}

.notificacion-editor-avanzado--exito {
    border: 1px solid #b9d9c2;
    background: rgba(247, 255, 249, 0.96);
    color: #23623d;
}

.notificacion-editor-avanzado--aviso {
    border: 1px solid #e2c98c;
    background: rgba(255, 250, 235, 0.98);
    color: #76550c;
}

.cerrar-notificacion-editor {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: currentColor;
    font-size: 20px;
    line-height: 18px;
    cursor: pointer;
}

#carga-editor-avanzado {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 27, 38, 0.58);
    backdrop-filter: blur(2px);
}

#carga-editor-avanzado[hidden] {
    display: none !important;
}

.confirmar-restaurar-editor {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(10, 16, 27, .48);
    backdrop-filter: blur(2px);
}

.confirmar-restaurar-editor[hidden] {
    display: none !important;
}

.confirmar-restaurar-editor-contenido {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    width: min(100%, 460px);
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 52px rgba(0, 0, 0, .28);
    color: #35404e;
}

.confirmar-restaurar-editor-contenido>img {
    width: 27px;
    height: 27px;
    filter: invert(31%) sepia(89%) saturate(1233%) hue-rotate(334deg) brightness(91%) contrast(94%);
}

.confirmar-restaurar-editor-contenido strong {
    display: block;
    margin-bottom: 6px;
    color: #a52222;
}

.confirmar-restaurar-editor-contenido p {
    margin: 0;
    color: #5d6878;
    font-size: 13px;
    line-height: 1.45;
}

.confirmar-restaurar-editor-acciones {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.confirmar-restaurar-editor-acciones button {
    min-height: 36px;
    padding: 7px 13px;
    border-radius: 6px;
    cursor: pointer;
}

#cancelar-restaurar-editor {
    border: 1px solid #cbd2dc;
    background: #fff;
    color: #4c5b70;
}

#confirmar-restaurar-editor-boton {
    border: 1px solid #c93636;
    background: #c93636;
    color: #fff;
}

.carga-editor-avanzado-contenido {
    display: flex;
    width: min(82%, 330px);
    box-sizing: border-box;
    padding: 24px 26px;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    background: #fff;
    color: #253043;
    text-align: center;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.3);
}

.carga-editor-avanzado-contenido strong {
    font-size: 15px;
}

.carga-editor-avanzado-contenido>span:last-child {
    color: #697487;
    font-size: 12px;
}

.spinner-editor-avanzado {
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    margin-bottom: 3px;
    border: 3px solid #d9e2f5;
    border-top-color: #245be6;
    border-radius: 50%;
    animation: girar-spinner-editor 0.75s linear infinite;
}

@keyframes girar-spinner-editor {
    to {
        transform: rotate(360deg);
    }
}

.editor-avanzado-columnas {
    display: grid;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    width: 100%;
    height: 100%;
}

.editor-avanzado-columnas.modo-filtros {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(230px, 270px);
}

.editor-avanzado-columnas.modo-filtros .editor-avanzado-menu {
    padding-bottom: 80px;
}

.editor-avanzado-menu {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    padding: 28px 24px 22px;
    border-right: 1px solid #dce2eb;
    background: #fff;
    overflow-y: auto;
}

.editor-avanzado-imagen {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: 24px;
    box-sizing: border-box;
    background: #e9edf3;
}

.barras-controles-editor {
    position: absolute;
    top: 14px;
    right: 34px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.controles-zoom-editor {
    position: relative;
    display: flex;
    height: 34px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #bfc8d5;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 3px 12px rgba(32, 42, 58, 0.18);
}

.barra-acciones-archivo-editor {
    display: flex;
    align-items: center;
    min-height: 34px;
}

.barra-acciones-archivo-editor #descargar-editor-avanzado {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 7px;
    box-shadow: 0 3px 12px rgba(32, 42, 58, 0.18);
    font-size: 12px;
}

.controles-zoom-editor button {
    height: 100%;
    min-width: 34px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #d7dde6;
    background: transparent;
    color: #344054;
    font-size: 14px;
    cursor: pointer;
}

.controles-zoom-editor .boton-icono-control-editor {
    width: 34px;
    min-width: 34px;
    padding: 0;
}

.controles-zoom-editor #restablecer_edicion_imagen {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
}

.controles-zoom-editor .boton-icono-control-editor img {
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    object-fit: contain;
}

.separador-controles-editor {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: #d7dde6;
}

#candado-elemento-editor[aria-pressed="false"] {
    background: #eaf7ef;
    color: #19703b;
}

#icono-candado-editor {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
}

#aviso-candado-editor {
    position: absolute;
    top: 55px;
    right: 34px;
    z-index: 20;
    padding: 7px 10px;
    border: 1px solid #e4c56f;
    border-radius: 6px;
    background: #fff8df;
    color: #725600;
    font-size: 11px;
    line-height: 1.3;
    box-shadow: 0 5px 16px rgba(35, 45, 60, 0.16);
    white-space: nowrap;
    pointer-events: none;
}

#aviso-candado-editor[hidden] {
    display: none;
}

.preview-modelo-editor {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 18px;
    box-sizing: border-box;
    background: #e9edf3;
}

.preview-modelo-editor[hidden] {
    display: none;
}

.preview-modelo-cabecera {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
    color: #344054;
    gap: 12px;
}

.titulo-preview-modelo-editor {
    display: grid;
    min-width: 0;
    gap: 4px;
    margin-right: auto;
}

.titulo-preview-modelo-editor>strong {
    color: #283548;
    font-size: 17px;
    line-height: 1.15;
}

.badges-preview-modelo {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.badges-preview-modelo span {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid #cbd5e2;
    border-radius: 999px;
    background: #f7f9fc;
    color: #44536a;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

#detalle-preview-modelo-editor {
    color: #7a8698;
    font-size: 10px;
    line-height: 1.25;
}

.alternar-area-preview-modelo {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    padding: 4px 9px;
    border: 1px solid #b9c4d2;
    border-radius: 6px;
    background: #fff;
    color: #526074;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.alternar-area-preview-modelo:hover {
    border-color: #8da5d5;
    background: #f5f8fc;
}

.alternar-area-preview-modelo input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #245be6;
}

.selector-colores-preview-modelo {
    position: relative;
}

#abrir-colores-preview-modelo {
    display: flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid #b9c4d2;
    border-radius: 6px;
    background: #fff;
    color: #445065;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

#muestra-color-preview-modelo {
    width: 16px;
    height: 16px;
    border: 1px solid #9ba7b7;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.colores-preview-modelo-editor {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 8;
    display: flex;
    width: max-content;
    max-width: min(330px, 70vw);
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px;
    border: 1px solid #bdc7d4;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 7px 20px rgba(28, 39, 56, 0.18);
}

.colores-preview-modelo-editor[hidden] {
    display: none;
}

.color-preview-modelo {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px #9ba7b7;
}

.color-preview-modelo[aria-pressed="true"] {
    box-shadow: 0 0 0 2px #245be6;
}

#cerrar-preview-modelo-editor {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #bdc7d4;
    border-radius: 50%;
    background: #fff;
    color: #344054;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.preview-modelo-contenido {
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.escenario-preview-modelo {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
    background: #e9edf3;
    box-shadow: 0 8px 28px rgba(28, 39, 56, 0.18);
}

#imagen-base-preview-modelo {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 145px);
    width: auto;
    height: auto;
    object-fit: contain;
}

#diseno-preview-modelo {
    position: absolute;
    z-index: 2;
    object-fit: contain;
    pointer-events: none;
}

#color-base-preview-modelo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #fff;
    mix-blend-mode: multiply;
    opacity: 0.86;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
}

#color-base-preview-modelo[hidden] {
    display: none;
}

#area-impresion-preview-modelo {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    border: 1px dashed rgba(18, 100, 232, 0.42);
    pointer-events: auto !important;
    cursor: move;
}

#area-impresion-preview-modelo[hidden] {
    display: none;
}

#medidas-area-preview-modelo {
    position: absolute;
    top: -25px;
    left: 50%;
    padding: 4px 7px;
    border: 1px solid rgba(18, 100, 232, 0.28);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    color: #315c9d;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Editor interactivo de modelo */
#area-impresion-preview-modelo.editando-posicion {
    pointer-events: auto !important;
    cursor: move;
    border-color: #1264e8;
    box-shadow: 0 0 0 1px rgba(18, 100, 232, 0.2);
}

.handle-resize {
    display: none;
    position: absolute;
    width: 8px;
    height: 8px;
    background: #1264e8;
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: 10;
    pointer-events: auto !important;
}

#area-impresion-preview-modelo.editando-posicion .handle-resize {
    display: block;
}

.handle-resize.hr-tl {
    top: -4px;
    left: -4px;
    cursor: nwse-resize;
}

.handle-resize.hr-tr {
    top: -4px;
    right: -4px;
    cursor: nesw-resize;
}

.handle-resize.hr-bl {
    bottom: -4px;
    left: -4px;
    cursor: nesw-resize;
}

.handle-resize.hr-br {
    bottom: -4px;
    right: -4px;
    cursor: nwse-resize;
}

.btn-activar-editor-modelo {
    position: fixed;
    top: 75px;
    right: 20px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1264e8;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    max-width: 170px;
}

.btn-activar-editor-modelo .texto p {
    margin: 6px;
    line-height: 1.2;
    font-size: x-small;
}

.btn-activar-editor-modelo:hover {
    background: #0f52c1;
    transform: translateY(-1px);
}

.btn-activar-editor-modelo[hidden] {
    display: none !important;
}

.panel-editor-modelo {
    position: fixed;
    top: 125px;
    right: 20px;
    width: 300px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    color: #1e293b;
    overflow: hidden;
    line-height: 1.4;
}

.panel-editor-modelo[hidden] {
    display: none !important;
}

.panel-editor-modelo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.panel-editor-modelo-cabecera strong {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

#btn-cerrar-editor-modelo {
    background: none;
    border: none;
    font-size: 18px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
}

#btn-cerrar-editor-modelo:hover {
    color: #0f172a;
}

.panel-editor-modelo-cuerpo {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
    box-sizing: border-box;
}

.panel-editor-modelo-cuerpo input,
.panel-editor-modelo-cuerpo select {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #1e293b;
    box-sizing: border-box;
    width: 100%;
}

.panel-editor-modelo-pie {
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.editor-modelo-subtitulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.05em;
    margin-top: 4px;
    text-align: left;
}

.editor-modelo-fila {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.editor-modelo-fila label {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    text-align: left;
}

.editor-modelo-fila-doble {
    display: flex;
    gap: 8px;
}

.editor-modelo-fila-doble>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.editor-modelo-fila-doble label {
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    text-align: left;
}

.editor-modelo-fila-doble input {
    width: 100%;
}

.btn-guardar-editor-modelo {
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    transition: background 0.2s ease;
}

.btn-guardar-editor-modelo:hover {
    background: #059669;
}

.controles-zoom-editor button:hover {
    background: #eef3fb;
}

.controles-zoom-editor button:disabled,
.botones-transformar-fabric button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#zoom-editor-valor {
    min-width: 52px;
    padding: 0 7px;
    color: #35404e;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}

#zoom-editor-ajustar {
    border-right: 0;
    font-size: 11px;
}

.panel-filtros-fabric {
    box-sizing: border-box;
    min-width: 0;
    padding: 25px 18px 20px;
    border-left: 1px solid #d4dae3;
    background: #fff;
    overflow-y: auto;
}

.panel-filtros-fabric[hidden] {
    display: none !important;
}

.panel-filtros-cabecera {
    display: grid;
    gap: 3px;
    margin-bottom: 15px;
}

.panel-filtros-cabecera strong {
    font-size: 17px;
}

.panel-filtros-cabecera span,
.mensaje-seleccion-filtros {
    color: #687385;
    font-size: 11px;
}

.acciones-elemento-fabric {
    display: flex;
    gap: 5px;
    margin-bottom: 9px;
}

.acciones-elemento-fabric button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 4px;
    place-items: center;
    border: 1px solid #ccd4df;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.acciones-elemento-fabric button img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    pointer-events: none;
}

.acciones-elemento-fabric button:hover:not(:disabled) {
    border-color: #8da5d5;
    background: #f1f5fc;
}

.acciones-elemento-fabric #activar_escala_editar[aria-pressed="true"] {
    border-color: #1264e8;
    background: #1264e8;
    box-shadow: 0 0 0 2px #b9d1fb;
}

.acciones-elemento-fabric #activar_escala_editar[aria-pressed="true"] img {
    filter: brightness(0) invert(1);
}

.acciones-elemento-fabric button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.mensaje-seleccion-filtros {
    min-height: 16px;
    margin-bottom: 8px;
}

.lista-filtros-fabric {
    display: grid;
    gap: 8px;
}

.lista-filtros-fabric[data-editor-imagen="off"] .grupo-solo-imagen,
.lista-filtros-fabric[data-editor-imagen="off"] .grupo-imagen-fabric,
.lista-filtros-fabric[data-editor-imagen="off"] .eliminar-fondo-color-fabric,
.lista-filtros-fabric[data-editor-transformar="off"] .grupo-transformar-fabric {
    display: none;
}

.lista-filtros-fabric.sin-elemento-compatible .grupo-solo-imagen {
    opacity: 0.45;
    pointer-events: none;
}

.controles-texto-editor {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.controles-texto-editor:disabled {
    opacity: 0.5;
}

.controles-texto-editor textarea,
.controles-texto-editor select {
    box-sizing: border-box;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid #c7d0dd;
    border-radius: 6px;
    background: #fff;
    color: #344054;
    font: inherit;
}

.controles-texto-editor textarea {
    resize: vertical;
}

.boton-anadir-texto-editor {
    min-height: 34px;
    border: 1px solid #245be6;
    border-radius: 6px;
    background: #245be6;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.boton-secundario-texto-editor {
    min-height: 32px;
    border: 1px solid #8da5d5;
    border-radius: 6px;
    background: #f1f5fc;
    color: #1746bd;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.boton-secundario-texto-editor[hidden] {
    display: none;
}

.subir-fuente-editor {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px dashed #9ba9bc;
    border-radius: 6px;
    background: #f8fafc;
    color: #445065;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.subir-fuente-editor:hover {
    border-color: #245be6;
    color: #1746bd;
}

.subir-fuente-editor input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.estado-fuente-editor {
    color: #687385;
    font-size: 9px;
    line-height: 1.35;
}

.estado-fuente-editor.error {
    color: #a00;
}

.estado-fuente-editor.correcto {
    color: #19703b;
}

.fila-color-texto-editor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.seccion-estilo-texto {
    display: grid;
    gap: 6px;
    margin-top: 4px;
    padding: 8px;
    border: 1px solid #d8e0eb;
    border-left: 3px solid #8aa6dc;
    border-radius: 7px;
    background: #f8fafc;
}

.titulo-seccion-estilo-texto {
    color: #344054;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.seccion-estilo-texto--degradado {
    border-left-color: #7c5ce0;
}

.seccion-estilo-texto--borde {
    border-left-color: #245be6;
}

.seccion-estilo-texto--sombra {
    border-left-color: #64748b;
}

.seccion-estilo-texto .filtro-check-fabric {
    margin: 0;
}

.seccion-estilo-texto>div:not(.titulo-seccion-estilo-texto) {
    display: grid;
    gap: 6px;
}

.grupo-filtros-fabric {
    overflow: hidden;
    border: 1px solid #d5dce6;
    border-radius: 8px;
    background: #fff;
}

.grupo-filtros-fabric>summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 34px 12px 13px;
    color: #2f3a4b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.grupo-filtros-fabric>summary>img {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) opacity(0.72);
    transition: filter 0.18s ease, opacity 0.18s ease;
}

.icono-formas-editor {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    opacity: 0.72;
}

.icono-formas-editor i {
    position: absolute;
    display: block;
    border: 1.5px solid #596579;
    box-sizing: border-box;
}

.icono-formas-editor i:nth-child(1) {
    top: 2px;
    left: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.icono-formas-editor i:nth-child(2) {
    right: 1px;
    bottom: 2px;
    width: 9px;
    height: 8px;
}

.icono-formas-editor i:nth-child(3) {
    bottom: 1px;
    left: 2px;
    width: 0;
    height: 0;
    border: 0;
    border-right: 5px solid transparent;
    border-bottom: 9px solid #596579;
    border-left: 5px solid transparent;
}

.botones-formas-editor {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.botones-formas-editor button {
    display: grid;
    min-width: 0;
    min-height: 72px;
    padding: 7px 3px;
    place-items: center;
    gap: 3px;
    border: 1px solid #c7d0dd;
    border-radius: 7px;
    background: #fff;
    color: #445065;
    font-size: 9px;
    cursor: pointer;
}

.muestra-forma-glyph {
    display: block;
    min-height: 34px;
    color: #536278;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 34px;
    text-align: center;
}

.muestra-forma-glyph canvas {
    display: block;
    width: 42px;
    height: 33px;
    margin: 0 auto;
}

.botones-formas-editor button:hover {
    border-color: #8da5d5;
    background: #f3f6fc;
}

.muestra-forma {
    display: block;
    width: 24px;
    height: 20px;
    box-sizing: border-box;
    background: #7b8798;
}

.muestra-elipse {
    border-radius: 50%;
}

.muestra-triangulo {
    width: 0;
    height: 0;
    border-right: 12px solid transparent;
    border-bottom: 21px solid #7b8798;
    border-left: 12px solid transparent;
    background: transparent;
}

.muestra-rectangulo {
    border-radius: 2px;
}

.categoria-formas-editor {
    overflow: hidden;
    border: 1px solid #e0e6ef;
    border-radius: 6px;
    background: #fafbfd;
}

.categoria-formas-editor summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 38px 9px 11px;
    color: #4c5b71;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.categoria-formas-editor summary::-webkit-details-marker {
    display: none;
}

.categoria-formas-editor summary span {
    margin-right: 8px;
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 10px;
    background: #e7ecf4;
    color: #68778c;
    font-size: 9px;
    text-align: center;
}

.categoria-formas-editor[open] summary {
    border-bottom: 1px solid #e0e6ef;
    background: #f0f4fa;
}

.categoria-formas-editor summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 6px;
    border-right: 2px solid #687385;
    border-bottom: 2px solid #687385;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.18s ease;
}

.categoria-formas-editor[open] summary::after {
    transform: translateY(-35%) rotate(225deg);
}

.categoria-formas-editor .botones-formas-editor {
    padding: 8px;
}

.grupo-filtros-fabric>summary:hover>img,
.grupo-filtros-fabric[open]>summary>img {
    filter: grayscale(1) saturate(0) opacity(0.95);
}

.grupo-filtros-fabric>summary::-webkit-details-marker {
    display: none;
}

.grupo-filtros-fabric>summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #687385;
    border-bottom: 2px solid #687385;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.18s ease;
}

.grupo-filtros-fabric[open]>summary {
    border-bottom: 1px solid #e2e7ee;
    background: #f5f7fb;
}

.grupo-filtros-fabric[open]>summary::after {
    transform: translateY(-35%) rotate(225deg);
}

.contenido-grupo-filtros {
    display: grid;
    gap: 12px;
    padding: 11px 12px 13px;
}

.icono-importar-editor {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border: 1px solid #718096;
    border-radius: 4px;
    color: #536278;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.boton-importar-editor {
    display: grid;
    min-height: 40px;
    place-items: center;
    border: 1px solid #9cb1d7;
    border-radius: 7px;
    background: #f3f6fc;
    color: #34558d;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.boton-importar-editor:hover {
    border-color: #6387c6;
    background: #e8eef9;
}

.boton-importar-editor input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.ayuda-importar-editor {
    color: #687385;
    font-size: 10px;
    line-height: 1.4;
}

.botones-transformar-fabric {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.botones-transformar-fabric button {
    display: grid;
    min-height: 66px;
    padding: 9px 7px;
    place-items: center;
    gap: 4px;
    border: 1px solid #c7d0dd;
    border-radius: 7px;
    background: #fff;
    color: #3b4657;
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
}

.botones-transformar-fabric button img {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) opacity(0.75);
    pointer-events: none;
}

.botones-transformar-fabric button img.icono-voltear-vertical {
    transform: rotate(90deg);
}

.botones-transformar-fabric button:hover img,
.botones-transformar-fabric button[aria-pressed="true"] img {
    filter: grayscale(1) saturate(0) opacity(1);
}

.botones-transformar-fabric button:hover {
    border-color: #8da5d5;
    background: #f3f6fc;
}

.botones-transformar-fabric button[aria-pressed="true"] {
    border-color: #245be6;
    background: #eaf0ff;
    color: #1746bd;
    box-shadow: inset 0 0 0 1px #245be6;
}

.botones-transformar-fabric .boton-transformar-ancho {
    grid-column: 1 / -1;
    min-height: 52px;
    grid-template-columns: auto 1fr;
    justify-content: center;
}

.filtro-check-fabric {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
}

.mezcla-color-fabric {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 10px;
    border: 1px solid #cbd2dc;
    border-radius: 7px;
}

.mezcla-color-fabric legend {
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
}

.fila-color-rango {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.fila-color-rango input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
}

.panel-filtros-fabric input[type="color"] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #9eabba;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.panel-filtros-fabric input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.panel-filtros-fabric input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.panel-filtros-fabric input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}

.fila-dos-colores {
    gap: 5px;
}

.flecha-colores {
    flex: 0 0 auto;
    color: #687385;
    font-size: 12px;
}

#forma_semitono_editar {
    width: 100%;
    height: 36px;
    margin-top: 6px;
    padding: 5px 8px;
    border: 1px solid #c7d0dd;
    border-radius: 6px;
    background: #fff;
}

.modo-ropa-semitono {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 0;
    padding: 9px;
    border: 1px solid #d5dce6;
    border-radius: 7px;
}

.modo-ropa-semitono legend {
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
}

.modo-ropa-semitono label {
    position: relative;
    display: grid;
    min-height: 60px;
    padding: 8px 5px;
    place-items: center;
    border: 1px solid #cbd3df;
    border-radius: 7px;
    text-align: center;
    cursor: pointer;
}

.modo-ropa-semitono input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.modo-ropa-semitono label:has(input:checked) {
    border-color: #245be6;
    background: #eaf0ff;
    box-shadow: inset 0 0 0 1px #245be6;
}

.modo-ropa-semitono span {
    display: grid;
    gap: 6px;
    place-items: center;
}

.modo-ropa-semitono strong {
    font-size: 11px;
}

.modo-ropa-semitono span img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) opacity(0.75);
    pointer-events: none;
}

.modo-ropa-semitono label:has(input:checked) span img {
    filter: grayscale(1) saturate(0) opacity(1);
}

.eliminar-fondo-color-fabric {
    background: #f8fafc;
}

#tituloEditorAvanzado {
    display: flex;
    margin-bottom: 22px;
    padding-right: 25px;
    align-items: center;
    gap: 12px;
    color: #29364a;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

#tituloEditorAvanzado::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, #aebacc, rgba(174, 186, 204, 0));
}

.editor-avanzado-copias {
    display: grid;
    gap: 8px;
    font-weight: 600;
}

.editor-avanzado-fila-copias {
    padding: 2px 0 22px;
    border-bottom: 1px solid #dce2eb;
}

.editor-avanzado-copias {
    flex: 1;
    min-width: 0;
}

.editor-avanzado-etiqueta-copias {
    display: flex;
    align-items: center;
    gap: 7px;
}

.editor-avanzado-etiqueta-copias img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.72;
}

.editor-avanzado-copias p {
    margin: 2px 0 0;
    color: #59677b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.editor-avanzado-selector-copias {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #cbd2dc;
    border-radius: 8px;
    background: #fff;
}

.editor-avanzado-selector-copias button {
    border: 0;
    background: #f4f7fb;
    color: #245be6;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.editor-avanzado-selector-copias button:hover:not(:disabled) {
    background: #e8f0ff;
}

.editor-avanzado-selector-copias button:disabled {
    color: #aab5c4;
    cursor: not-allowed;
}

#contador_editor_avanzado {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 0;
    border-right: 1px solid #dce2eb;
    border-left: 1px solid #dce2eb;
    border-radius: 0;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.editor-avanzado-fila-copias #guardar-editor-avanzado {
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    font-size: 13px;
}

.ayuda-area-impresion-editor {
    margin-top: 12px;
    padding: 11px 12px;
    border-left: 3px solid #7ea5ef;
    border-radius: 0 7px 7px 0;
    background: #f4f8ff;
    color: #4d638d;
    font-size: 12px;
    line-height: 1.4;
}

.ayuda-area-impresion-editor strong {
    display: block;
    margin-bottom: 4px;
    color: #285baf;
    font-size: 12px;
}

.ayuda-area-impresion-editor p {
    margin: 0;
}

#contenedor-canvas-editor {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100% - 18px);
    margin-top: 18px;
    min-width: 0;
    min-height: 0;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background-color: #dfe4eb;
    border: 1px solid #cfd6e0;
    border-radius: 10px;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.08);
}

#contenedor-canvas-editor.zoom-editor-activo {
    align-items: flex-start;
    justify-content: flex-start;
}

#contenedor-canvas-editor.modo-desplazar-zoom,
#contenedor-canvas-editor.modo-desplazar-zoom canvas {
    cursor: grab !important;
}

#contenedor-canvas-editor.desplazando-zoom,
#contenedor-canvas-editor.desplazando-zoom canvas {
    cursor: grabbing !important;
    user-select: none;
}

#contenedor-canvas-editor.zoom-editor-activo #superficie-editor-medida {
    margin: 44px 20px 20px;
    max-width: none;
    max-height: none;
}

.minimapa-editor {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 30;
    width: 170px;
    height: 120px;
    overflow: hidden;
    border: 1px solid #8c9aac;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 3px 12px rgba(25, 35, 50, 0.25);
    cursor: crosshair;
}

.minimapa-editor[hidden] {
    display: none;
}

.minimapa-editor canvas {
    display: block;
    width: 170px;
    height: 120px;
    opacity: 0.78;
}

#vista-minimapa-editor {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #1264e8;
    background: rgba(18, 100, 232, 0.12);
    pointer-events: none;
}

#superficie-editor-medida {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: 22px minmax(0, 1fr);
    flex: 0 0 auto;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #9da8b7;
    background: #f8fafc;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}

#divisor-semitono-editor {
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 50%;
    z-index: 9;
    width: 3px;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(20, 29, 44, 0.65), 0 0 8px rgba(0, 0, 0, 0.45);
    cursor: ew-resize;
    pointer-events: auto;
}

#divisor-semitono-editor[hidden] {
    display: none !important;
}

#divisor-semitono-editor span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: #245be6;
    color: #fff;
    font-size: 17px;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.35);
}

#etiquetas-semitono-editor {
    position: absolute;
    top: 30px;
    left: 38px;
    right: 8px;
    z-index: 8;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    text-shadow: 0 1px 3px #000, 0 0 5px #000;
}

#etiquetas-semitono-editor[hidden] {
    display: none !important;
}

.esquina-reglas-editor {
    position: relative;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #d8dde5;
    border-bottom: 1px solid #d8dde5;
    background: #fff;
    color: #667085;
    font: 9px/1 Arial, sans-serif;
    text-transform: uppercase;
}

.visor-regla-activador {
    position: relative;
    display: grid;
    width: 23px;
    height: 18px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #8a94a4;
    cursor: pointer;
}

.visor-regla-activador:hover {
    background: #edf2f7;
}

.visor-regla-activador img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: grayscale(1) opacity(.55);
    transition: filter .16s ease, transform .16s ease;
}

.visor-regla-activador::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #98a2b3;
    content: "";
}

.visor-regla-activador[aria-pressed="true"] {
    color: #1264e8;
    background: #e8f1ff;
}

.visor-regla-activador[aria-pressed="true"] img {
    filter: brightness(0) saturate(100%) invert(32%) sepia(94%) saturate(2023%) hue-rotate(204deg) brightness(94%) contrast(94%);
    transform: scale(1.08);
}

.visor-regla-activador[aria-pressed="true"]::after {
    background: #20a65a;
}

.visor-regla-activador[hidden] {
    display: none;
}

.regla-editor {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    color: #3c4656;
    font: 9px/1 Arial, sans-serif;
    user-select: none;
}

.regla-horizontal-editor {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 1px solid #d8dde5;
}

.regla-vertical-editor {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid #d8dde5;
}

.marca-regla-editor {
    position: absolute;
    box-sizing: border-box;
}

.regla-horizontal-editor .marca-regla-editor {
    bottom: 0;
    height: 7px;
    border-left: 1px solid #4b5565;
}

.regla-horizontal-editor .marca-regla-editor-secundaria {
    height: 4px;
    border-color: #8993a1;
}

.regla-horizontal-editor .marca-regla-editor-media {
    height: 6px;
    border-color: #667085;
}

.regla-horizontal-editor .marca-regla-editor span {
    position: absolute;
    bottom: 9px;
    left: 1px;
    white-space: nowrap;
}

.regla-vertical-editor .marca-regla-editor {
    right: 0;
    width: 7px;
    border-top: 1px solid #4b5565;
}

.regla-vertical-editor .marca-regla-editor-secundaria {
    width: 4px;
    border-color: #8993a1;
}

.regla-vertical-editor .marca-regla-editor-media {
    width: 6px;
    border-color: #667085;
}

.regla-vertical-editor .marca-regla-editor span {
    position: absolute;
    top: 1px;
    right: 9px;
    white-space: nowrap;
}

.indicador-regla-editor {
    position: absolute;
    z-index: 10;
    display: block;
    width: 0;
    height: 0;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(29, 51, 79, 0.32));
}

.indicador-regla-editor[hidden] {
    display: none;
}

.indicador-regla-horizontal-editor {
    top: 15px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 7px solid #1264e8;
    transform: translateX(-50%);
}

.indicador-regla-vertical-editor {
    left: 23px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #1264e8;
    transform: translateY(-50%);
}

.guia-puntero-editor {
    position: absolute;
    z-index: 5;
    display: block;
    pointer-events: none;
    background: rgba(18, 100, 232, 0.48);
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.85);
}

.guia-puntero-editor[hidden] {
    display: none;
}

.guia-horizontal-puntero-editor {
    right: 0;
    left: 30px;
    height: 1px;
}

.guia-vertical-puntero-editor {
    top: 22px;
    bottom: 0;
    width: 1px;
}

.visor-puntero-editor {
    position: absolute;
    top: 30px;
    right: 8px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid rgba(54, 65, 82, 0.22);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.94);
    color: #293241;
    font: 600 11px/1 Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
    pointer-events: none;
}

.visor-puntero-editor[hidden] {
    display: none;
}

.muestra-color-puntero-editor {
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    flex: 0 0 13px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    background-color: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

#valor-color-puntero-editor {
    padding-left: 7px;
    border-left: 1px solid #d6dbe3;
    color: #526074;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
}

#canvas-editor-avanzado {
    display: block;
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    max-height: none;
    background-color: #fff;
    object-fit: contain;
}

#superficie-editor-medida>.canvas-container {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    max-height: none;
}

#superficie-editor-medida>.canvas-container.seleccion-cubre-lienzo::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 6;
    box-sizing: border-box;
    border: 2px dashed #1264e8;
    border-radius: 2px;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 0 0 1px rgba(255, 255, 255, 0.75);
}

#superficie-editor-medida .lower-canvas {
    --fondo-cuadricula-base: #e6e6e6;
    --fondo-cuadricula-marca: #b3b3b3;
    background-color: var(--fondo-cuadricula-base);
    background-image:
        linear-gradient(45deg, var(--fondo-cuadricula-marca) 25%, transparent 25%),
        linear-gradient(-45deg, var(--fondo-cuadricula-marca) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--fondo-cuadricula-marca) 75%),
        linear-gradient(-45deg, transparent 75%, var(--fondo-cuadricula-marca) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.acciones-editor-avanzado {
    display: grid;
    gap: 14px;
    padding: 26px 0 8px;
}

.acciones-editor-avanzado[hidden] {
    display: none !important;
}

.editor-avanzado-badge {
    justify-self: start;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid #ead18b;
    background: #fff7db;
    color: #8b6511;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.separador-editor-avanzado {
    height: 1px;
    margin: 2px 0 0;
    background: #e3e8ef;
}

#guardar-editor-avanzado,
#descargar-editor-avanzado,
#eliminar-editor-avanzado {
    padding: 6px 10px;
    min-height: 34px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.15;
    cursor: pointer;
}

#guardar-editor-avanzado,
#descargar-editor-avanzado,
#eliminar-editor-avanzado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding-right: 7px;
    padding-left: 7px;
}

#descargar-editor-avanzado[hidden] {
    display: none;
}

#guardar-editor-avanzado img,
#descargar-editor-avanzado img,
#eliminar-editor-avanzado img {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) brightness(0) invert(1);
    pointer-events: none;
}

#guardar-editor-avanzado span,
#descargar-editor-avanzado span,
#eliminar-editor-avanzado span {
    white-space: nowrap;
}

#guardar-editor-avanzado {
    border: 1px solid #245be6;
    background: #245be6;
    color: #fff;
    font-weight: 600;
}

#guardar-editor-avanzado:hover:not(:disabled) {
    border-color: #1746bd;
    background: #1746bd;
}

#activar-edicion-imagen {
    width: 100%;
    min-height: 84px;
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid #c7d8f7;
    border-radius: 10px;
    background: linear-gradient(135deg, #f4f8ff, #e8f0ff);
    color: #1746bd;
    justify-content: flex-start;
    text-align: left;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#activar-edicion-imagen:hover {
    border-color: #7ea5ef;
    box-shadow: 0 6px 18px rgba(36, 91, 230, 0.14);
    transform: translateY(-1px);
}

#activar-edicion-imagen img {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
}

.accion-editor-texto {
    display: grid;
    gap: 4px;
    white-space: normal;
}

.accion-editor-texto strong {
    font-size: 14px;
}

.editor-avanzado-ayuda-edicion {
    margin: -1px 2px 6px;
    color: #4d638d;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

#descargar-editor-avanzado {
    border: 1px solid #2f6f53;
    background: #2f6f53;
    color: #fff;
}

#descargar-editor-avanzado:hover:not(:disabled) {
    border-color: #245d45;
    background: #245d45;
}

#eliminar-editor-avanzado {
    width: 100%;
    margin-top: auto;
    border: 1px solid #e2bcbc;
    background: #fff;
    color: #a00;
}

#eliminar-editor-avanzado img {
    filter: grayscale(1) saturate(0) brightness(0) invert(17%) sepia(94%) saturate(3872%) hue-rotate(356deg) brightness(73%) contrast(118%);
}

#eliminar-editor-avanzado[hidden],
.acciones-editor-final[hidden] {
    display: none !important;
}

.acciones-editor-final {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}

#pie-editor-avanzado {
    position: absolute;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: min(280px, 100%);
    min-height: 64px;
    box-sizing: border-box;
    padding: 10px 14px;
    border-top: 1px solid #dce2eb;
    border-right: 1px solid #dce2eb;
    background: #fff;
    box-shadow: 0 -6px 16px rgba(30, 47, 71, .08);
}

#pie-editor-avanzado[hidden] {
    display: none !important;
}

#pie-editor-avanzado .acciones-editor-final {
    width: 100%;
    margin: 0;
    padding: 0;
}

#pie-editor-avanzado .acciones-editor-final button {
    display: flex;
    align-items: center;
    justify-content: center;
}

#pie-editor-avanzado .acciones-editor-final button img {
    display: block;
    width: 23px;
    height: 23px;
    object-fit: contain;
    pointer-events: none;
}

#pie-editor-avanzado .acciones-editor-final button span {
    display: none;
}

#pie-editor-avanzado #guardar-editor-avanzado {
    border: 1px solid #258a4b;
    background: transparent;
    color: #258a4b;
}

#pie-editor-avanzado #guardar-editor-avanzado:hover:not(:disabled) {
    border-color: #176b37;
    background: transparent;
}

#pie-editor-avanzado #guardar-editor-avanzado img {
    filter: invert(42%) sepia(68%) saturate(708%) hue-rotate(95deg) brightness(91%) contrast(87%);
}

#pie-editor-avanzado #restaurar_imagen_original {
    border: 1px solid #c93636;
    background: transparent;
    color: #c93636;
}

#pie-editor-avanzado #restaurar_imagen_original img {
    filter: invert(31%) sepia(89%) saturate(1233%) hue-rotate(334deg) brightness(91%) contrast(94%);
}

#pie-editor-avanzado #cancelar-editor-avanzado {
    border: 1px solid #d8a316;
    background: transparent;
    color: #a67400;
}

#pie-editor-avanzado #cancelar-editor-avanzado img {
    filter: invert(68%) sepia(94%) saturate(442%) hue-rotate(3deg) brightness(92%) contrast(91%);
}

.acciones-editor-final #guardar-editor-avanzado,
.acciones-editor-final #restaurar_imagen_original,
.acciones-editor-final #cancelar-editor-avanzado {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 8px;
    font-size: 12px;
}

.acciones-editor-final #restaurar_imagen_original {
    border: 1px solid #b9c4d3;
    border-radius: 6px;
    background: #f5f7fa;
    color: #35404e;
}

.acciones-editor-final #cancelar-editor-avanzado {
    border: 1px solid #cbd2dc;
    border-radius: 6px;
    background: #fff;
    color: #4c5b70;
    cursor: pointer;
}

#cerrar-editor-avanzado {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

#estado-editor-avanzado {
    display: none !important;
}

#estado-editor-avanzado.estado-editor-no-editable {
    padding: 10px;
    border: 1px solid #e4c56f;
    border-radius: 7px;
    background: #fff8df;
    color: #725600;
    line-height: 1.4;
}

.referencia-modelo-editor {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 0 1px;
    color: #52637b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.referencia-modelo-editor-texto {
    min-width: 0;
}

.referencia-modelo-editor-detalle {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.referencia-modelo-editor-icono {
    color: #96701a;
    font-size: 13px;
    line-height: 1.2;
}

.referencia-modelo-editor-badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef1f4;
    color: #667085;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.referencia-modelo-editor[hidden] {
    display: none;
}

@media (max-width: 720px) {
    #contenidoEditorAvanzado {
        width: 94vw;
        height: 90vh;
        overflow: auto;
    }

    .editor-avanzado-columnas {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(320px, 1fr);
        height: auto;
        min-height: 100%;
    }

    .editor-avanzado-menu {
        border-right: 0;
        border-bottom: 1px solid #dce2eb;
    }

    #pie-editor-avanzado {
        right: 0;
        width: auto;
        border-right: 0;
    }

    .editor-avanzado-imagen {
        min-height: 360px;
    }

    .barras-controles-editor {
        right: 14px;
        max-width: calc(100% - 28px);
    }
}

@media (min-width: 721px) and (max-width: 1050px) {
    .editor-avanzado-columnas.modo-filtros {
        grid-template-columns: 230px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .editor-avanzado-columnas.modo-filtros .panel-filtros-fabric {
        grid-column: 1 / -1;
        max-height: 230px;
        border-top: 1px solid #d4dae3;
        border-left: 0;
    }

    .editor-avanzado-columnas.modo-filtros .lista-filtros-fabric {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}



#cerrarCuadroeditar {
    position: absolute;
    top: -20px;
    right: -15px;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    color: #727272;
}


#editar-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 250px);
    height: auto;
    border: 2px solid #a5a5a5;
    min-height: 0;
    object-fit: contain;
    margin: 0 auto;
}

/*
     * El contador y los botones de edición están superpuestos sobre la zona
     * de la imagen. Reservamos solamente en este modal una altura mínima para
     * que, cuando la imagen mida menos de 100 px, el botón OK permanezca en la
     * parte inferior y no invada el selector del número de copias.
     */
#contenidoCuadroeditar #image-container {
    min-height: 150px;
}

.numcopias {
    position: absolute;
    z-index: 10;
    font-size: small;
    margin-top: -21px;
    background-color: #a5a5a56e;
    padding-left: 5px;
    padding-right: 10px;
    border-top-right-radius: 20px;
    backdrop-filter: blur(2px);
    border-left: 2px solid #a5a5a5;
    border-top: 2px solid #a5a5a5;
    border-right: 2px solid #a5a5a5;
    width: 104px;
    overflow: hidden;
    color: #5b5b5b;
}

#contador_editar {
    position: absolute;
    width: 104px;
    color: #ff0000;
    font-family: monospace;
    font-weight: bold;
    font-size: 13pt;
    text-align: center;
    height: 34px;
    border-radius: 1px;
    background-color: #e5e5e5ad;
    border-bottom-right-radius: 20px;
    backdrop-filter: blur(2px);
    margin-top: -1px;
    border: 2px solid #a5a5a5;
}

#contador_editar::-webkit-inner-spin-button,
#contador_editar::-webkit-outer-spin-button {
    opacity: 1;
    /* Asegura que las flechas estén siempre visibles */
}

#contador_editar:focus {
    outline: none;
}

#editar-status {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: x-large;
    font-family: monospace;
    max-width: 300px;
    flex-wrap: wrap;
    text-align: center;
    /* Asegura que el texto esté centrado */
    flex-direction: column;
    /* Para apilar elementos en una columna */
}

#editararchivo {
    display: none;
    background-color: #ffffff6b;
    border: 1px solid #a5a5a5;
    font-family: monospace;
    color: black;
    cursor: pointer;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    margin-top: -60px;
    margin-left: 10px;
    backdrop-filter: blur(2px);
}

#editararchivo svg {
    filter: grayscale(1) brightness(1);
}

#botoneliminarchivo svg {
    filter: grayscale(1) brightness(1);
}

.atencioneditar {
    background-color: rgb(23 117 0) !important;
    color: white !important;
}

.atencioneditar svg g {
    fill: rgb(255, 255, 255) !important;
    stroke: rgb(255, 255, 255) !important;
}

#botoneliminarchivo {
    display: flex;
    background-color: #ffffff6b;
    border: 1px solid #a5a5a5;
    font-family: monospace;
    color: black;
    cursor: pointer;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    margin-top: -60px;
    backdrop-filter: blur(2px);
    right: 30px;
    font-weight: bold;
}

#contenedorimageneditar {
    height: auto;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    /* Solo para Firefox */
    scrollbar-color: #c0c0c0 #f0f0f0;
    /* Solo para Firefox */
}

/* Para navegadores WebKit (Chrome, Safari) */
.contenedorimageneditar::-webkit-scrollbar {
    width: 8px;
    /* Ancho de la barra de desplazamiento vertical */
}

.contenedorimageneditar::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    /* Color del track de fondo */
    border-radius: 10px;
}

.contenedorimageneditar::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Color de la barra de desplazamiento */
    border-radius: 10px;
    border: 2px solid #f0f0f0;
    /* Espacio alrededor del thumb */
    background-clip: padding-box;
}

/* Personalización cuando se pasa el cursor sobre la barra de desplazamiento */
.mcontenedorimageneditar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* Cambia de color al pasar el ratón */
}

/* LISTADO DE ARCHIVOS */
#preciosindescuentousuario {
    position: absolute;
    font-size: small;
    color: var(--dtf-mipedidodtf-precio-anterior-texto, #bb7878);
    font-weight: bold;
    z-index: 1000000;
    display: block;
    margin-top: -10px;
    width: 100%;
    text-align: center;
    background-color: var(--dtf-mipedidodtf-precio-anterior-fondo, #4a4a4b);
    right: 0px;
    text-decoration: line-through;
}

#preciofinal {
    margin-right: 10px;
    padding: 5px;
    color: inherit;
    font-weight: 700;
}

#preciopormetro {
    position: absolute;
    display: block;
    font-size: 15px;
    margin-right: 10px;
    margin-top: -70px;
    color: inherit;
    font-family: 'puntos';
    font-weight: 700;
}


.columna {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

#menupedidodtf {
    position: relative;
    min-height: 40px;
}

/* Contenedor principal (aplica estilos a tu clase existente) */
/* Contenedor principal */
.menupedido {
    display: inline-flex;
    /* Ícono y texto en línea */
    align-items: center;
    /* Centrado vertical */
    gap: 10px;
    /* Espaciado entre ícono y texto */
    cursor: pointer;
    color: var(--clr, #1e2a5e);
    /* Color del texto */
    font-weight: bold;
    /* Resalta el texto */
    font-size: 16px;
    /* Ajusta tamaño del texto */
}

/* Icono del menú (tres líneas horizontales) */
.menupedido-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Espaciado entre las líneas */
}

.menupedido-icon span {
    display: block;
    width: 16px;
    /* Ancho de las líneas */
    height: 2px;
    /* Altura de las líneas */
    background-color: #333;
    /* Color inicial (gris oscuro) */
    animation: menupedido-color 1.5s infinite ease-in-out;
}

.menupedido-icon::after {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: #939393;
    border-radius: 50%;
    animation: ping 1.5s infinite ease-out;
}

.no-ping::after {
    content: none !important;
    /* Elimina el contenido del pseudo-elemento */
    animation: none !important;
    /* Desactiva la animación */
}

.hover-1 {
    background: conic-gradient(#d5d5d5 0 0) var(--p, 0) / var(--p, 0) no-repeat;
    transition: .4s, background-position 0s;
}

.hover-1:hover {
    --p: 100%;
    color: #fff;
}

#filmlistaarchivos {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin: 2px 0;
    padding: 8px 13px 8px 10px;
    color: #8b8b8b;
    border: 1px solid #e2e8f0;
    border-bottom: 0px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    position: absolute;
    margin-top: -4px;
    background-color: white;
}


#filmlistaarchivos:hover {
    color: #000000;
    background: linear-gradient(135deg, #b9b9b9, #ededed);
    border-color: #ffb100;
    box-shadow: 0 7px 18px rgba(14, 116, 144, 0.2);
    transform: translateY(-1px);
}

#filmlistaarchivos:hover::after {
    transform: translateX(3px);
}

#filmlistaarchivos:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.3);
    outline-offset: 3px;
}

.mipedidodtf-titulo-lista {
    font-size: larger;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 12px 5px 8px;
    color: inherit;
    background: #fff;

}

.mipedidodtf-titulo-lista>.columna {
    width: auto;
}

.mipedidodtf-titulo-lista>.columna:first-child {
    order: 1;
    flex: 1 1 auto;
    justify-content: flex-start;
}

.mipedidodtf-titulo-lista>.columna:last-child {
    order: 2;
    flex: 0 1 auto;
    justify-content: flex-end;
}

.mipedidodtf-pie-lista {
    display: flex;
    width: 100%;
    padding: 0 0 5px 8px;
    margin-bottom: 10px;
    margin-top: 10px;
    color: inherit;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    background-image: linear-gradient(to right, #999999, #cccccc4a, #ffffff00);
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
    min-height: var(--dtf-mipedidodtf-pie-alto-minimo, 60px);
}

.mipedidodtf {
    position: relative;
    width: 100%;
    margin: 0 auto 40px;
    color: #5b5b5b;
    font-family: inherit;
    font-size: inherit;
    background: rgb(255 255 255);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 300;
    border: 0 solid #d0d0d0;
    border-left-width: 1px;
    border-radius: 0;
    overflow: visible;
}

.mipedidodtf-container {
    width: 100%;
    margin: 2px auto;
    padding: 0;
    background: transparent;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    border-radius: 0;
}

.mipedidodtf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 14px;
    padding: 16px;
    max-height: 330px;
    background: #f8fafc;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e2e8f0;
    border-top: 1px solid #e2e8f0;
}

/* Para navegadores WebKit (Chrome, Safari) */
.mipedidodtf-grid::-webkit-scrollbar {
    width: 10px;
}

.mipedidodtf-grid::-webkit-scrollbar-track {
    background-color: #e2e8f0;
    border-radius: 10px;
}

.mipedidodtf-grid::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background-clip: padding-box;
}

/* Personalización cuando se pasa el cursor sobre la barra de desplazamiento */
.mipedidodtf-grid::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

:where(.mipedidodtf) .image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 154px;
    padding: 30px 10px 28px;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(.mipedidodtf) .image-container:hover {
    transform: translateY(-3px);
    border-color: #38bdf8;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

:where(.mipedidodtf) .image-container:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.28);
    outline-offset: 2px;
}

:where(.mipedidodtf) .image-container img {
    width: 100%;
    height: 96px !important;
    object-fit: contain;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
}

:where(.mipedidodtf) .cuentaimagen {
    text-align: center;
    min-width: 28px;
    height: 28px;
    background-color: #0f172a;
    position: absolute;
    top: -8px;
    right: -3px;
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    line-height: 28px;
    padding: 2px 14px;
    border-radius: 5px;
    z-index: 10;
    font-weight: 100;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

:where(.mipedidodtf) .identificador-personalizado {
    position: absolute;
    top: -1px;
    left: -2px;
    max-width: calc(100% - 52px);
    padding: 4px 10px;
    color: #334155;
    background: #eaf6fc;
    border: 1px solid #bae6fd;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(.mipedidodtf) .dimensiones-imagen-subida {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 4px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    z-index: 11;
    text-align: center;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dimensiones-archivo {
    position: absolute;
    top: 23px;
    right: 20px;
    font-size: small;
}

/* Cambio de color y animación del contador al pasar por la imagen */

:where(.mipedidodtf) .image-container:hover .cuentaimagen {
    color: #ffffff;
    background: #0284c7;
    transform: scale(1.06);
}

#proximosprecios {
    margin-right: 10px;
    font-size: medium;
    width: 100%;
    display: block;
    visibility: hidden;
    justify-content: flex-end;
    min-height: 30px;
    line-height: 19px;
    color: inherit;
    font-family: 'dtfstore', monospace;
    font-size: var(--dtf-mipedidodtf-mensaje-tamano, 12px);
}

#multiplicador {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.check-dtf {
    accent-color: #2196f3;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 14px;
    margin-top: 2px;
}





/* FIN LISTADO DE ARCHIVOS */
/* etiquetas de descuento */
#tagdescuento {
    border-radius: 0 6px 30px 0;
    color: #fff;
    text-align: center;
    padding: 0.5px 23px;
    position: absolute;
    margin-top: -23px;
    left: 0px;
    font-size: 12px;
    background: #000;
    border-left: 5px solid gray;
    border-bottom: 3px solid gray;
    display: none;
    font-family: 'dtfstore';
}

#preciofinalsinoferta {
    display: none;
    position: absolute;
    color: var(--dtf-mipedidodtf-precio-sin-oferta-texto, #d3d3d3);
    font-weight: bold;
    text-decoration-line: line-through;
    font-size: small;
    top: 79px;
    right: -1px;
    background-color: rgba(0, 0, 0, 0.74);
    padding: 3px 20px 1px 20px;
    border-top: 2px solid var(--dtf-mipedidodtf-precio-sin-oferta-borde, gray);
    border-bottom-left-radius: 16px;
    text-align: right;
    border-bottom-right-radius: 16px;
    z-index: 598;
}

#cuadro_usuario {
    position: relative;
    display: flex;
    padding: 8px 40px 3px 22px;
    border-radius: 46px 0 0 0;
    background: linear-gradient(90deg, rgb(91 91 91) 32%, rgb(255 255 255 / 88%) 53%);
    font-family: 'dtfstore', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    color: #ff9800;
    margin-bottom: -5px;
    border: 1px solid #a9a9a9;
    box-shadow: none;
    overflow: hidden;
}

:where(#cuadro_usuario) .usuario_izq {
    flex: 1;
    padding: 10px;
    display: flex;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    background: transparent;
    text-transform: capitalize;
}

:where(#cuadro_usuario) .usuario_der {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #000000;
    font-size: 13px;
    font-weight: 400;
    background: transparent;
}

:where(#cuadro_usuario) .usuario_der_text {
    margin-right: 60px;
    text-align: center;
    z-index: 10;
}

:where(#cuadro_usuario) .tarifaplana {
    font-size: 18px;
    color: #ffffff;
    background-color: #ff5722;
    padding: 2px 5px;
    border: 0 solid transparent;
    border-radius: 5px;
    box-shadow: none;
    font-weight: 700;
    margin-top: 4px;
}

/* Circle Avatar Styles */
:where(#cuadro_usuario) .avatar_dtf {
    line-height: 0;
    /* remove line-height */
    display: inline-block;
    /* circle wraps image */
    margin: 5px;
    padding: 0;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    box-shadow: none;
    transition: linear 0.25s;
    height: 32px;
    width: 32px;
}

:where(#cuadro_usuario) .avatar_dtf img {
    border-radius: 50% !important;
}

:where(#cuadro_usuario) .avatar_dtf:hover {
    transition: ease-out 0.2s;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
    -webkit-transition: ease-out 0.2s;
}

:where(#cuadro_usuario) .des-user-ribbon {
    position: absolute;
    display: inline-block;
    top: 10px;
    right: 12px;
    max-width: 50px;
    color: #ffffff;
    z-index: 1;
    font-size: 18px;
    font-weight: 700;
    opacity: 1;
    pointer-events: auto;
    /* Permite interacción cuando está visible */
    transition: opacity 1.5s ease-in-out;
}

:where(#cuadro_usuario) .des-user-ribbon::after {
    position: absolute;
    top: -10px;
    right: -85px;
    content: "";
    height: 60px;
    width: 200px;
    transform: rotate(45deg);
    background: linear-gradient(45deg, #ff0000, #ff5e00, #ff8800, #b16a00, #ff7b00, #820027, #ff0000);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    z-index: -1;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}


@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* El panel usa posición fija en móvil: evitamos que la ampliación de escritorio
   provoque desplazamiento o scroll horizontal en pantallas estrechas. */
@media (max-width: 760px) {
    .dropdowndtf-menu {
        right: 6px;
        left: 6px;
        width: auto;
        border-radius: 7px;
    }
}


/* Barra que abre y cierra el menú del pedido.
   La clase barra-menu se añade sin retirar los selectores usados por JavaScript. */
#menupedidodtf {
    min-height: var(--dtf-barra-menu-alto-minimo, 40px);
    background: var(--dtf-barra-menu-contenedor-fondo, transparent);
    border: var(--dtf-barra-menu-contenedor-borde-grosor, 0) solid var(--dtf-barra-menu-contenedor-borde-color, transparent);
    border-radius: var(--dtf-barra-menu-contenedor-radio, 0);
    box-shadow: var(--dtf-barra-menu-contenedor-sombra, none);
}

#menupedidodtf .dropdowndtf.hover-1 {
    background: var(--dtf-barra-menu-hover-fondo, conic-gradient(#d5d5d5 0 0) var(--p, 0) / var(--p, 0) no-repeat);
}

:where(.btndtf).barra-menu {
    padding: var(--dtf-barra-menu-padding, 12px 16px 10px 9px);
    gap: var(--dtf-barra-menu-separacion, 10px);
    color: var(--dtf-barra-menu-texto, var(--clr, #1e2a5e));
    font-family: var(--dtf-barra-menu-tipografia, 'dtfstore', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: var(--dtf-barra-menu-tamano-texto, 16px);
    font-weight: var(--dtf-barra-menu-peso-texto, 700);
    line-height: var(--dtf-barra-menu-altura-linea, 1.5);
    background: var(--dtf-barra-menu-fondo, transparent);
    border-top: var(--dtf-barra-menu-borde-superior-grosor, 1px) solid var(--dtf-barra-menu-borde-color, #d0d0d0);
    border-left: var(--dtf-barra-menu-borde-izquierdo-grosor, 0) solid var(--dtf-barra-menu-borde-color, #d0d0d0);
    border-radius: var(--dtf-barra-menu-radio, 0);
    box-shadow: var(--dtf-barra-menu-sombra, none);
    transition: var(--dtf-barra-menu-transicion, 0.5s ease-in-out);
}

:where(.btndtf).barra-menu:hover {
    color: var(--dtf-barra-menu-hover-texto, var(--dtf-barra-menu-texto, var(--clr, #1e2a5e)));
    background: var(--dtf-barra-menu-boton-hover-fondo, transparent);
}

:where(.btndtf).barra-menu.open {
    color: var(--dtf-barra-menu-abierta-texto, var(--dtf-barra-menu-texto, var(--clr, #1e2a5e)));
    background: var(--dtf-barra-menu-abierta-fondo, transparent);
    box-shadow: var(--dtf-barra-menu-abierta-sombra, none);
}

.barra-menu .menupedido-icon {
    gap: var(--dtf-barra-menu-icono-separacion, 4px);
}

.barra-menu .menupedido-icon span {
    width: var(--dtf-barra-menu-icono-ancho, 16px);
    height: var(--dtf-barra-menu-icono-grosor, 2px);
    background-color: var(--dtf-barra-menu-icono-color, #333333);
    border-radius: var(--dtf-barra-menu-icono-radio, 0);
    animation: var(--dtf-barra-menu-icono-animacion, menupedido-color 1.5s infinite ease-in-out);
}

.barra-menu .menupedido-icon::after {
    width: var(--dtf-barra-menu-pulso-tamano, 40px);
    height: var(--dtf-barra-menu-pulso-tamano, 40px);
    background-color: var(--dtf-barra-menu-pulso-color, #939393);
    border-radius: var(--dtf-barra-menu-pulso-radio, 50%);
    animation: var(--dtf-barra-menu-pulso-animacion, ping 1.5s infinite ease-out);
}

.barra-menu.dropdowndtf-toggle::after {
    content: var(--dtf-barra-menu-flecha-contenido, "▽");
    width: var(--dtf-barra-menu-flecha-ancho, 10px);
    margin-left: var(--dtf-barra-menu-flecha-margen, 10px);
    color: var(--dtf-barra-menu-flecha-color, currentColor);
    font-size: var(--dtf-barra-menu-flecha-tamano, 1em);
}

.barra-menu.dropdowndtf-toggle.open::after {
    content: var(--dtf-barra-menu-cierre-contenido, "✕");
    color: var(--dtf-barra-menu-cierre-color, currentColor);
}

.barra-menu:focus-visible {
    outline: var(--dtf-barra-menu-focus-grosor, 2px) solid var(--dtf-barra-menu-focus-color, #5b7cfa);
    outline-offset: var(--dtf-barra-menu-focus-separacion, 2px);
}

:where(#cuadro_usuario) .des-user-ribbon.desactivado {
    opacity: 0;
    pointer-events: none;
    /* Evita interacción cuando está oculto */
}

/* fin de etiquetas de descuento */

#banderacalculo {
    position: absolute;
    padding: 10px;
    margin-top: -17px;
    color: #ffffff;
    font-weight: bold;
    font-size: small;
    background: rgb(35 35 35 / 74%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-top-left-radius: 8px;
    border-top-right-radius: 50px;
    padding-right: 40px;
    /* animation: parpadeoBlancoNegro 1.2s ease-in-out infinite alternate; */
}

@keyframes parpadeoBlancoNegro {
    0% {
        color: #ffffff;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }

    100% {
        color: #000000;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
}


/* cuadro de mensajes */

#mensajes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro */
    backdrop-filter: blur(5px);
    /* Aplicar desenfoque al fondo */
    display: none;
    /* Oculto por defecto */
    z-index: 1100;
    /* Para estar sobre el resto del contenido */
}

#contenidomensajes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 35px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1200;
    border-radius: 29px;
    border: 3px #8d8d8d dotted;
    backdrop-filter: blur(5px);
    color: #575757;
}

#titulomensajes {
    font-size: x-large;
    margin-top: -10px;
    font-weight: bold;
}

#mensaje img {
    display: block;
    max-width: 300px;
    margin: 0 auto 10px;
    /* Centrado y con margen inferior */
    border-radius: 5px;
    /* Opcional para esquinas redondeadas */
}

#mensaje p {
    margin: 0;
    text-align: justify;
    /* Opcional para texto alineado */
}

/* fin cuadro de mensajes */

/* cuadro de servicios */

#cuadroservicios {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#cuadroservicios.visible {
    opacity: 1;
    pointer-events: auto;
}

#contenidoservicio {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 35px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1200;
    border-radius: 29px;
    border: 3px #8d8d8d dotted;
    backdrop-filter: blur(5px);
    color: #575757;
    min-height: 20vh;
    min-width: 800px;
    display: flex;
    flex-direction: column;
    /* organiza título, contenido y footer en columna */
    justify-content: space-between;
    /* deja el footer abajo */
}

#tituloservicio {
    font-size: larger;
    font-weight: bold;
    margin-bottom: 6px;
    margin-top: -28px;
    border-bottom: 1px dotted blue;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#servicio {
    flex: 1;
    /* ocupa el espacio central */
    overflow-y: auto;
    /* si el contenido crece, permite scroll */
}

#footerservicio {
    text-align: right;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    height: 25px;
    align-items: center;
}

#confirmarservicios {
    background-color: #156b00;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 50px;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
}

#mostrarproductos {
    visibility: hidden;
}

#confirmarservicios:hover {
    background-color: #bdbdbd;
}


/* fin cuadro de mensajes */
#servicios {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mostrarservicio {
    background-color: #e5e5e5;
    padding: 0px 10px 0px 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    border-radius: 20px;
    font-size: small;
    color: black;
}

.mostrarservicio img {
    width: 20px;
    display: inline;
}

#servicioscheck {
    display: flex;
    justify-content: space-between;
    padding-bottom: 7px;
}

#serviciodecorte {
    display: none;
    align-items: center;
    gap: 10px;
}

.informacion_corte {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    font-size: small;
}

.atencionservicioimportante {
    color: red;
}

#atencion_servicios_tiulo {
    color: red;
}

#atencion_servicios {
    color: red;
    width: 800px;
    font-size: xx-small;
    text-align: justify;
}

#serviciodeplanchado {
    display: none;
    align-items: center;
    gap: 10px;
}

/* === Modal de productos de planchado === */
.modal_productos_planchado {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.navbarplanchado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dotted #e5e5e5;
}

#titulo_ventana_planchado {
    margin-top: 0;
    color: #010483;
    font-family: 'puntos';
    font-size: 17pt;

}

#precio_ventana_planchado {
    color: red;
    margin-top: 0;
    font-family: 'puntos';
    margin-right: 37px;
    font-size: 15pt;
}



.modal_productos_planchado_contenido {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--dtf-select-fondo, #fff);
    /* margin: 3% auto; */
    padding: 20px;
    border-radius: 10px;
    width: 95%;
    max-width: 900px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    min-width: 800px;
    min-height: 630px;
}

.cerrar_modal_productos_planchado {
    float: right;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
    margin-top: -10px;
}

.cerrar_modal_productos_planchado:hover {
    color: #000;
}

#lista_productos_planchado_usuario {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-height: 300px;
}

#textarea_observaciones_planchado {
    color: red;
    min-height: 90px;
}

#textarea_observaciones_planchado::placeholder {
    color: #0029ff;
}

.misfigurasselect {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-general {
    background-color: #ebffec73;
    padding: 5px;
    text-align: center;
    border-top: 3px solid green;
    border-bottom: 1px solid green;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-radius: var(--dtf-mipedidodtf-contador-radio, 5px 5px 0 0);
    font-family: 'puntos';
    font-size: x-large;
}




.producto-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f8f8;
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.producto-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.producto-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.producto-detalle {
    line-height: 1.4;
}

.precio-total {
    color: #2c3e50;
    font-weight: bold;
}

.tituloproductoplanchado {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    font-family: 'puntos';
    font-size: large;
    color: darkblue;
    border-bottom: 1px dotted;
}

#input_cantidad_planchado {
    width: 80px;
    padding: 4px;
    /* border: 1px solid #ff7171; */
    border-radius: 4px;
    text-align: center;
    font-family: 'lcd';
    color: #0029ff;
    background-color: #ffffff;
}













#productos_de_planchado {
    display: none;
}

/* Cuerpo dividido */
.modal_productos_planchado_cuerpo {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.columna_izquierda_productos {
    width: 45%;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    max-height: 400px;
    padding-right: 10px;
}

.columna_derecha_detalle {
    width: 55%;
    padding-left: 10px;
    height: 420px;
    overflow: auto;
    padding-right: 13px;
}

/* Lista de productos */
.lista_productos_planchado {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.producto_item_planchado {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.producto_item_planchado img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-right: 10px;
}

.producto_item_planchado:hover {
    background-color: #f5f5f5;
}

.producto_item_planchado.activo {
    background-color: #d9ebff;
    border-color: #8bb7ff;
}

/* Detalle del producto */
.detalle_producto_planchado>h4 {
    margin-top: 0;
    color: #2b1800;
    font-family: 'puntos';
    font-size: 14pt;
}

.detalle_producto_planchado ul {
    margin: 8px 0;
    padding-left: 18px;
}

.detalle_producto_planchado label {
    display: block;
    margin-bottom: 6px;
}

/* Botón confirmar */
.modal_acciones {
    margin-top: 20px;
    text-align: right;
}

.boton_confirmar {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.boton_confirmar:hover {
    background-color: #005f8d;
}

/* ribbons */

.ribbon-2 {
    position: absolute;
    inset: 36px -12px auto auto;
    padding: 0 10px 10px 25px;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 90% 90%, 0 90%, 15px 45%);
    background: #6f6f6f;
    box-shadow: 0 -10px 0 inset rgba(0, 0, 0, 0.33);
    color: #ffffff;
    z-index: 600;
}

/* fin ribbons */


#inputmultiplicador {
    height: 25px;
    width: 74px;
    border-radius: 0px;
    margin-left: 5px;
    text-align: center;
    font-weight: bold;
    font-family: monospace;
    background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em, linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
    text-align: center;
    padding-left: 22px;
}

#margen {
    height: 25px;
    width: 77px;
    border-radius: 0px;
    margin-left: 5px;
    text-align: center;
    font-weight: bold;
    font-family: monospace;
}


/* botones de menu desplegable */


.btndtf-secondary {
    border-top: 1px solid #d0d0d0;
    border-bottom: 0px solid #d0d0d0;
}

.btndtf-primary {
    color: #ffffff;
    /* Blanco */
    background-color: #007bff;
    /* Color primario */
    border-color: #007bff;
}

.dropdowndtf {
    position: relative;
}

.btndtf {
    display: flex;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    padding: 12px 16px 10px 9px;
    font-size: 16px;
    line-height: 1.5;
    transition: 0.5s ease-in-out;
    position: relative;
    cursor: pointer;
    font-family: 'dtfstore';
}

/* Flecha del botón */
.dropdowndtf-toggle::after {
    content: '▽';
    /* Flecha hacia abajo */
    display: inline-block;
    margin-left: 10px;
    transition: content 0.3s ease;
    width: 10px;
}

/* Cambiar a aspa (✕) cuando el menú esté visible */
.dropdowndtf-toggle.open::after {
    content: '✕';
    /* Aspa */
}

.dropdowndtf-menu {
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 500;
    display: none;
    margin: -1px 0 0;
    font-size: 10pt;
    color: #212529;
    text-align: left;
    background-color: #ededed;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0px;
    width: 100%;
    background: rgba(255, 255, 255);
    box-shadow: 0 4px 30px 11px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    border-left: 12px solid #575757;
    border-right: 5px solid #c5c5c5;
}

.dropdowndtf-item {
    text-decoration: none;
    display: flex;
    /* align-items: stretch; */
    justify-content: center;
    width: 235px;
    padding: 10px 15px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: 0.5s;
    cursor: pointer;
    text-align: center;
    background-color: #97ff9a;
    border-bottom-left-radius: 14px;
    border-top-right-radius: 14px;
    margin: auto;
}

.dropdowndtf-text {
    text-decoration: none;
    width: 300px;
    padding: 10px 15px;
    clear: both;
    font-weight: 400;
    color: #004993;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: 0.5s;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.dropdowndtf-item:hover {
    background-color: #040404ad;
    border-radius: 50px;
    color: white !important;
}

.dropdowndtf-item.active {
    background-color: #1e2a5e;
    color: #ffffff;
    /* Blanco */
}

/* fin botones de menu despleglable */
.menucontenido {
    min-width: 500px;
    display: flex;
    padding: 20px;
}

.menu-izq {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 300px;
    min-height: 400px;
}

.menu-der {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    /* justify-content: space-around; */
    padding: 10px;
    /* align-items: center; */
    min-height: 400px;
    /* align-content: flex-start; */
    border-left: 1px #dddddd dotted;
    margin-left: 10px;
}

.hrmenu {
    border: 0;
    width: 100%;
    display: flex;
    margin-top: 1px;
    margin-bottom: 1px;
    border-bottom: 1px solid #d7d5d5;
}

.separadormenu {
    display: block;
    border-bottom: 1px solid #d7d5d5;
    width: 100%;
    margin-left: 20px;
    font-family: monospace;
    font-size: small;
    color: gray;
    margin-top: 5px;
    margin-bottom: -5px;
}

.imagenmenu {
    height: auto;
    margin-right: 19px;
}

.textomenu {
    width: 100%;
}

.menubovina {
    display: flex;
}

.bordeimagen {
    border: 1px solid #cdcdcd;
}

.imagenmenu img {
    width: 80px !important;
    height: auto;
    background-color: #00000000 !important;
    border-bottom-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border: 4px #8d8d8d4a solid !important;
}

#contenedor-avisos {
    height: 110px;
    width: 100%;
    color: rgb(119, 0, 0);
    line-height: 11px;
    overflow: auto;
    padding: 6px 5px 4px 14px;
}

/* Estilo para la barra de desplazamiento en navegadores Webkit */
#contenedor-avisos::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#contenedor-avisos::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    /* Aplica borde redondeado a la barra de desplazamiento */
}

#contenedor-avisos::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
    /* Aplica borde redondeado a la pista de la barra */
}

.infoimportante {
    color: red;
    font-weight: bold;
    /* border-bottom: 1px solid; */
    display: block;
    margin-top: 10px;
}

#explicamenu {
    z-index: 10;
    max-height: 380px;
    overflow: auto;
    font-family: 'dtfstore';
    font-size: 13px;
    padding: 25px;
    width: 100%;
}

#explicamenu::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* boton de compra */
#botoncomprar {
    display: none;
    margin-top: 10px;
    position: absolute;
    margin-right: 6px;
    box-shadow: inset 0 1px 8px 0 #fff6af;
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    border-radius: 6px;
    border: 1px solid #ffaa22;
    cursor: pointer;
    color: #333333;
    font-family: 'puntos';
    font-size: 15px;
    font-weight: 700;
    padding: 3px 32px;
    text-decoration: none;
    text-shadow: 1px 1px 23px #ffee66;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#botoncomprar:hover {
    background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    color: #333333;
}

#botoncomprar:active {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Estándar */
}

#mensajenocomprar {
    font-weight: 700;
    color: red;
    margin-right: 10px;
    font-family: 'dtfstore';
    text-align: center;
    font-size: 12px;
}

#botoncomprar2 {
    box-shadow: inset 0px 1px 8px 0px #fff6af;
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    border-radius: 6px;
    border: 1px solid #000000;
    cursor: pointer;
    color: black;
    font-family: 'puntos';
    font-size: 20px;
    font-weight: bold;
    padding: 3px 32px;
    text-decoration: none;
    text-shadow: 1px 1px 23px #ffee66;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#botoncomprar2:hover {
    background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color: #ffab23;
}

#botoncomprar2:active {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: linear-gradient(to bottom, #ffa500 5%, #ff5623 100%);
}


/* fin boton de compra */



.tooltipdtf {
    position: absolute;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'dtfstore';
    font-size: 12px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 1000;
    display: none;
    /* Inicia oculto */
}

.tooltipdtf::after {
    content: '';
    position: absolute;
    top: 100%;
    /* Aparece justo debajo del tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* BARRA DE NAVEGACION INFERIOR */
#navbardtfstore {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffc800;
    color: #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1200;
    display: none;
}

.navbardtfstore-left,
.navbardtfstore-center,
.navbardtfstore-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.navbardtfstore-left {
    justify-content: flex-start;
}

.navbardtfstore-center {
    justify-content: center;
}

.navbardtfstore-right {
    justify-content: flex-end;
}

.navbardtfstore-logo {
    height: 30px I !important;
    max-width: 120px !important;
}

.navbardtfstore-text {
    font-size: 20px;
}

/* FIN BARRA DE NAVEGACION INFERIOR */

/* terminar pedido */

#terminarpedido {
    position: fixed;
    top: 0;
    height: 100vh;
    height: 100%;
    z-index: 800;
    min-width: 100%;
    overflow: hidden;
    background-color: rgb(255 255 255 / 61%);
    backdrop-filter: blur(10px);
    display: none;
}

/* Contenedor interno para la maquetación */
.terminar-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* centra verticalmente */
    align-items: center;
    /* centra horizontalmente */
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}


#terminarcabecera {
    font-size: 2rem;
    font-weight: 600;
    color: #676767;
    text-align: center;
    font-family: 'puntos';
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    max-width: 600px;
    width: 100%;
    align-items: center;
}

.titizq {
    display: flex;
    align-items: center;
}

.titder {
    display: flex;
    align-items: center;
}

.terminar_logo_tienda {
    width: 150px;
}

.terminar_nombre_pedido {
    color: #999999;
    font-family: 'puntos';
    margin-left: 20px;
    font-size: small;
    margin-bottom: 0px;
    text-transform: uppercase;
    position: absolute;
    margin-top: -10px;
    width: 100%;
    max-width: 530px;
    text-align: end;
}

.icono_terminar_cabecera {
    width: 29px;
    margin-right: 10px;
    margin-bottom: 8px;
}

.icono_terminar_detalles {
    width: 25px;
    margin-right: 10px;
    margin-bottom: 7px;
}

.icono_terminar {
    width: 20px !important;
    margin-right: 10px;
    margin-bottom: 5px;
    display: inline;
}

.icono_empaquetado_terminar {
    width: 22px;
    margin-right: 5px;
    cursor: help;
}

.terminarsoporte {
    margin-left: 5px;
    text-transform: capitalize;
}

.terminarcantidadproducto {
    position: absolute;
    padding: 0px 10px 0px 10px;
    border-radius: 20px;
    color: #0006ff;
    border: 1px solid #ff9900;
    backdrop-filter: blur(10px);
    font-family: 'puntos';
    min-width: 40px;
    text-align: center;
    margin-left: -10px;
    font-size: small;
    cursor: help;
}

.terminarprecioproducto {
    color: #002f89;
    background-color: #ffbd45;
    border-radius: 10px;
    margin-left: 10px;
    padding: 3px 10px 3px 10px;
    font-size: small;
}

/* --- TARJETA --- */
#terminarcontenido {
    width: 100%;
    max-width: 600px;
    background: #ffffff94;
    padding: 22px;
    padding-bottom: 30px;
    border-radius: 16px;
    box-shadow: 0 0 30px rgb(163 113 0);
    color: #000000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'dtfstore';
    backdrop-filter: blur(10px);
}

/* --- DETALLES & SERVICIOS SIN SCROLL --- */




#terminar_detalles,
#terminar_servicios {
    margin-bottom: 2px;
}

.terminarservicio {
    display: inline-flex;
    color: black;
}

.terminar_valor .mostrarservicio {
    background-color: #ffffff00;
    padding: 3px 10px 3px 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    border-radius: 0px;
    font-size: small;
    border: 0px solid #e7e7e7;
}

.terminarservicio .mostrarservicio {
    background-color: #ffffff00;
    padding: 0px 10px 3px 10px;
    margin-left: 10px;
    margin-bottom: 0px;
    border-radius: 0px;
    border: 0px solid #e7e7e7;
    font-size: medium;
    font-weight: bold;
    color: #000ca9;
}

.terminar_titulo .mostrarservicio {
    background-color: #ffffff00;
    padding: 3px 10px 3px 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    border-radius: 0px;
    font-size: small;
    border: 0px solid #e7e7e7;
}

.terminar_observaciones {
    font-family: 'pixel2';
    color: brown;
    font-size: small;
}

.titulo_productos {
    display: flex;
    align-items: center;
    color: black;
}

/* --- TITULOS --- */
.terminar_titulo {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 3px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.linea-multicolor-animada {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
    background-size: 400% 400%;
    animation: mover 20s linear infinite;
    margin-bottom: 10px;
}

@keyframes mover {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}




.terminar_label {
    color: #000000;
    font-weight: bold;
}

.terminaratributos {
    color: #6d6d6d;
    font-weight: bold;
    font-size: small;
}

/* --- LINEA --- */
.terminar_linea {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    margin: 10px 0;
}

/* --- LISTA DE PRODUCTOS CON SCROLL RESPONSIVE --- */
#terminar_productos_lista {
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 10px;
    max-height: 400px;
}

/* Scroll fino */
#terminar_productos_lista::-webkit-scrollbar {
    width: 6px;
}

#terminar_productos_lista::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

/* --- PRODUCTO --- */
.terminar_producto {
    display: flex;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    margin-bottom: 14px;
}

.terminar_producto:last-child {
    border-bottom: none;
}

.imagen_producto_terminar {
    width: 70px;
    height: 70px;
    object-fit: contain;
    background: var(--dtf-menu-tarjeta-fondo, #fff);
    border-radius: 8px;
}

/* --- BOTONES (FIJOS) --- */
#terminarbotones {
    position: sticky;
    bottom: 70px;
    display: flex;
    justify-content: center;
    gap: 22px;
    padding: 15px 0 5px;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 480px) {

    #terminarcabecera {
        font-size: 22px;
    }

    #terminarcontenido {
        padding: 16px;
        border-radius: 12px;
    }

    .terminar_producto img {
        width: 56px;
        height: 56px;
    }

    #terminarbotones {
        gap: 10px;
    }

    #terminarvolver,
    #terminarcomprar {
        padding: 6px 18px;
        font-size: 16px;
    }
}


#terminarvolver {
    box-shadow: inset 0px 1px 8px 0px #6b6b6b;
    background: linear-gradient(to bottom, #212121 5%, #393939 100%);
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #000000;
    cursor: pointer;
    color: black;
    font-family: 'puntos';
    font-size: 18px;
    padding: 3px 32px;
    text-decoration: none;
    text-shadow: 1px 1px 23px #ff6666;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: white;
}

#terminarvolver:hover {
    background: linear-gradient(to bottom, #000325 5%, #050e0e 100%);
    background-color: #000000;
}

#terminarcomprar {
    box-shadow: inset 0px 1px 8px 0px #fff6af;
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    border-radius: 6px;
    border: 1px solid #000000;
    cursor: pointer;
    color: black;
    font-family: 'puntos';
    font-size: 20px;
    font-weight: bold;
    padding: 3px 32px;
    text-decoration: none;
    text-shadow: 1px 1px 23px #ffee66;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#terminarcomprar:hover {
    background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color: #ffab23;
}

#terminarcomprar:active {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: linear-gradient(to bottom, #ffa500 5%, #ff5623 100%);
}


/* fin terminar pedido */









/* animaciones https://animista.net/play/attention/bounce */
.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out 3 both;
    animation: heartbeat 1.5s ease-in-out 3 both
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    10% {
        -webkit-transform: scale(.91);
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    17% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    33% {
        -webkit-transform: scale(.87);
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    10% {
        -webkit-transform: scale(.91);
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    17% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    33% {
        -webkit-transform: scale(.87);
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.jello-1 {
    -webkit-animation: jello-1 .8s linear both;
    animation: jello-1 .8s linear both
}

@-webkit-keyframes jello-1 {
    0% {
        -webkit-transform: skew(0deg 0deg);
        transform: skew(0deg 0deg)
    }

    30% {
        -webkit-transform: skew(25deg 25deg);
        transform: skew(25deg 25deg)
    }

    40% {
        -webkit-transform: skew(-15deg, -15deg);
        transform: skew(-15deg, -15deg)
    }

    50% {
        -webkit-transform: skew(15deg, 15deg);
        transform: skew(15deg, 15deg)
    }

    65% {
        -webkit-transform: skew(-5deg, -5deg);
        transform: skew(-5deg, -5deg)
    }

    75% {
        -webkit-transform: skew(5deg, 5deg);
        transform: skew(5deg, 5deg)
    }

    100% {
        -webkit-transform: skew(0deg 0deg);
        transform: skew(0deg 0deg)
    }
}

@keyframes jello-1 {
    0% {
        -webkit-transform: skew(0deg 0deg);
        transform: skew(0deg 0deg)
    }

    30% {
        -webkit-transform: skew(25deg 25deg);
        transform: skew(25deg 25deg)
    }

    40% {
        -webkit-transform: skew(-15deg, -15deg);
        transform: skew(-15deg, -15deg)
    }

    50% {
        -webkit-transform: skew(15deg, 15deg);
        transform: skew(15deg, 15deg)
    }

    65% {
        -webkit-transform: skew(-5deg, -5deg);
        transform: skew(-5deg, -5deg)
    }

    75% {
        -webkit-transform: skew(5deg, 5deg);
        transform: skew(5deg, 5deg)
    }

    100% {
        -webkit-transform: skew(0deg 0deg);
        transform: skew(0deg 0deg)
    }
}

.caer {
    -webkit-animation: caer .9s both;
    animation: caer .9s both
}

@-webkit-keyframes caer {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }
}

@keyframes caer {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    25%,
    55%,
    75%,
    87% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }
}

.vibrate-2 {
    -webkit-animation: vibrate-2 2s linear infinite both;
    animation: vibrate-2 2s linear infinite both
}

@-webkit-keyframes vibrate-2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    60% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes vibrate-2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    60% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.shake-vertical {
    -webkit-animation: shake-vertical .8s cubic-bezier(.455, .03, .515, .955) both;
    animation: shake-vertical .8s cubic-bezier(.455, .03, .515, .955) both
}

@-webkit-keyframes shake-vertical {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        background-color: #007bff;
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px)
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px)
    }
}

@keyframes shake-vertical {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px)
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px)
    }
}

.ping {
    -webkit-animation: ping .8s ease-in-out infinite both;
    animation: ping .8s ease-in-out infinite both
}

@-webkit-keyframes ping {
    0% {
        -webkit-transform: scale(.2);
        transform: scale(.2);
        opacity: .8
    }

    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }

    100% {
        -webkit-transform: scale(2.2);
        transform: scale(2.2);
        opacity: 0
    }
}

@keyframes ping {
    0% {
        -webkit-transform: scale(.2);
        transform: scale(.2);
        opacity: .8
    }

    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0
    }

    100% {
        -webkit-transform: scale(2.2);
        transform: scale(2.2);
        opacity: 0
    }
}

@-webkit-keyframes subirarriba {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes subirarriba {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

.subirarriba {
    -webkit-animation: .6s cubic-bezier(.39, .575, .565, 1) both subirarriba;
    animation: .6s cubic-bezier(.39, .575, .565, 1) both subirarriba
}

.bajarabajo {
    -webkit-animation: .5s cubic-bezier(.55, .085, .68, .53) both bajarabajo;
    animation: .5s cubic-bezier(.55, .085, .68, .53) both bajarabajo
}

@-webkit-keyframes bajarabajo {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1
    }

    100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1
    }
}

@keyframes bajarabajo {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1
    }

    100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        opacity: 1
    }
}

.latidorojo {
    animation: latidorojo 1s ease-in-out 3
}

@keyframes latidorojo {
    0% {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
        color: black
    }

    8% {
        transform: scale(1.15);
        animation-timing-function: ease-in;
        color: red
    }

    16% {
        transform: scale(1);
        animation-timing-function: ease-out;
        color: red
    }

    24% {
        transform: scale(1.12);
        animation-timing-function: ease-in;
        color: red
    }

    32% {
        transform: scale(1);
        animation-timing-function: ease-out;
        color: black
    }

    100% {
        transform: scale(1);
        color: black
    }
}

/* fin animaciones */


/* ==========================================================================
   Menu de proyecto
   Rediseño visual. Los selectores existentes se conservan porque forman parte
   del contrato con la capa JavaScript.
   ========================================================================== */
.dropdowndtf-menu {
    --dtf-menu-primary: #1e2a5e;
    --dtf-menu-primary-hover: #293a7d;
    --dtf-menu-accent: #5b7cfa;
    --dtf-menu-surface: #ffffff;
    --dtf-menu-surface-soft: #f7f8fc;
    --dtf-menu-border: #e4e7ef;
    --dtf-menu-text: #182033;
    --dtf-menu-muted: #697386;
    box-sizing: border-box;
    top: 100%;
    left: -7px;
    width: calc(100% + 14px);
    margin: 0;
    overflow: hidden;
    color: var(--dtf-menu-texto, var(--dtf-menu-text));
    font-family: var(--dtf-menu-tipografia, 'dtfstore', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: var(--dtf-menu-tamano-texto, 14px);
    line-height: 1.45;
    background: var(--dtf-menu-fondo, var(--dtf-menu-surface));
    border: var(--dtf-menu-borde-grosor, 3px) solid var(--dtf-menu-borde-color, rgba(118, 118, 118, 0.35));
    border-radius: var(--dtf-menu-radio, 7px);
    box-shadow: var(--dtf-menu-sombra, none);
    backdrop-filter: none;
    transform-origin: top center;
    will-change: opacity, transform;
}

.dropdowndtf-menu.dtf-menu-abierto {
    animation: dtf-menu-entrada 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dropdowndtf-menu.dtf-menu-cerrando {
    pointer-events: none;
    animation: dtf-menu-salida 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes dtf-menu-entrada {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dtf-menu-salida {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-7px) scale(0.988);
    }
}

.dropdowndtf-menu,
.dropdowndtf-menu * {
    box-sizing: border-box;
}

.dropdowndtf-menu::before {
    content: none;
    display: none;
}

.dropdowndtf-menu .menucontenido {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
    min-width: 0;
    padding: 24px;
    gap: 24px;
}

.dropdowndtf-menu .menu-izq {
    width: auto;
    min-width: 0;
    min-height: 0;
    align-content: flex-start;
    gap: 10px;
}

.dropdowndtf-menu .menu-der {
    width: auto;
    min-width: 0;
    min-height: 320px;
    margin: 0;
    padding: 4px 0 4px 24px;
    align-content: flex-start;
    border-left: 1px solid var(--dtf-menu-border);
}

.dropdowndtf-menu .dropdowndtf-text {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    gap: 2px;
    align-items: center;
    color: var(--dtf-select-texto, var(--dtf-menu-text));
    white-space: normal;
    border-radius: 9px;
}

.dropdowndtf-menu .dropdowndtf-text>svg,
.dropdowndtf-menu .dropdowndtf-item>svg,
.dropdowndtf-menu .dropdowndtf-item-servicios>svg,
.dropdowndtf-menu .dropdowndtf-item-eliminar>svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-right: 8px !important;
}

.dropdowndtf-menu #referenciaproyecto {
    flex: 1 1 calc(50% - 5px);
    width: calc(50% - 5px);
    min-height: 44px;
    padding: 12px 14px;
    color: var(--dtf-menu-primary);
    background: #f0f3ff;
    border: 1px solid #dce3ff;
}

.dropdowndtf-menu .dropdowndtf-item {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 11px 16px;
    align-items: center;
    color: #fff;
    font-weight: 650;
    letter-spacing: 0.01em;
    background: var(--dtf-menu-primary);
    border: 1px solid var(--dtf-menu-primary);
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(30, 42, 94, 0.18);
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.dropdowndtf-menu #subirarchivomenu-multiple {
    flex: 1 1 calc(50% - 5px);
    width: calc(50% - 5px);
}

.dropdowndtf-menu .dropdowndtf-item:hover {
    color: #fff !important;
    background: var(--dtf-menu-primary-hover);
    border-radius: 10px;
    box-shadow: 0 7px 16px rgba(30, 42, 94, 0.24);
    transform: translateY(-1px);
}

.dropdowndtf-menu .dropdowndtf-item:active {
    transform: translateY(0);
}

.dropdowndtf-menu .dropdowndtf-item:focus-visible,
.dropdowndtf-menu .dropdowndtf-item-servicios:focus-visible,
.dropdowndtf-menu .dropdowndtf-item-eliminar:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--dtf-menu-color-acento, #5b7cfa) 30%, transparent);
    outline-offset: 2px;
}

.dropdowndtf-menu .separadormenu {
    width: 100%;
    margin: 8px 0 0;
    padding: 9px 2px 7px;
    color: var(--dtf-menu-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--dtf-menu-border);
}

.dropdowndtf-menu #formulario_dtfstore {
    width: 100%;
    display: grid;
    gap: 8px;
}

.dropdowndtf-menu #filmsel,
.dropdowndtf-menu #anchosmmenusel,
.dropdowndtf-menu #perfilcolormmenusel {
    position: relative;
    width: 100% !important;
    min-width: 0;
}

.dropdowndtf-menu .select-dtfstore,
.dropdowndtf-menu .select-anchos-dtfstore,
.dropdowndtf-menu .select-perfiles-dtfstore {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 42px 0 14px;
    color: var(--dtf-select-texto, var(--dtf-menu-text));
    font-family: var(--dtf-menu-tipografia, 'dtfstore', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 44px;
    text-align: left;
    text-overflow: ellipsis;
    background-color: var(--dtf-select-fondo, #fff);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--dtf-select-flecha, #657087) 50%),
        linear-gradient(135deg, var(--dtf-select-flecha, #657087) 50%, transparent 50%),
        linear-gradient(to left, var(--dtf-select-flecha-fondo, #f4f6fa) 42px, transparent 42px);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 13px) 19px,
        100% 0;
    background-size: 5px 5px, 5px 5px, 100% 100%;
    background-repeat: no-repeat;
    border: 1px solid var(--dtf-select-borde, #d7dce7);
    border-radius: var(--dtf-select-radio, 9px);
    outline: none;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.dropdowndtf-menu .select-dtfstore:hover,
.dropdowndtf-menu .select-anchos-dtfstore:hover,
.dropdowndtf-menu .select-perfiles-dtfstore:hover {
    background-color: var(--dtf-select-hover-fondo, #fbfcff);
    border-color: var(--dtf-select-hover-borde, #aeb7c8);
}

.dropdowndtf-menu .select-dtfstore:focus,
.dropdowndtf-menu .select-anchos-dtfstore:focus,
.dropdowndtf-menu .select-perfiles-dtfstore:focus {
    background-color: var(--dtf-select-hover-fondo, #fff);
    border-color: var(--dtf-select-focus-borde, var(--dtf-menu-accent));
    box-shadow: var(--dtf-select-focus-sombra, 0 0 0 3px rgba(91, 124, 250, 0.16));
}

.dropdowndtf-menu .select-dtfstore:disabled,
.dropdowndtf-menu .select-anchos-dtfstore:disabled,
.dropdowndtf-menu .select-perfiles-dtfstore:disabled {
    color: var(--dtf-select-deshabilitado-texto, #929bad);
    background-color: var(--dtf-select-deshabilitado-fondo, #f4f5f8);
    border-color: var(--dtf-select-deshabilitado-borde, #e1e4ea);
    box-shadow: none;
    cursor: not-allowed;
}

.dropdowndtf-menu .select-dtfstore option,
.dropdowndtf-menu .select-anchos-dtfstore option,
.dropdowndtf-menu .select-perfiles-dtfstore option {
    color: var(--dtf-menu-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    background: #fff;
}

.dropdowndtf-menu #filmsel>span,
.dropdowndtf-menu #anchosmmenusel>span,
.dropdowndtf-menu #perfilcolormmenusel>span {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    align-items: center;
    color: var(--dtf-menu-text);
    font-weight: 600;
    background: #f5f6f9;
    border: 1px solid var(--dtf-menu-border);
    border-radius: 9px;
}

.dropdowndtf-menu #explicamenu {
    width: 100%;
    max-height: 360px;
    padding: 18px;
    color: var(--dtf-menu-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    background: var(--dtf-menu-surface-soft);
    border: 1px solid var(--dtf-menu-border);
    border-radius: 12px;
}

.dropdowndtf-menu #explicamenu:empty {
    display: none;
}

.dropdowndtf-menu .inferiormenu {
    min-height: 68px;
    padding: 12px 24px;
    align-items: center;
    gap: 12px;
    background: var(--dtf-menu-surface-soft);
    border-top: 1px solid var(--dtf-menu-border);
}

.dropdowndtf-menu #abrirservicios {
    min-width: 0;
}

.dropdowndtf-menu .dropdowndtf-item-servicios,
.dropdowndtf-menu .dropdowndtf-item-eliminar {
    width: auto;
    min-width: 160px;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 15px;
    align-items: center;
    font-weight: 600;
    border-radius: 9px;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dropdowndtf-menu .dropdowndtf-item-servicios {
    color: var(--dtf-servicios-texto, var(--dtf-menu-text)) !important;
    background: var(--dtf-servicios-fondo, #fff);
    border: 1px solid var(--dtf-servicios-borde, #d7dce7);
}

.dropdowndtf-menu .dropdowndtf-item-servicios:hover {
    color: var(--dtf-servicios-hover-texto, var(--dtf-menu-color-principal, var(--dtf-menu-primary))) !important;
    background: var(--dtf-servicios-hover-fondo, var(--dtf-menu-color-acento-suave, #f0f3ff));
    border-color: var(--dtf-servicios-hover-borde, #cbd5ff);
    border-radius: 9px;
    transform: translateY(-1px);
}

.dropdowndtf-menu .dropdowndtf-item-eliminar {
    color: var(--dtf-eliminar-texto, #b42318) !important;
    background: var(--dtf-eliminar-fondo, #fff);
    border: 1px solid var(--dtf-eliminar-borde, #f0b9b5);
}

.dropdowndtf-menu .dropdowndtf-item-eliminar:hover {
    color: var(--dtf-eliminar-hover-texto, #fff) !important;
    background: var(--dtf-eliminar-hover-fondo, #b42318);
    border-color: var(--dtf-eliminar-hover-borde, #b42318);
    border-radius: 9px;
    transform: translateY(-1px);
}

.dropdowndtf-menu #iconosinferiores {
    width: 100%;
    margin: 2px 0 0;
    justify-content: flex-start;
    gap: 8px;
}

.dropdowndtf-menu .iconoinferior {
    margin: 0;
    padding: 7px;
    background: #fff;
    border: 1px solid var(--dtf-menu-border);
    border-radius: 9px;
}

@media (max-width: 760px) {
    .dropdowndtf-menu {
        position: fixed;
        top: 16px;
        right: 16px;
        bottom: auto;
        left: 16px;
        width: auto;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        border-radius: 14px;
    }

    .dropdowndtf-menu::before {
        display: none;
    }

    .dropdowndtf-menu .menucontenido {
        grid-template-columns: 1fr;
        padding: 18px;
        gap: 16px;
    }

    .dropdowndtf-menu .menu-der {
        min-height: 0;
        padding: 16px 0 0;
        border-top: 1px solid var(--dtf-menu-border);
        border-left: 0;
    }

    .dropdowndtf-menu #referenciaproyecto,
    .dropdowndtf-menu #subirarchivomenu-multiple {
        flex-basis: 100%;
        width: 100%;
    }

    .dropdowndtf-menu .inferiormenu {
        padding: 12px 18px;
        flex-wrap: wrap;
    }

    .dropdowndtf-menu #abrirservicios,
    .dropdowndtf-menu .dropdowndtf-item-servicios,
    .dropdowndtf-menu .dropdowndtf-item-eliminar {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .dropdowndtf-menu.dtf-menu-abierto,
    .dropdowndtf-menu.dtf-menu-cerrando {
        animation-duration: 1ms;
    }

    .dropdowndtf-menu .dropdowndtf-item,
    .dropdowndtf-menu .dropdowndtf-item-servicios,
    .dropdowndtf-menu .dropdowndtf-item-eliminar {
        transition: none;
    }
}


/* Acabado de aplicación para el panel de configuración */
.dropdowndtf-menu {
    --dtf-app-bg: var(--dtf-menu-area-fondo, #f3f6fb);
    --dtf-app-card: var(--dtf-menu-tarjeta-fondo, #ffffff);
    --dtf-app-line: var(--dtf-menu-tarjeta-borde, #e5eaf2);
    --dtf-app-blue: var(--dtf-menu-color-acento, #3157d5);
    --dtf-app-copy: var(--dtf-menu-texto, #172033);
}

.dropdowndtf-menu .menucontenido {
    grid-template-columns: minmax(380px, 0.82fr) minmax(420px, 1.18fr);
    align-items: start;
    gap: 18px;
    padding: 18px;
    background: var(--dtf-app-bg);
}

.dropdowndtf-menu .menu-izq,
.dropdowndtf-menu .menu-der {
    background: var(--dtf-app-card);
    border: 1px solid var(--dtf-app-line);
    border-radius: var(--dtf-menu-tarjeta-radio, 14px);
    box-shadow: var(--dtf-menu-tarjeta-sombra, 0 1px 2px rgba(25, 38, 68, 0.03));
}

.dropdowndtf-menu .menu-izq {
    position: relative;
    padding: 28px 16px 16px;
    gap: 10px;
}

.dropdowndtf-menu .menu-der {
    min-height: 0;
    margin: 0;
    padding: 16px;
    border-left: 1px solid var(--dtf-app-line);
}

.dropdowndtf-menu #referenciaproyecto {
    position: absolute;
    top: -14px;
    left: 16px;
    z-index: 2;
    flex: none;
    width: auto;
    max-width: calc(100% - 32px);
    height: 29px;
    min-height: 29px;
    padding: 5px 11px;
    gap: 6px;
    color: var(--dtf-referencia-texto, #66738a);
    font-size: 10px;
    line-height: 1;
    background: var(--dtf-referencia-fondo, #fff);
    border-color: var(--dtf-referencia-borde, #dbe2ed);
    border-radius: var(--dtf-referencia-radio, 999px);
    box-shadow: var(--dtf-referencia-sombra, 0 3px 10px rgba(25, 38, 68, 0.08));
}

.dropdowndtf-menu #referenciaproyecto>svg {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
    color: var(--dtf-referencia-icono, var(--dtf-app-blue));
}

.dropdowndtf-menu #referenciaproyecto b {
    display: inline;
    max-width: 100%;
    overflow: hidden;
    color: var(--dtf-referencia-valor, var(--dtf-app-copy));
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdowndtf-menu #subirarchivomenu-multiple {
    flex: 1 1 100%;
    width: 100%;
    height: 52px;
    min-height: 52px;
    background: var(--dtf-subida-archivos-fondo, #172554);
    color: var(--dtf-subida-archivos-texto, #fff);
    border-color: var(--dtf-subida-archivos-borde, var(--dtf-subida-archivos-fondo, #172554));
    border-radius: var(--dtf-subida-archivos-radio, 11px);
    box-shadow: var(--dtf-subida-archivos-sombra, 0 8px 18px rgba(23, 37, 84, 0.2));
}

.dropdowndtf-menu #subirarchivomenu-multiple:hover {
    color: var(--dtf-subida-archivos-texto, #fff) !important;
    background: var(--dtf-subida-archivos-hover, color-mix(in srgb, var(--dtf-subida-archivos-fondo, #172554) 86%, #000));
    border-color: var(--dtf-subida-archivos-hover, color-mix(in srgb, var(--dtf-subida-archivos-fondo, #172554) 86%, #000));
    box-shadow: 0 10px 22px rgba(23, 37, 84, 0.25);
}

.dropdowndtf-menu .separadormenu {
    margin-top: 6px;
    padding: 11px 2px 8px;
    color: var(--dtf-seccion-titulo-color, #7d889b);
    border-bottom-color: var(--dtf-seccion-linea-color, var(--dtf-app-line));
    font-size: 10px;
    letter-spacing: 0.13em;
}

.dropdowndtf-menu #formulario_dtfstore {
    gap: 8px;
}

.dropdowndtf-menu #filmmmenu,
.dropdowndtf-menu #anchosmmenu,
.dropdowndtf-menu #perfilcolor {
    min-height: 48px;
    padding: 0;
    gap: 10px;
    background: transparent;
}

.dropdowndtf-menu #filmmmenu>svg,
.dropdowndtf-menu #anchosmmenu>svg,
.dropdowndtf-menu #perfilcolor>svg {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 10px;
    color: var(--dtf-control-icono-color, #28499f);
    background: var(--dtf-control-icono-fondo, var(--dtf-menu-color-acento-suave, #edf2ff));
    border: 1px solid var(--dtf-control-icono-borde, #d6e0fb);
    border-radius: var(--dtf-control-icono-radio, 11px);
    box-shadow: var(--dtf-control-icono-sombra, 0 2px 5px rgba(40, 73, 159, 0.08));
}

.dropdowndtf-menu .select-dtfstore,
.dropdowndtf-menu .select-anchos-dtfstore,
.dropdowndtf-menu .select-perfiles-dtfstore {
    height: 46px;
    padding-left: 15px;
    color: var(--dtf-select-texto, #202b3f);
    font-size: 13px;
    font-weight: 650;
    background-color: var(--dtf-select-fondo, #fbfcfe);
    border-color: var(--dtf-select-borde, #dfe5ef);
    border-radius: var(--dtf-select-radio, 10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dropdowndtf-menu .select-dtfstore:hover,
.dropdowndtf-menu .select-anchos-dtfstore:hover,
.dropdowndtf-menu .select-perfiles-dtfstore:hover {
    background-color: var(--dtf-select-hover-fondo, #fff);
    border-color: var(--dtf-select-hover-borde, #aebbd0);
}

.dropdowndtf-menu #margenmenu,
.dropdowndtf-menu #multiplicadormenu {
    min-height: 48px;
    padding: 9px 11px;
    color: var(--dtf-configuracion-texto, var(--dtf-app-copy)) !important;
    font-size: 12px;
    font-weight: 600;
    background: var(--dtf-configuracion-fondo, #f8fafc);
    border: 1px solid var(--dtf-configuracion-borde, var(--dtf-app-line));
    border-radius: var(--dtf-configuracion-radio, 10px);
}

.dropdowndtf-menu #margenmenu {
    flex: 1 1 calc(50% - 5px);
    width: calc(50% - 5px);
}

.dropdowndtf-menu #multiplicador {
    flex: 1 1 calc(50% - 5px);
    width: calc(50% - 5px);
}

.dropdowndtf-menu #multiplicadormenu {
    width: 100%;
}

.dropdowndtf-menu #margenmenu>svg,
.dropdowndtf-menu #multiplicadormenu>svg {
    color: var(--dtf-configuracion-icono, var(--dtf-app-blue));
}

.dropdowndtf-menu #margen,
.dropdowndtf-menu #inputmultiplicador {
    width: 58px;
    height: 30px;
    margin-left: auto;
    padding: 3px 6px;
    color: var(--dtf-input-texto, var(--dtf-app-copy));
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    background: var(--dtf-input-fondo, #fff);
    border: 1px solid var(--dtf-input-borde, #d6deea);
    border-radius: var(--dtf-input-radio, 7px);
    box-shadow: none;
}

.dropdowndtf-menu #explicamenu {
    max-height: none;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.dropdowndtf-menu #explicamenu:not(:empty) {
    display: block;
    min-height: 150px;
}

.dropdowndtf-menu #explicamenu .menubovina,
.dropdowndtf-menu #explicamenu>.menubovina {
    padding: 14px;
    color: var(--dtf-informacion-texto, var(--dtf-app-copy));
    background: var(--dtf-informacion-fondo, #f8fafc);
    border: 1px solid var(--dtf-informacion-borde, var(--dtf-app-line));
    border-radius: var(--dtf-informacion-radio, 11px);
}

.dropdowndtf-menu .imagenmenu img {
    width: 64px !important;
    padding: 3px;
    background: var(--dtf-informacion-imagen-fondo, #fff) !important;
    border: 1px solid var(--dtf-informacion-imagen-borde, #dfe5ef) !important;
    border-radius: var(--dtf-informacion-imagen-radio, 10px) !important;
    box-shadow: 0 3px 8px rgba(25, 38, 68, 0.08);
}

.dropdowndtf-menu .infoimportante {
    margin-top: 12px;
    padding: 9px 11px;
    color: var(--dtf-aviso-texto, #a3332a);
    font-size: 12px;
    background: var(--dtf-aviso-fondo, #fff6f4);
    border-left: 3px solid var(--dtf-aviso-borde, #e05245);
    border-radius: var(--dtf-aviso-radio, 7px);
}

.dropdowndtf-menu #contenedor-avisos {
    height: auto;
    min-height: 0;
    margin-top: 6px;
    padding: 4px 11px 8px;
    color: var(--dtf-aviso-texto, #7f302b);
    line-height: 1.45;
}

.dropdowndtf-menu #iconosinferiores {
    padding-top: 2px;
}

.dropdowndtf-menu .iconoinferior {
    opacity: 0.72;
    transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dropdowndtf-menu .iconoinferior:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(25, 38, 68, 0.1);
}

.dropdowndtf-menu .inferiormenu {
    min-height: 64px;
    padding: 10px 18px;
    background: var(--dtf-menu-pie-fondo, #fff);
    border-top-color: var(--dtf-menu-pie-borde, var(--dtf-app-line));
}

.dropdowndtf-menu #iconosinferiores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 9px;
    width: 100%;
    margin: 4px 0 0;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.dropdowndtf-menu #iconosinferiores:empty {
    display: none;
}

.dropdowndtf-menu .iconoinferior {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 8px 10px;
    color: #334155;
    background: #ffffff;
    border: 1px solid #dbe3ec;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    opacity: 1;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease,
        transform 160ms ease, box-shadow 160ms ease;
}

.dropdowndtf-menu .iconoinferior svg {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.14));
}

.dropdowndtf-menu #iconosinferiores>.iconoinferior img {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 4px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
}

.dropdowndtf-menu #iconosinferiores>.pixelcolornew {
    min-height: 58px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.dropdowndtf-menu #iconosinferiores>.pixelcolornew::after {
    content: "\203A";
    flex: 0 0 auto;
    margin-left: auto;
    color: #0284c7;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: transform 160ms ease;
}

.dropdowndtf-menu #iconosinferiores>.pixelcolornew:hover::after {
    transform: translateX(3px);
}

.dropdowndtf-menu .iconoinferior-texto {
    min-width: 0;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdowndtf-menu .iconoinferior:hover {
    color: #0f172a;
    background: #f0f9ff;
    border-color: #7dd3fc;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.12);
}

.dropdowndtf-menu .iconoinferior:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.28);
    outline-offset: 2px;
}

.dropdowndtf-menu .dropdowndtf-item-servicios,
.dropdowndtf-menu .dropdowndtf-item-eliminar {
    min-height: 42px;
    border-radius: 10px;
}

@media (max-width: 900px) {
    .dropdowndtf-menu .menucontenido {
        grid-template-columns: 1fr;
        padding-right: 10px;
        padding-left: 10px;
    }

    .dropdowndtf-menu .menu-der {
        width: 100%;
    }

    .dropdowndtf-menu .inferiormenu {
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 560px) {

    .dropdowndtf-menu #subirarchivomenu-multiple,
    .dropdowndtf-menu #margenmenu,
    .dropdowndtf-menu #multiplicador {
        flex-basis: 100%;
        width: 100%;
    }

    .dropdowndtf-menu #referenciaproyecto {
        width: auto;
        max-width: calc(100% - 32px);
    }
}