#hoja, .pdf-container, .pagina, .encabezado, .subencabezado, 
.informacion_empresa, .fila_items, .fila_precios, .totales_precios, 
.contenedor_datosadicionales {
    background-color: #ffffff !important;
}
/* Configuración del contenedor principal para la hoja tamaño carta */


#hoja {
    width: 181.9mm; /* Ancho carta */
    min-height: 279.4mm; /* Altura carta */
    margin: 0 auto; /* Centrar la hoja */


    box-sizing: border-box;

    position: relative; /* Necesario para posicionar elementos hijos absolutos */
    background-color: rgb(255, 255, 255);
}


.pdf-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: rgb(255, 255, 255);
}



.pagina {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.08); /* Sombra sutil */;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
}


/* Estilo del encabezado principal */
.encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background-color: rgb(255, 255, 255);
}

.pdf-container .pagina .encabezado .titulos_cotizacion h1 {
    font-size: 40px;
    margin: 0;
    font-weight: 700;
    color: #103291;
    background-color: rgb(255, 255, 255);

}


.titulos_cotizacion h1 {
    font-size: 40px;
    margin: 0;
    font-weight: 700;
    color: #103291;
    background-color: rgb(255, 255, 255);
}




.logo_kusami img {
    position: absolute; /* Posición absoluta en relación a la hoja */
    top: 17mm; /* Ajusta el espacio desde la parte superior */
    left: 150mm; /* Ajusta el espacio desde el borde izquierdo */
    max-width: 50mm; /* Tamaño máximo del logo */
    z-index: 10; /* Asegura que el logo esté encima de otros elementos */
    background-color: rgb(255, 255, 255);
    
}

/* Subencabezado */
.subencabezado {
    margin-top: 2px;
    
    background-color: rgb(255, 255, 255);
    padding: 8px 8px 8px 8px;

    
    
}

.subencabezado > div {
    display: grid;
    grid-template-columns: 25% 75%; /* Dividir cada fila interna en 25% y 75% */
    gap: 10px; /* Espaciado entre las columnas */
    align-items: center; /* Alinear verticalmente los contenidos */
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: rgb(255, 255, 255);

}

.subencabezado p{
    margin:3px;
    font-size: 17px;
    line-height: 17px;
    font-weight: 600;
    text-align: left;
    color: #103291;
    background-color: rgb(255, 255, 255);

}

.subencabezado span{

    color: black;
    line-height: 17px;
    font-weight: 500;
    background-color: rgb(255, 255, 255);
}

/* Alineación específica para el cuarto párrafo */
.subencabezado p {
 
    text-align: right; /* Alinea el cuarto párrafo a la derecha */

}

.subencabezado p:nth-child(4) {
    margin-top: 10px;
}

.subencabezado p:nth-child(4) span {
    font-weight: 500;
}



.informacion_empresa {
    background-color: rgb(255, 255, 255);
    padding: 8px 8px 8px 8px;
    border: solid 2px #103291;
    border-radius: 5px;
    
    background-color: rgb(255, 255, 255);
    
}

.informacion_empresa > div {
    display: grid;
    grid-template-columns: 15% 85%; /* Dividir cada fila interna en 25% y 75% */
    gap: 10px; /* Espaciado entre las columnas */
    align-items: center; /* Alinear verticalmente los contenidos */
    margin-top: 0px;
    margin-bottom: 0px;

}

.informacion_empresa h2 {
    font-size: 19px;
    font-weight: 700;
    
    color: #103291;
    margin-top: 5px;
    margin-bottom: 5px;
    
}

.informacion_empresa p {
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    margin:2px;
    color: #103291;

}
.informacion_empresa span {

    font-weight: 500;
    color: black;


}

h3 {
    
    font-size: 25px;
    font-weight: 800;
    text-align:  center;
    color: #103291;
    background-color: rgb(255, 255, 255);
    margin-top: 25px;
}



/* Encabezado de los ítems */
.encabezado_items {
    display: grid;
    grid-template-columns: 5% 25% 50% 20%; /* Anchos proporcionales */
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    background-color: #103291;
    color: white;
    padding: 5px 0;
    border-bottom: 2px solid #ddd;
}

/* Filas de los ítems */
.fila_items {
  display: grid;
  grid-template-columns: 5% 25% 50% 20%;
  align-items: center;
  padding: 5px 0;
  text-align: left;
  border-bottom: 2px solid #9baed1;
  background-color: #fff;
}

/* Celdas: permitir que el contenido pueda encoger y envolver */
.fila_items > div{
  display:flex;
  align-items:flex-start;
  padding:5px;
  line-height:1.5;
  min-width:0;                 /* <-- clave en contenedores flex */
}

/* Estas dos columnas deben poder encoger y envolver */
.fila_items .nombre_item,
.fila_items .descripcion_item{
  min-width:0;                 /* <-- sin esto, no hay wrap */
  flex:1 1 auto;
  display:block;               /* <-- texto fluye mejor que en flex */
}

/* El nodo real del texto: guionado y mantener saltos de línea */
.fila_items .texto_hyph{
  display:block;
  white-space:pre-wrap;        /* conserva \n de tu descripción */
  hyphens:manual;              /* usaremos soft-hyphens */
  -webkit-hyphens:manual;
  word-break:normal;
  overflow-wrap:break-word;    /* respaldo para tokens enormes */
}

/* Referencias Item */
.referencias_item {
    display: flex; /* Usa Flexbox para alinear los elementos */
    flex-direction: column;
    justify-content: space-between; /* Espaciado uniforme entre los contenedores */
    align-items: center; /* Alineación vertical centrada */
    gap: 15px; /* Espacio entre las imágenes */
    padding: 10px; /* Espaciado interno opcional */
}

/* Contenedor de imágenes dentro de referencias_item */
.referencias_item .contenedor_imagen {
    

    width: 130px; /* Ancho fijo opcional */
    height: 130px; /* Altura fija opcional */
    display: flex; /* Asegura que el contenido interno (la imagen) esté alineado */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
}

/* Imágenes dentro de los contenedores */
.referencias_item .contenedor_imagen img {
    max-width: 100%; /* Asegura que la imagen no exceda el contenedor */
    max-height: 100%; /* Ajusta la altura máxima al contenedor */
    object-fit: contain; /* Ajusta la imagen dentro del contenedor sin distorsión */
}



/* Encabezado de precios */
.encabezado_precios {
    display: grid;
    grid-template-columns: 5% 55% 6% 17% 17%; /* Proporciones según las columnas */
    font-size: 16px;
    font-weight: 500;
    text-align: center; /* Centra el texto horizontalmente solo en el encabezado */
    background-color: #103291; /* Color de fondo del encabezado */
    color: white;
    padding: 3px 0;
    border-bottom: 2px solid #ddd;
    
}

/* Filas de precios */
.fila_precios {
    display: grid;
    grid-template-columns: 5% 55% 6% 17% 17%; /* Debe coincidir con el encabezado */
    align-items: center; /* Centra verticalmente los contenidos */
    padding: 3px 0;
    border-bottom: 2px solid #9baed1; /* Borde inferior estándar */
    background-color: rgb(255, 255, 255);
}


/* Celdas individuales dentro de las filas */
.fila_precios > div {
    display: flex; /* Flexbox para alineación */
    align-items: center; /* Centrado vertical */
    padding: 5px; /* Espaciado interno */
    line-height: 20px;
    font-weight: 500;
    background-color: rgb(255, 255, 255);
}

/* Alineación específica por columna */
.fila_precios .n_item {
    justify-content: center; /* Centra horizontalmente */
    text-align: center;
}

.fila_precios .nombre_item {
    justify-content: flex-start; /* Alinea a la izquierda */
    text-align: left;
}

.fila_precios .cantidad_item {
    justify-content: center; /* Centra horizontalmente */
    text-align: center;
}

.fila_precios .precio_item,
.fila_precios .precio_total_item {
    justify-content: flex-end; /* Alinea a la derecha */
    text-align: right;
}

/* Totales (forma parte de la misma grid) */
.totales_precios {
    display: grid;
    grid-template-columns: 5% 55% 6% 17% 17%;  /* Igual a las filas de precios */
    align-items: stretch; /* Asegura que todos los hijos se estiren a la misma altura */
    font-size: 16px;
    font-weight: bold;
    border-top: 1px solid white; /* Borde superior blanco (invisible) */
    border-bottom: 1px solid white; /* Borde inferior blanco (invisible) */
    background-color: rgb(255, 255, 255);
}

/* Estilo para las celdas de los totales */
.totales_precios > div {
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: flex-end; /* Alinea horizontalmente todo a la derecha */
    text-align: right; /* Alinea el texto dentro de las celdas a la derecha */
    height: 100%; /* Ocupa el 100% del contenedor padre */
    padding: 2px;
    background-color: rgb(255, 255, 255);
}

/* Bordes invisibles (blancos) para las primeras columnas */
.totales_precios > div:nth-child(1),
.totales_precios > div:nth-child(2),
.totales_precios > div:nth-child(3) {
    border-top: 1px solid white; /* Borde superior blanco (invisible) */
    border-bottom: 1px solid white; /* Borde inferior blanco (invisible) */
}

/* Bordes visibles para las últimas columnas (Precio Unitario y Total) */
.totales_precios > div:nth-child(4),
.totales_precios > div:nth-child(5) {
    border-bottom: 2px solid #9baed1; /* Borde inferior */
    justify-content: flex-end; /* Alinea los valores a la derecha */
}

.totales_precios > div:nth-child(4) {
    color:#103291;
}

/* Contenedor padre */
.contenedor_datosadicionales {
    display: flex; /* Activa Flexbox */
    justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    gap: 5px; /* Espacio horizontal entre los dos divs */
    margin-top: 20px;
    background-color: rgb(255, 255, 255);
     
}

/* Estilo de los contenedores individuales */
.contenedor_datosadicionales > div {


    padding: 5px; /* Espaciado interno */
    border: 1px solid #ffffff; /* Borde opcional */
    border-radius: 5px; /* Bordes redondeados opcionales */
    background-color: rgb(255, 255, 255);

}

.contenedor_datosadicionales > div h3 {

    font-size: 20px;
}





/* Datos de transferencia */
.datos_transferencia {
    background-color: rgb(255, 255, 255);
    padding: 8px 8px 8px 8px;
    border: solid 1px #103291;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 380px;
    height: 140px;
    background-color: rgb(255, 255, 255);
    
    
}

.datos_transferencia > div {
    font-size: 15px;

    display: grid;
    grid-template-columns: 45% 55%; /* Dividir cada fila interna en 25% y 75% */

    
    align-items: center; /* Alinear verticalmente los contenidos */
    line-height: 14px;
    background-color: rgb(255, 255, 255);


}


.datos_transferencia p{
    margin:2px;
    font-size: 15px;
    line-height: 16px;
    font-weight: 600;
    text-align: left;
    color: #103291;

}

.datos_transferencia span{

    color: black;
}







/* Información del cotizador */
.informacion_cotizador {
        display: flex;
        justify-content: center;
        flex-direction: column;
    
        background-color: rgb(255, 255, 255);
        padding: 8px 8px 8px 8px;
        border: solid 1px #103291;
        border-radius: 5px;
        margin-bottom: 10px;
        width: 300px;
        height: 140px;
        background-color: rgb(255, 255, 255);
        
        

}

.informacion_cotizador > div {
    font-size: 15px;

    display: grid;
    grid-template-columns: 30% 70%; /* Dividir cada fila interna en 25% y 75% */

    
    align-items: center; /* Alinear verticalmente los contenidos */
    line-height: 14px;
    gap: 5px;
    background-color: rgb(255, 255, 255);

}

/* Texto dentro de información del cotizador */
.informacion_cotizador p {
    margin: 3px; /* Espacio entre párrafos */
    font-size: 15px; /* Tamaño de fuente */
    line-height: 15px; /* Altura de línea */
    font-weight: 600; /* Negrita */
    text-align: left; /* Alineación izquierda */
    color: #103291; /* Color del texto */
}

/* Estilo del texto resaltado (span) */
.informacion_cotizador span {
    color: black; /* Color negro para los valores */
}