/* Estilos generales */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Contenedor principal de la página */
.document-container {
    background-color: #ffffff;
    width: 100%;
    max-width: 800px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* --- Estilos de la Cabecera --- */
.header-top {
    display: flex;
    justify-content: space-between;
    /* ESTO ES CLAVE: centra verticalmente el logo y el texto */
    align-items: center; 
    margin-bottom: 0px;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Logo */
.logo-container img {
    /* Ajustamos el tamaño del logo para que haga buen contraste con el texto */
    width: 230px; 
    height: auto;
}

/* Información de la empresa (Derecha) */
.company-info {
    text-align: center;
    /* Aumentamos el tamaño de fuente para que se vea del mismo bloque que el logo */
    font-size: 11px; 
    margin-right: 13px;
    margin-bottom: 80px;
    color: #000;
}

.company-info p {
    margin: 5px 0;
    font-weight: bold;
}

/* --- Estilos del Título --- */
.header-title {
    text-align: center;
    margin-top: -100px;
}

.header-title h1 {
    font-size: 32px;
    margin: 50px 0 10px 0;
    color: #000;
}

/* Clase para el número en rojo */
.numero-rojo {
    color: #ff0000;
}

.header-title .fecha {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}
/* --- Contenedor Proveedor y Referencia --- */
/* --- Contenedor Proveedor y Referencia --- */
.torso-top {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

/* Esto une las dos cajas en un solo bloque flexbox */
.cajas-unidas {
    display: flex;
    width: 100%;
    border: 2px solid black; 
    box-sizing: border-box; /* AGREGA ESTO para que el borde no sume ancho extra */
}

/* Caja del Proveedor (Izquierda) */
.proveedor-box {
    padding: 10px;
    width: 50%; /* Ocupa exactamente la mitad */
    border-right: 2px solid black; /* Funciona como la línea divisoria central */
    box-sizing: border-box;
}

.proveedor-box strong {
    font-size: 14px;
}

.proveedor-box .prov-text {
    font-size: 10px;
    display: inline-block;
    margin-top: 2px;
}

/* Caja de Referencia (Derecha) */
.referencia-box {
    padding: 10px;
    text-align: center;
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; /* AGREGA ESTO para forzar el centrado horizontal sin el <br> */
}

.referencia-box strong {
    font-size: 14px;
}

.ref-numero {
    color: #ff0000;
    font-size: 50px;
    font-weight: bold;
    display: inline-block;
    margin-top: 5px;
}

/* --- Contenedor del Cliche --- */
.cliche-container {
    margin-left: 50%; /* Lo empuja para que empiece justo a la mitad del documento */
    width: 50%;       /* Limita su ancho a la mitad derecha */
    display: flex;
    justify-content: center; /* Lo centra perfectamente debajo de "REFERENCIA" */
    margin-top: 5px;
}

.cliche-box {
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.check-icon {
    border: 2px solid black;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}

/* --- Tabla Principal de Productos --- */
.orden-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    text-align: center;
    border: 2px solid black;
    box-sizing: border-box; /* AGREGA ESTO para alinearla perfecto con la caja de arriba */
}

.orden-tabla th, .orden-tabla td {
    border: 2px solid black;
    padding: 12px 5px;
    font-size: 14px;
}
.orden-tabla td {
    /* (Tus otros estilos aquí, como bordes, padding, etc.) */
    vertical-align: middle; /* <-- ¡Esta es la clave para la celda! */
    text-align: center;
}

.orden-tabla th {
    font-weight: normal; /* En la imagen no parecen estar en negrita gruesa */
}

.rojo {
    color: #ff0000;
    font-weight: bold;
}

/* --- Sección Inferior: Observaciones y Totales --- */
.torso-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: flex-start;
}

/* Caja de Observaciones */
.observaciones-box {
    border: 2px solid black;
    padding: 10px;
    width: 45%;
    font-size: 10px;
    min-height: 80px;
    /* ESTA LÍNEA ES LA CLAVE: Empuja el cuadro hacia abajo */
    margin-top: 65px; 
    margin-left: 50px;
}

.observaciones-box strong {
    font-size: 12px;
}

.observaciones-box p {
    margin: 10px 0 0 0;
    line-height: 1.4;
}

/* Tabla de Totales */
.totales-box {
    width: 35%; /* Controla el ancho de los totales */
}

.totales-tabla {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid black;
    font-size: 16px;
}

.totales-tabla td {
    border: 2px solid black;
    padding: 8px 12px;
}

/* Alineamos la columna izquierda al final y la derecha normal */
.totales-tabla td:first-child {
    text-align: right;
    width: 55%;
}

.totales-tabla td:last-child {
    text-align: center;
}
/* --- AGREGA TODO ESTO AL FINAL DE TU CSS --- */
/* Esto obliga a la tabla a respetar los anchos exactos de la imagen */
.orden-tabla th:nth-child(1) { width: 10%; } /* CANTIDAD */
.orden-tabla th:nth-child(2) { width: 34%; } /* DESCRIPCION */
.orden-tabla th:nth-child(3) { width: 12%; } /* CLAVE */
.orden-tabla th:nth-child(4), 
.orden-tabla th:nth-child(5), 
.orden-tabla th:nth-child(6) { width: 8%; }  /* ANCHO, LARGO, ALTO */
.orden-tabla th:nth-child(7) { width: 8%; }  /* P.U. */
.orden-tabla th:nth-child(8) { width: 12%; } /* IMPORTE */

/* =========================================
   ESTILOS DE LA SECCIÓN DE ENTREGA (FINAL)
   ========================================= */

.entrega-box {
    border: 2px solid black;
 width: 80%; /* Reduce el ancho al 80% del espacio disponible */
    margin-top: 30px;
    margin-left: auto; /* Centra el cuadro horizontalmente */
    margin-right: auto; /* Centra el cuadro horizontalmente */
    padding: 25px 27px; /* Da espacio interno: arriba/abajo 25px, lados 20px */
    font-size: 13px; /* Tamaño de letra legible */
    text-align: left;
    background-color: #ffffff;
}

.entrega-box p {
    margin: 0 0 25px 0; /* Crea el espacio en blanco entre cada línea */
    
    line-height: 1.4;
}

/* Este truco quita el margen del último párrafo para que 
   el espacio de abajo quede exactamente igual al de arriba */
.entrega-box p:last-child {
    margin-bottom: 0;
}

.entrega-box strong {
    font-size: 13px;
    font-weight: bold;
}

/* =========================================
   ESTILOS DINÁMICOS E INPUTS
   ========================================= */

/* Hace que los inputs y textareas parezcan texto estático */
.input-invisible {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    text-align: center;
    box-sizing: border-box;
    font-size: inherit;
    resize: none; 
    
    /* ESTO ES LO NUEVO: Le quita el espacio muerto de los costados */
    padding: 0 !important;
    margin: 0 !important;
}

/* Ajustes específicos */
#ref-input {
    text-align: center;
    color: #ff0000;
    font-size: 30px; /* <--- AGREGA ESTO AQUÍ (puedes ajustarlo a 50px si quieres) */
    font-weight: bold; /* Ponlo en negrita también para que resalte más */
    height: 50px; /* Le damos altura extra para que no se corte por ser tan grande */
}

/* Específico para el textarea de la descripción */
/* Específico para el textarea de la descripción */
/* Específico para el textarea de la descripción */
#desc-input {
    vertical-align: middle;
    height: 55px; /* Le damos un poquito más de altura para que respiren las 2 líneas */
    line-height: 1.3; /* Interlineado normal para que la segunda línea no se vaya abajo */
    padding-top: 18px !important; /* Empujón exacto para que 1 línea se vea centrada */
    overflow: hidden; /* Sin barras de scroll para que el PDF salga limpio */
    white-space: pre-wrap; 
}

#obs-input {
    height: 60px;
    text-align: left;
    margin-top: 5px;
}

.input-invisible:focus {
    background-color: #f0f8ff; /* Leve fondo azul al editar para ubicarse */
}

/* Panel de botones */
.acciones-panel {
    text-align: center;
    margin-bottom: 20px;
}

.acciones-panel button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #d32f2f;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
}


/* Opcional: para que el PDF se vea centrado y profesional */
#area-pdf {
    margin: 0 auto;
}

/* Resalta el número del Total Final */
#total-output {
    color: #0056b3 !important; /* Un tono de azul profesional y elegante */
    font-weight: bold !important; /* Lo pone en negrita */
    font-size: 24px !important; /* Lo hace más grande (puedes subir o bajar este número) */
}
/* =========================================
   ESTILOS ESTRICTOS PARA IMPRESIÓN NATIVA
   ========================================= */

@media print {
    /* 1. Ocultar botones */
    .no-print {
        display: none !important;
    }

    /* 2. Forzar MÁRGENES CERO absolutos arriba */
    @page {
        size: A4 portrait;
        margin-top: 0mm !important; /* ¡CERO ESPACIO ARRIBA! */
        margin-bottom: 10mm;
        margin-left: 15mm;
        margin-right: 15mm;
    }

    /* 3. Nulificar cualquier espacio de la web */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background-color: #ffffff;
    }

    /* 4. Quitar el padding de 20px que tiene el contenedor en la pantalla */
    .document-container {
        margin: 0 !important;
        padding: 0 !important; /* Esto quita el aire interno */
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 5. Asegurar que la cabecera se pegue al techo */
    header, .header-top {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}