/*NUMERACIÓN DE TITULOS Y PARRAFOS*/

body{
    counter-reset: capitulo 0 seccion;
    position: absolute;
    z-index: -2;} /*inicia la numeración del tema*/


/* Elementos solo visibles al imprimir — ocultos en pantalla */
.print_cabecera { display: none; }

/*modificar los botones del cuestionario para que se adapten a estar al lado del titulo*/

/********************* CONFIGURACIÓN DE LA IMPRESION DEL TEMA ******************************/

@media print {

    /* Suprimir cabeceras automáticas del navegador */
    @page {
        size: 8.27in 11.69in;
        margin: 0.6cm 2cm 2cm 2cm;

        @top-left   { content: ""; }
        @top-center { content: ""; }
        @top-right  { content: ""; }

        @bottom-center {
            content: "webadministrativa.es";
            font-size: 11pt;
            color: #444;
        }
        @bottom-right {
            content: "Página " counter(page) " de " counter(pages);
            font-size: 8pt;
            color: #666;
        }
    }

    /* Cabecera impresa: Facturación + nombre del tema */
    .print_cabecera {
        display: block;
        margin-top: 0;
        margin-bottom: 10px;
    }
    .print_seccion {
        font-size: 13pt;
        font-weight: normal;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }
    .print_titulo_tema {
        font-size: 18pt;
        font-weight: bold;
        color: black;
        margin-top: 4px;
        text-align: center;
    }

    /* Ocultar navegación, modal y proyector */
    #botonsubiralmenu  { display: none; }
    header             { display: none; }
    footer             { display: none; }
    #modal_overlay     { display: none; }
    .contenedor        { display: none; }
    #boton_ts          { padding-top: 0; }
    .ts_1_wrapper      { display: none; }
    .ts_1              { display: none !important; }

    .datospedido_1, .datospedido_1a, .datospedido_2, .datospedido_2a,
    .datospedido_3, .datospedido_3a, .datospedido_4, .datospedido_4a,
    .datospedido_5, .datospedido_5a, .datospedido_6, .datospedido_6a,
    .datospedido_7, .datospedido_7a, .datospedido_8, .datospedido_8a,
    .datospedido_9, .datospedido_9a, .datospedido_10, .datospedido_10a { display: none; }

    /* H2 y línea separadora: se muestran normalmente */

    /* H3: sin salto forzado, flujo natural */
    h3 { page-break-before: auto; }

    /* No partir párrafos, listas ni títulos entre páginas */
    p, li, h3, h4, h5 { page-break-inside: avoid; }
    h3, h4 { page-break-after: avoid; } /* título siempre pegado a su contenido */

    /* Evitar párrafos y listas partidos */
    .p { widows: 3; orphans: 3; }

    .lih3, .lih3cp, .lih3cpcl, .lih3cpclcp, .lih3cpclcpcl { widows: 3; orphans: 3; }
    .lih4, .lih4cp, .lih4cpcl, .lih4cpclcp                { widows: 3; orphans: 3; }
    .lih5, .lih5cp                                         { widows: 3; orphans: 3; }

    /* Imágenes no partidas entre páginas */
    .img, .container { break-inside: avoid-page; }
}


/********************* FIN IMPRESION DEL TEMA ******************************/


/*************** INICIO TRANSPARENCIAS — MODAL *********************/

#modal_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#modal_overlay.overlay_visible {
    opacity: 1;
    pointer-events: all;
}

.contenedor
{
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    width: 96%;
    max-width: 1500px;
    height: 54vw;
    max-height: 90vh;
    opacity: 0;
    pointer-events: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 16px 48px 0px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.contenedor_visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: all;
}


  
.documentospreviosalafacturas_visible{margin-top: 50%;transition: .2s all linear;}      /*************** lo que se baja el inicio del tema **********************/


.carruseles{
    height: 100%;
    width: 700%;                /*************** el ancho del 100% se multiplica por el numero de transparencias ************************/
    display: flex;
    /*border: solid thin red;*/
    /*border: solid green 6px;*/

}

.transparencias {
    width: calc(100% / 7);         /*************************se divide por el numero de transparencias *************************/
    height: 100%;
}

.transparencias img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
    padding: 2px;

 }

 .btn-left
 
 {
    display: flex;
    position:absolute;
    /*font-size: 2.5rem;*/
    top: 50%;
    background-color: transparent;
    border-radius: 50%;
    padding: 18px;
    /*font-weight: 600;*/
    cursor: pointer;
    /*color: orange;*/
    transform: translate(0,-50%);
    transition: .5s ease;
    user-select: none;
    z-index: 1;
    left:1%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    -webkit-user-drag: none;
    background-image: url(../Imagenes/btn_left_azul.png);

 }

 .btn-right
 
 {
    display: flex;
    position:absolute;
    /*font-size: 2.5rem;*/
    top: 50%;
    background-color: transparent;
    right: 1%;
    

    border-radius: 50%;
    padding: 18px;
    /*font-weight: 600;*/
    cursor: pointer;
    color: orange;
    transform: translate(0,-50%);
    transition: .5s ease;
    user-select: none;
    z-index: 1;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    -webkit-user-drag: none;
    background-image: url(../Imagenes/btn_right_azul.png);

 }

 

 .btn-right:hover{background-image: url(../Imagenes/btn_right_seleccionado.png);}
 .btn-left:hover {background-image: url(../Imagenes/btn_left_seleccionado.png);}



.boton_ts {
    display: flex;
    /*border: red solid 1px;*/ 
    align-items: center;
    position: relative;
    z-index: -2;}

.boton_ts_visible{padding-top: 50%; transition: .2s all linear;}





.ts_1_wrapper
{
    display: inline-block;
}

.ts_1
{
    cursor: pointer;
    margin-left: 16px;
    -webkit-user-drag: none;
    height: 31px;
    width: 69px;
    margin-top: 10px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.ts_1:hover
{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 69px;
    -webkit-user-drag: none;
    background-image: url(../Imagenes/botonproyectorwing2.png);
    transform: scale(1.07) translateY(-3px);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.ts_1_visible {

    /*height: 38px;*/
    /*width: 81px;*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: 69px;
    background-image: url(../Imagenes/botonproyectorwing2.png);
   /*lo que se baja la imagen una vez mostradas las transparencias, tiene que coincidir con documentospreviosalafacturas_visible*/
    
    /* margin-top: 50%; 
    transition: .2s all linear; */
    margin-bottom: 1px;

    
}



/****************** FIN TRANSPARENCIAS ********************/





.datospedido { /*trabajamos con toda la lista para ponerla en una fila ajustada al numero total de cuadros*/

    position: absolute; /*para que el hover los detecte sin que afecte la superposición del iframe, todo lo que es abosolute puede ordenarse desde el fondo hacia la parte más proxima con z-index. Y si no es absolute, no cuenta y se queda atras, como le pasa al iframe*/
    /*margin-top: 2.5%;*/
    font-size: 0.7rem;
    width: 14%;
    height: 706px;
    
}


.datospedido_1, .datospedido_1a, .datospedido_2, .datospedido_2a, .datospedido_3, .datospedido_3a, .datospedido_4, .datospedido_4a, .datospedido_5,.datospedido_5a, .datospedido_6,.datospedido_6a, .datospedido_7,.datospedido_7a, .datospedido_8,.datospedido_8a, .datospedido_9,.datospedido_9a, .datospedido_10, .datospedido_10a {
    /*esto afecta a los botones*/

    list-style: none;
    width: 89%;
    max-height: 70px;
    padding: 0.5em 0.7em;
    text-align: center;

    background-color: #ffffff;
    color: #34495e;
    border: 1.5px solid #34495e;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(52,73,94,0.18);

    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
                box-shadow 0.2s ease;
}


.datospedido_1:hover, .datospedido_1a:hover, .datospedido_2:hover,.datospedido_2a:hover, .datospedido_3:hover,.datospedido_3a:hover, .datospedido_4:hover,.datospedido_4a:hover, .datospedido_5:hover,.datospedido_5a:hover, .datospedido_6:hover,.datospedido_6a:hover, .datospedido_7:hover,.datospedido_7a:hover, .datospedido_8:hover,.datospedido_8a:hover, .datospedido_9:hover,.datospedido_9a:hover, .datospedido_10:hover, .datospedido_10a:hover {

    background-color: #34495e;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(52,73,94,0.35);

} /*esto afecta a los botones al pasar el ratón*/

.datospedido1, .datospedido1a, .datospedido2, .datospedido2a, .datospedido3, .datospedido3a, .datospedido31, .datospedido4, .datospedido4a, .datospedido5, .datospedido5a, .datospedido6, .datospedido6a, .datospedido7, .datospedido7a, .datospedido8, .datospedido8a, .datospedido9, .datospedido9a, .datospedido10, .datospedido10a {

    opacity: 0.7;
    border-radius: 20px;
    background: none;
    border: 5px solid #34495e;
    position: absolute; /*en función de la imagen que es relative*/
    visibility: hidden;

}/* esto afecta a todos cuadrados que estan en el fondo del albarán y pedido*/

.datospedido1 { /* id="datospedido1" DATOS VENDEDOR, defino los cuadrados usando como marco la imagen*/
    
    width: 35%;
    height: 15%;
    top: 9%;
    
    left: 1%;
    
    
           
       
}

.datospedido1a { /*defino los cuadrados usando como marco la imagen*/
    
    width: 30%;
    height: 16%;
    top: 3%;
    left: 1%;
   
}


.datospedido2 { /*id="datospedido2" DATOS COMPRADOR, defino los cuadrados usando como marco la imagen*/
    
    width: 35%;
    height: 15%;
    top: 10%;
    left: 50%;
    
    
}
    
.datospedido2a { /*defino los cuadrados usando como marco la imagen*/
    
    width: 35%;
    height: 15%;
    top: 10%;
    left: 50%;
    
}

.datospedido3 { /*LUGAR DE ENTREGA, *defino los cuadrados usando como marco la imagen*/
    
    width: 25%;
    height: 4%;
    
    top: 37%;
    /* bottom: 0px; */
    left: 2%;
    /* right: 0px;*/
    
    
}

.datospedido3a { /*LUGAR DE ENTREGA, defino los cuadrados usando como marco la imagen*/
    
    width: 14%;
    height: 7%;
    top: 33%;
    left: 19%;
    
}
.datospedido31 { /* id="datospedido31" LUGAR DE ENTREGA defino los cuadrados usando como marco la imagen*/
    
    width: 35%;
    height: 7%;
    top: 13%;
    /* bottom: 0px; */
    left: 1%;
    /* right: 0px;*/
    
}


.datospedido4 { /*FECHA DE EMISIÓN, defino los cuadrados usando como marco la imagen*/
    
    width: 13%;
    height: 7%;
    top: 27%;
    
    left: 13%;
    
    
}
.datospedido4a { /*defino los cuadrados usando como marco la imagen*/
    
    width: 10%;
    height: 7%;
    top: 33%;
    left: 2%;
    
    
}
.datospedido5 { /*Nº DE PEDIDO, defino los cuadrados usando como marco la imagen*/
    
    width: 10%;
    height: 7%;
    top: 27%;
    
    left: 4%;
    
    
}
.datospedido5a { /*defino los cuadrados usando como marco la imagen*/
    
    width: 32%;
    height: 21%;
    top: 44%;
    left: 14%;
    
}
.datospedido6 { /*FORMA DE ENVÍO, defino los cuadrados usando como marco la imagen*/
    
    width: 25%;
    height: 4%;
    top: 34%;
    
    left: 2%;
    
    
}
.datospedido6a { /*UNIDADES ENTREGADAS, defino los cuadrados usando como marco la imagen*/
    
    width: 10%;
    height: 21%;
    top: 44%;
    left: 46%;
   
}

.datospedido7 { /*DESCRIPCIÓN DE LA MERCANCIA, defino los cuadrados usando como marco la imagen*/
    
    width: 32%;
    height: 18%;
    top: 47%;
    
    left: 14%;
    
    
}

.datospedido7a { 
    
    width: 61%;
    height: 7%;
    top: 92%;
    left: 2%;
    
} 

.datospedido8 { /*UNIDADES SOLICITADAS, defino los cuadrados usando como marco la imagen*/
    
    width: 10%;
    height: 18%;
    top: 47%;
    
    left: 46%;
    
    
}
.datospedido8a { /*PRECIO UNIDAD, defino los cuadrados usando como marco la imagen*/
    
    width: 10%;
    height: 21%;
    top: 44%;
    left: 56%;
    
}

.datospedido9 { /*OBSERVACIONES, defino los cuadrados usando como marco la imagen*/
    
    width: 59%;
    height: 5%;
    top: 94%;
    left: 2%;
    
}
.datospedido9a { /*IMPORTE TOTAL, defino los cuadrados usando como marco la imagen*/
    
    width: 33%;
    height: 7%;
    top: 91%;
    left: 64%;
    
    
}

.datospedido10 { /*PERSONA RESPONSABLE,defino los cuadrados usando como marco la imagen*/
    
    width: 36%;
    height: 4%;
    top: 40%;
    left: 2%;
    
}

@media  (max-width: 1024px){

    
    .datospedido 
    {
        
        height: 560px;
    }

    
       
    
    
    
    
    
    
}

@media  (max-width: 767px){

    
    .datospedido 
    {
        
        height: 475px;
    }
       
    .datospedido_1, .datospedido_1a, .datospedido_2, .datospedido_2a, .datospedido_3, .datospedido_3a, .datospedido_4, .datospedido_4a, .datospedido_5,.datospedido_5a, .datospedido_6,.datospedido_6a, .datospedido_7,.datospedido_7a, .datospedido_8,.datospedido_8a, .datospedido_9,.datospedido_9a, .datospedido_10, .datospedido_10a {
        
        /*line-height: 3.5em; /*para chrome y firefox*/
        line-height: 2.6em; /*espacio entre las letras de los botones*/
        /*padding:1.3em;*/
        
    }

    .btn-left{left: 0%;background-size: 90%;}
    .btn-right{right: 0%;background-size: 90%;}
    
    
    
    
    
}

@media  (max-width: 500px)
{
    .btn-left{left: 0%;background-size: 60%;}
    .btn-right{right: 0%;background-size: 60%;}
}