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

/*NUMERACIÓN DE TITULOS Y PARRAFOS*/

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



            /********************* 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: secció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; }

    /* H2 invisible pero en DOM para que el contador CSS siga incrementando */
    .boton_ts h2 {
        visibility: hidden;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    /* H3: flujo natural sin saltos forzados */
    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; }

    /* Evitar párrafos y listas partidos (widows/orphans) */
    .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, .ph3ej { break-inside: avoid-page; }

    /* datospedido — ocultar interactivos */
    .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; }
}


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


                            /*************** INICIO TRANSPARENCIAS *********************/

#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;
}

.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));
}

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


.carruseles{
    height: 100%;
    width: 2000%;                /*************** el ancho del 100% se multiplica por el numero de transparencias ************************/
    display: flex;
}

.transparencias {
    width: calc(100% / 20);         /*************************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;
    top: 50%;
    background-color: transparent;
    border-radius: 50%;
    padding: 18px;
    cursor: pointer;
    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;
    top: 50%;
    background-color: transparent;
    right: 1%;
    

    border-radius: 50%;
    padding: 18px;
    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;
    align-items: center;
    position: relative;
    z-index: -2;}

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


/****************** 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*/
    font-size: 0.65rem;
    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;
    line-height: 1.5em;
    text-align: center;
    margin: 0.8em;

    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, .datospedido4, .datospedido4a, .datospedido5, .datospedido5a, .datospedido6, .datospedido6a, .datospedido7, .datospedido7a, .datospedido8, .datospedido8a, .datospedido9, .datospedido9a, .datospedido10, .datospedido10a {

    border-radius: 8px;
    background: rgba(52, 73, 94, 0.10);
    border: 3px solid #34495e;
    box-shadow: 0 0 0 3px rgba(52,73,94,0.18), inset 0 0 16px rgba(52,73,94,0.08);
    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 { /*DATOS VENDEDOR, defino los cuadrados usando como marco la imagen*/
    
    width: 32%;
    height: 15%;
    top: 1%;
    left: 1%;
    
       
}


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

.datospedido3 { /*Numero y serie factura, *defino los cuadrados usando como marco la imagen*/
    
    width: 22%;
    height: 7%;
    top: 18%;
    left: 1%;
    
  
}


.datospedido4 { /*FECHA DE EXPEDICIÓN, defino los cuadrados usando como marco la imagen*/
    
    width: 13%;
    height: 9%;
    top: 15%;
    left: 32%;
}

.datospedido5 { /*Descripción y datos operación, defino los cuadrados usando como marco la imagen*/
    
    width: 31%;
    height: 26%;
    top: 30%;
    left: 14%;
    
}


.datospedido6 { /*PRECIO UNITARIO, defino los cuadrados usando como marco la imagen*/
    
    width: 12%;
    height: 26%;
    top: 30%;
    left: 50%;
    
}


.datospedido7 { /*DESCRIPCIÓN DE LA MERCANCIA, defino los cuadrados usando como marco la imagen*/
    
    width: 11%;
    height: 26%;
    top: 30%;
    left: 72%;
    
}



.datospedido8 { /*UNIDADES SOLICITADAS, defino los cuadrados usando como marco la imagen*/
    
    width: 8%;
    height: 14%;
    top: 82%;
    left: 1%;
    
}
.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: 12%;
    height: 15%;
    top: 82%;
    left: 66%;
    
    
}
/*.datospedido9a { /*IMPORTE TOTAL, defino los cuadrados usando como marco la imagen*/
    
/*    width: 300px; /*ancho cuadrado*/
/*    height: 40px; /*alto elemento*/
/*    top: 775px;
    bottom: 0px;
    left: 580px;
    right: 0px;
    
}*/

.datospedido10 { /*PERSONA RESPONSABLE,defino los cuadrados usando como marco la imagen*/
    
    width: 13%;
    height: 15%;
    top: 82%;
    left: 76%;
    
}

@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%;}
}