/**
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
Version: 4.6.4
Requires at least: 5.3
Tested up to: 6.4
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Astra WordPress Theme, Copyright 2020 WPAstra.
Astra is distributed under the terms of the GNU GPL.

Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of.
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/

Astra icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Screenshot image is a collage of actual sites created using the Astra WordPress Theme.

Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free )
https://fontawesome.com/v5.15/icons/store?style=solid
https://fontawesome.com/v5.15/icons/shopping-cart?style=solid
https://fontawesome.com/v5.15/icons/pen-square?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid

Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans )
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png

Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License.
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png

The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/.

For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/.

Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* Note: The CSS files are loaded from assets/css/ folder. */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Staatliches&display=swap');
:root {
    /** Fuentes **/
    --fuente-principal: "Raleway", sans-serif;
    --fuente-headings: "Staatliches", sans-serif;

    /** Colores **/
    --primario: #0050d8;
    --gris-oscuro: #2f2e2e;
    --gris-claro: #ebebeb;
    --blanco: #fff;
    --negro: #000;
}
html {
    box-sizing: border-box;
    font-size: 62.5%; /*10px = 1rem*/
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

body {
    font-family: var(--fuente-principal);
    font-size: 1.8rem;
    line-height: 2;
}
/** Headings **/
h1, h2, h3, h4 {
    font-family: var(--fuente-headings);
    margin: 5rem 0;
    line-height: 1.2;
    font-weight: 400;

  
  
}
h1 {
    color: #3498db;
    font-family: var(--fuente-headings);
    font-size: 40px;
    text-align: center;
    background-color: var(--gris-claro);
    line-height: 1.5;


}
h2 {

        color: #3498db;
        padding: 0;
        font-size: 35px;
        text-align: center;
        margin: 20px 0;
        font-weight: 400;
    }

h3 {
    font-size: 3.6rem;
}

/** Globales **/

p {
    margin: 0;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
hr {
    border: 1px solid var(--gris-claro);
}
.contenedor {
    width: min(95%, 120rem);
    margin: 0 auto;
}
.contenido-centrado {
    width: min(95%, 80rem);

}

/** Utilidades **/
.text-center {
    text-align: center;
}
.text-primary {
    color: var(--primario);
}
.texto-blanco {
    color: var(--blanco);
}
.seccion  {
    padding: 5rem 0;
}
/** Header **/
.header {
    background-color: var(--gris-claro);
    padding: 2rem 0;
}
.logo img {
    width: 25rem;
}
.barra-navegacion {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 768px) {
    .barra-navegacion {
        
        flex-direction: row;
       justify-content: space-between;
    }
}
/* .menu-principal { .tabla-container
    display: none;
}*/
@media (min-width: 768px) {
    .menu-principal {
        display: block;
    }
    .menu-principal .menu {
        display: flex;
    }
}
.menu-principal a {
    font-family: var(--fuente-headings);
    display: block;
    text-align: center;
    color: var(--primario);
    font-size: 2.2rem;
    padding: .5rem 2rem;
}
.menu-principal .current_page_item {
    border-bottom: 3px solid var(--gris-oscuro);
}
/**Footer**/
.footer {
    background-color: var(--gris-claro);
}
.contenido-footer {
    padding: 4rem 0;
}
@media (min-width: 768px) {
    .contenido-footer {
        display: flex;
        justify-content: space-between;
    }
}
.footer .menu-principal a {
text-align: center;
font-size: 2.4rem;
padding: 0 1rem;
}

.copyright {
    text-align: center;
    font-family: var(--fuente-headings);
    font-size: 1.8rem;
    margin: 2rem 0 0 0;
    color: var(--primario);
}
@media (min-width: 768px) {
    .copyright {
       font-size: 2.4rem;
       margin: 0;
      
    }
}
/*Estilos a página inicio*/
.titulo-inicio {
    font-size: 35px;
    text-align: center;
}
.botones-inicio, .cotizaciones-botones, .oc-botones {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    row-gap: 2rem !important;
    justify-items: center; /* Centrar horizontalmente */
    margin: 10rem 0;
  align-items: center;
}
.cotizaciones-botones button, .cotizaciones-botones a,
.oc-botones button,.oc-botones a {
    padding: 2rem 4rem;
    width: 35rem;
    height: 7rem;
    font-size: 2rem;

}

@media (min-width: 768px) {
    .botones-inicio {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        row-gap: 2.5rem !important;

    justify-content: center;
      margin: 10rem 0;
    }
}




/* Estilos para el formulario */
.formulario1-grid {
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    font-size: var(--fuente-principal);
}
.formulario1 {
    margin: 0 auto;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  

}
.campos {
    display: flex;
    margin: 10px;
}
#agregarProducto, #actualizarProducto {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px !important;
    padding: 10px 10px;
    height: 45px;
    width: 200px;
    margin: 60px 5px 30px 5px;
    
}
#agregarProductoEditar {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px !important;
    padding: 10px 10px;
    height: 45px;
    width: 200px;
    margin: 60px 5px 30px 5px;
}
#actualizarProductoEditar {

    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px !important;
    padding: 10px 10px;
    height: 45px;
    width: 200px;
    margin: 60px 5px 30px 5px;

}
#edit_cotizacion {
    width: 350px;
    height: 60px !important;
    font-family: var(--fuente-principal);
    font-size: 18px;
}
.tabla-container {
    overflow-x: auto; /* Añade una barra de desplazamiento horizontal cuando sea necesario */

}

/* Estilo para la columna "Concepto" en la tabla de formulario*/
#tablaProductos th:nth-child(5),
#tablaProductos td:nth-child(5),
.tabla-form-final th:nth-child(5),
.tabla-form-final td:nth-child(5),
.tabla-form-editcotizacion th:nth-child(5),
.tabla-form-editcotizacion td:nth-child(5),
.tab-form-OC th:nth-child(10),
.tab-form-OC td:nth-child(10),
.tab-oc-final th:nth-child(10),
.tab-oc-final td:nth-child(10),
.tab-editoc th:nth-child(10),
.tab-editoc td:nth-child(10),
.tab-editfinaloc-originales th:nth-child(10),
.tab-editfinaloc-originales td:nth-child(10),
.tab-editfinaloc-actualizados th:nth-child(10),
.tab-editfinaloc-actualizados td:nth-child(10)




{
   min-width:  600px !important;
}





/* Tablas de productos */
.tab-editcot-originales,
.tab-editcot-actualizados{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;              /* << clave para que respete los widths */
}

.tab-editcot-originales th, .tab-editcot-originales td,
.tab-editcot-actualizados th, .tab-editcot-actualizados td{
  padding: 8px 10px;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
    width: 120px !important;          /* ajusta 110-140px a gusto */

}

/* Fijar ancho de las 3 últimas columnas: Subtotal, IVA, Total */
.tab-editcot-originales th:nth-last-child(-n+3),
.tab-editcot-originales td:nth-last-child(-n+3),
.tab-editcot-actualizados th:nth-last-child(-n+3),
.tab-editcot-actualizados td:nth-last-child(-n+3){
  width: 150px !important;          /* ajusta 110-140px a gusto */
  white-space: nowrap;
  text-align: right;
}

.tab-editcot-originales th:nth-child(5),
.tab-editcot-originales td:nth-child(5),
.tab-editcot-actualizados th:nth-child(5),
.tab-editcot-actualizados td:nth-child(5)

{
  width: 600px !important;          /* ajusta 110-140px a gusto */
 
}



.envio {
    margin-top: 30px;
}


/* Estilos para las etiquetas */
.formulario1 label {
    margin-top: 15px !important;
    font-weight: bold;
    margin: 0 auto;
    color: #333;
    flex: 1; /* Las etiquetas ocupan el 100% del espacio disponible */
}

/* Estilos para los campos de entrada */
.formulario1 input, select, textarea {
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 17px;
    flex: 2; /* Los campos ocupan el doble de espacio que las etiquetas */
padding: 0 !important;
}
.botoncliente {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px !important;
    padding: 10px 10px;
    height: 45px;
    width: 200px;
    margin: 10px auto; /* Establece el margen izquierdo automáticamente */
}
.botonProveedor {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px !important;
    padding: 10px 10px;
    height: 45px;
    width: 200px;
    margin: 10px auto; /* Establece el margen izquierdo automáticamente */
}
.campo-vacio {
    border: 1px solid red;
}
/* Estilos para el botón de enviar */
.formulario1 .btn_generarpdf {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 20px !important;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 auto !important;
    width: 50%;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 25px !important;
}

.formulario1 .btn_generarpdf:hover {
    background-color: #2980b9;
}

/* Estilos adicionales para mejorar la legibilidad y apariencia */
.body-formulario {
    font-family: 'Arial', sans-serif;
    background-color: #ecf0f1;
    color: #333;
}

.contenedor h2, .form-fin h2 {
    color: #3498db;
    padding: 0;
    font-size: 35px;
    text-align: center;
    margin: 20px 0;
    font-weight: 400;
}
.formulario1 input[type="submit"] {
    padding: 10px 15px !important;
    height: 45px;
    margin: 15px 5px 60px 5px;
    height: 45px !important;

}

#tablaProductos {
    font-size: 16px;

}
.btn-ir-inicio {
    background-color: #046bd2;
    color: #ffffff;
    text-align: center;
    height: 45px;
    margin: 15px 5px 60px 5px;
    border-radius: 5px;
    padding: 10 15;

}

.btn-ir-inicio:hover {
    background-color: #2980b9;

    color: #ffffff;

}
/* Media queries para hacer el formulario responsivo */
@media (max-width: 768px) {
    .formulario1, .formulario1-grid {
        grid-template-columns: 1fr; /* Cambia a una sola columna en pantallas pequeñas */
    }

    .formulario1 input, .formulario1 select, .formulario1 textarea {
        padding: 10px;
        margin-bottom: 12px;
    }

    .formulario1 input[type="submit"] {
        padding: 10px 15px;
    }
}




/*Formulario final*/

/* Estilos para el contenedor principal del formulario */
.pagina-formulariofin  {
    max-width: 1200px !important;
    justify-content: center !important;
    padding: 30px !important;
}

.contenedor-form-final {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 20px; /* Espacio entre columnas */
   /* max-width: 800px; /* Ajusta según tu preferencia */
    margin: 20px; /* Ajusta según tu preferencia */
    gap: 20px;
}
/*Poner abajo boton de editaro guardar*/
.camposformfinal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.camposformfinal button, .tablaproduformfinal button {
    margin-top: 5px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    background-color: var(--primario);
    cursor: pointer;
    font-size: 18px;
}

.camposformfinal button:hover {
    background-color: #3498db;
}

.camposformfinal input {
    margin-top: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    display: block;
}
.nota-p {
    color: #3498db;
        padding: 0;
        font-size: 35px;
        text-align: center;
        margin: 20px 0;
        font-weight: 300;
            font-family: var(--fuente-headings);
    margin: 5rem 0;
    line-height: 1.2;

}

/* Estilos para el contenido del formulario */
.scrollable {
    overflow-x: auto; /* Agrega una barra de desplazamiento horizontal si es necesario */
    white-space: nowrap; /* Evita que el texto se desplace a la siguiente línea */
}
/* Estilos para los párrafos dentro del contenido */
.contenedor-form-final p {
    margin: 0;
    padding: 10px; /* Aumenta o disminuye según tu preferencia */
    border-bottom: 1px solid #ddd; /* Línea inferior entre filas */}



/* Estilo adicional para la última fila para evitar una línea inferior innecesaria */
.contenedor-form-final p:last-child {
    border-bottom: none;
}

/* Estilos adicionales para resaltar las filas */
.contenedor-form-final p:nth-child(even) {
    background-color: #f9f9f9; /* Fondo alternativo para resaltar filas pares */
}

.contenedor-form-final p:nth-child(odd) {
    background-color: #ffffff; /* Fondo alternativo para resaltar filas impares */
}


.pagina-formulariofin input[type="submit"] {
    padding: 10px 25px;
    height: 45px;
    margin: 10px 40px !important;
    font-size: 15px;

}
/*Estilo tabla para editar productos en formulario final*/

#concepto1 {
    width: 500px;
    padding: 5px;
    font-size: 14px;
}
.botones-nav {

    margin-top: 30px;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}



.botones-nav button {
    margin: 0 20px;
    padding: 15px;
    font-size: 14px;
    cursor: pointer;
}
@media (min-width: 768px) {

.contenedor-form-final {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px; /* Espacio entre columnas */
   /* max-width: 800px; /* Ajusta según tu preferencia */
    margin: 40px 0; /* Ajusta según tu preferencia */
    gap: 20px;
}

/* Estilos para los párrafos dentro del contenido */
.contenedor-form-final p {
    margin: 0;
    padding: 10px; /* Aumenta o disminuye según tu preferencia */
    border-bottom: 1px solid #ddd; /* Línea inferior entre filas */}



/* Estilo adicional para la última fila para evitar una línea inferior innecesaria */
.contenedor-form-final p:last-child {
    border-bottom: none;
}

/* Estilos adicionales para resaltar las filas */
.contenedor-form-final p:nth-child(even) {
    background-color: #f9f9f9; /* Fondo alternativo para resaltar filas pares */
}

.contenedor-form-final p:nth-child(odd) {
    background-color: #ffffff; /* Fondo alternativo para resaltar filas impares */
}

.pagina-formulariofin input[type="submit"] {
    padding: 19px 29px;
    height: 55px;
    margin-left: auto !important;
    margin-right: 0 !important;
    font-size: 18px;

}

.botones-nav {

    display: flex;
    margin-top: 50px;
    justify-content: space-between;

}



.botones-nav button {
    padding: 15px 20px;
    font-size: 16px;
    cursor: pointer;
}

}

/*EDIT FORM FINAL */

.align-right {
    display: block;

}

/*Documento Cotización PDF*/
body .cotizacion-body { 
    margin: 0; padding: 0; 
    background-color: var(--blanco);
 
}
.contacto li {
    line-height: 1.2;
    font-size: 10.67px;
    font-weight: bold;
    font-family: 'Calibri', sans-serif;
    text-align: center;
    
}
.contacto li:first-child {
    font-size: 12px;
  
}

.encabezado img {
    height: 62.72px; 
    width: 170.92px;
    margin-bottom: 13px;
}

.logo {
    border: 2px solid #000; 
            padding: 10px;
}

.logo li {
    font-size: 8px;
    line-height: 1.6;
    font-weight: normal;
}
.logo li:last-child {
    font-size: 9.33px;
}

.titulo-ref h2{
    font-size: 15px;
    font-style: italic;
    margin: 0 3rem;
    color: #000;
    font-weight: 400;
    border: 2px solid #000; 
    padding: 10px 60px;
}
.titulo-ref ul {
    margin: 2rem 0;
}
.folio-oc h2
{
    font-size: 15px;
    font-style: italic;
    margin: 3rem 0 0 0;
    color: #000;
    font-weight: 400;
    border: 2px solid #000; 
    padding: 10px 10px;
 
}
.titulo-folio {
    margin: 0 0 0 15rem;
    
}
.titulo-ref li {
    text-align: left;
    font-family: "Trebuchet MS", sans-serif !important;
    font-size: 6.5pt !important;
    margin-bottom: 10px;
}
.titulo-ref li span {
    font-style: italic;
    font-weight: normal;
}

.fecha {
    font-size: 8.72px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

    letter-spacing: .5px;
}
.fecha .espacios {
    margin-right: 53rem;
/*margin-right: 50%;*/
}
.fecha span {
    border-bottom: 1px solid black;
    padding: 0 5rem;
    font-weight: bold;
}
/*Cliente y contacto*/
.cliente {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 6.5pt;
    width: 100%; /* Ajusta el ancho total de la tabla */
    letter-spacing: .5px; 
}
.proveedor-oc {
    margin: 10px 0 0 0;
    font-family: Arial, sans-serif;
    font-size: 7.5pt;
    width: 80%; /* Ajusta el ancho total de la tabla */
    letter-spacing: .5px; 
    border-collapse: collapse; /* Elimina el espacio entre bordes de celdas */
    padding: 0;
}

.proveedor-oc td {
    padding: 3px; 
    vertical-align: top; /* Alinea el contenido en la parte superior de cada celda */
}

.proveedor-oc .nombre-proveedor,
.proveedor-oc .cotizacion-referencia,
.proveedor-oc .contacto-oc, .proveedor-oc .correo-oc, .proveedor-oc .telefono-oc {
    text-align: right;
    font-weight: bold;
}

.proveedor-oc .valor-proveedor span,
.proveedor-oc .valor-referencia span,
.proveedor-oc .valor-contacto span, 
.proveedor-oc .valor-correo span, .proveedor-oc .valor-telefono span {
    display: block; /* Asegura que el span ocupe todo el ancho de la celda */
    text-align: center; /* Centra el texto dentro del span */
    font-weight: normal;
}
.valor-proveedor span {
    font-weight: bold !important;
}
.parrafo_oc {
    text-align: center;
    margin: 2rem;
    margin-right: 10rem;
    font-family: Arial, sans-serif;
    font-size: 6.5pt;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.08em; /* Aumenta el espacio entre letras */

}
.cliente td {
    width: 50%; /* Divide la tabla en dos columnas */
    padding: 5px; /* Ajusta el relleno según sea necesario */
    vertical-align: top; /* Alinea el contenido en la parte superior de cada celda */
}
.cliente p {
    width: 100%; /* Ocupa el 100% del ancho del td */
    margin: 0; /* Elimina el margen para que no haya espacio adicional */
}

.cliente span {
    border-bottom: .5px solid black;
    width: 80%; /* Extiende la línea de span en todo el ancho disponible */
    display: inline-block; /* Para que la línea abarque el ancho del span */
    font-weight: bold;
    text-align: center;
}

/*Email y teléfono */
.email {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 6.5pt;
    width: 100%; /* Ajusta el ancho total de la tabla */
    letter-spacing: .5px; 
}
.email td {
    width: 50%; /* Divide la tabla en dos columnas */
    padding: 5px; /* Ajusta el relleno según sea necesario */
    vertical-align: top; /* Alinea el contenido en la parte superior de cada celda */
}
.email p {
    width: 100%; /* Ocupa el 100% del ancho del td */
    margin: 0; /* Elimina el margen para que no haya espacio adicional */
}

.email span {
    border-bottom: .5px solid black;
    width: 80%; /* Extiende la línea de span en todo el ancho disponible */
    display: inline-block; /* Para que la línea abarque el ancho del span */
    font-weight: bold;
    text-align: center; 

}


.producto {
    margin-top: 2rem;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6.5pt;
    line-height: 1.5; 
}

 /*Estilos para la tabla */
.producto {
    width: 100%;
    border-collapse: collapse;
}

.producto th, .producto td {
    border: 1px solid black;
    padding: 5px; 

}


.producto th {
    background-color: #f2f2f2;
}
.producto  .col-concepto {
  min-width: 200px !important;
  max-width: 500px !important;
  /* opcionales y útiles para PDFs con textos largos: 
 /* white-space: normal;
  word-break: break-word;*/
}

/* Romper SOLO en ITEM y CÓDIGO, mantener el resto intacto */
.producto .col-item,
.producto .col-codigo {
  white-space: normal;        /* permite saltos de línea */
  word-break: break-all;      /* fuerza corte en cualquier carácter */
  overflow-wrap: anywhere;    /* fallback extra */
  min-width: 40px;           /* limita el ancho de esas columnas (ajusta a gusto) */
  max-width: 90px;           /* limita el ancho de esas columnas (ajusta a gusto) */

}




.producto th:nth-child(1),
.producto td:nth-child(1),
.producto th:nth-child(2),
.producto td:nth-child(2)
{
 /*   max-width: 50px !important;
    word-wrap: break-word; /* Para navegadores más antiguos */
  /*  overflow-wrap: break-word; /* Para navegadores más modernos */
}
td[headers="precio"], td[headers="total"], td[headers="descuento"] {
    min-width: 55px !important;
   /* word-wrap: break-word; /* Para navegadores más antiguos */
    /* overflow-wrap: break-word; /* Para navegadores más modernos */
}
.producto th:nth-child(4),
.producto td:nth-child(4),
.producto th:nth-child(5),
.producto td:nth-child(5),
.producto th:nth-child(6),
.producto td:nth-child(6),
.producto th:nth-child(7),
.producto td:nth-child(7),
.producto th:nth-child(8),
.producto td:nth-child(8)
{
 /*   max-width: 60px !important;
    word-wrap: break-word; /* Para navegadores más antiguos */
 /*   overflow-wrap: break-word; /* Para navegadores más modernos */
}
.notas-enunciado {
    text-align: center;
}
.negritas {
    font-weight: bold;
}
.centrar {
    text-align: center;
}
.derecha {
    text-align: right;
}

.vigencia {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6.5pt;
  /*  font-weight: bold;*/
    letter-spacing: .5px;
    width: 90%;
    margin: 10px 0 0 0 !important; /* Elimina el margen inferior de todas las tablas */
    padding: 0 !important;

}
.vigencia td {
    vertical-align: top; /* Alinea el contenido en la parte superior de cada celda */
    margin: 0 !important; /* Elimina el margen inferior de todas las tablas */
    padding: 0 !important;
}
.vigencia p {
    margin: 0; /* Elimina el margen para que no haya espacio adicional */
}
.nombre-vigencia {
    width: 20%; /* Ocupa el 35% del ancho del td */
}
.vigencia-span  {
    width: 30%; /* Ocupa el 65% del ancho del td */
}


.tiempo {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6.5pt;
  /*  font-weight: bold;*/
    letter-spacing: .5px;
   width: 90%;
   margin: 0 !important; /* Elimina el margen inferior de todas las tablas */
   padding: 0 !important;


}
.tiempo td {
    vertical-align: top; /* Alinea el contenido en la parte superior de cada celda */
    margin: 0 !important; /* Elimina el margen inferior de todas las tablas */
    padding: 0 !important;
}
.tiempo p {
    margin: 0; /* Elimina el margen para que no haya espacio adicional */
}
.nombre-tiempo {
    width: 20%; /* Ocupa el 35% del ancho del td */
}
.tiempo-span  {
    width: 30%; /* Ocupa el 65% del ancho del td */
    font-style: italic;

}


.condiciones {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6.5pt;
  /*  font-weight: bold;*/
    letter-spacing: .5px;
   width: 90%;
   margin: 0 0 10px 0 !important; /* Elimina el margen inferior de todas las tablas */
   padding: 0 !important;

}

.condiciones td {
    vertical-align: top; /* Alinea el contenido en la parte superior de cada celda */
    margin: 0; /* Elimina el margen para que no haya espacio adicional */

}
.condiciones p {
    margin: 0; /* Elimina el margen para que no haya espacio adicional */
}
.nombre-condiciones {
    width: 20%; /* Ocupa el 35% del ancho del td */
}
.condiciones-span  {
    width: 30%; /* Ocupa el 65% del ancho del td */
}

.datos_bancarios {
    width: 100%;
}

.datos-banco {
    border: 2px solid #000; 
    width: 30%;
  /*  padding: 2px 105px 2x 5px;*/
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6.5pt;
    letter-spacing: .5px;
}
.cuadro-oc {
    border: none !important;
    margin-left: auto; /* Empuja la tabla hacia la derecha */
    margin-right: 0; /* Asegura que no haya margen a la derecha */
    width: fit-content; /* Ajusta el ancho de la tabla al contenido */
    border-collapse: collapse;
}

.nombre-datos_bancarios{
    margin-top: 0;
    padding-top: 0;
}
.nombre-datos_bancarios span {
    margin-left: 12rem;
}
.nombre-datos_bancarios2 {
   margin-left: 12rem;
    margin-top: 0;
    padding-top: 0;
}
.nombre-datos_bancarios2 span {
    margin-left: 8rem;
}
.firma {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6.5pt;
    width: 20%;
}
.firma-oc {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6.5pt;
    text-align: right;
}
.espacio-firma {
    width: 20%;
}

.firma-parrafo-oc {
    text-align: center;
}
.firma-parrafo-oc span {
    border-bottom: 2px solid black;
    padding: 0 30px;
    font-family: "Arial MT", Arial, sans-serif;
    font-size: 7.5pt;

}
.firma-parrafo2-oc {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6pt;
    text-align: center;
}

.firma-parrafo {
    text-align: center;
}
.firma-parrafo span {
    border-bottom: 2px solid black;
    padding: 0 30px;
    font-family: "Arial MT", Arial, sans-serif;
}
.firma-parrafo2 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6pt;
    text-align: center;
}
.datos-banco2 {
    border: 2px solid #000; 
 /*   padding: 2px 91px 2x 5px;*/
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 6.5pt;
    letter-spacing: .5px;
}
.llenar {
    border: 2px solid black;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 8pt;
    line-height: 1.5; 
    padding: 2px;
    margin: 3px;
}
.recibo {
    margin-top: 2rem;
    display: inline-block; /* Para que el párrafo y la línea estén en la misma línea */
    margin-left: 2rem;
    padding-bottom: 2rem;
    font-size: 6.5pt;

}
/*Cotización PDF RGX*/
.logo-rgx img {
    height: 80px;
    margin: 0 10px 10px 10px !important;
}

.contacto-rgx li:first-child {
    font-size: 10px;
  
}

/*Formulario Orden de Compra*/
.orden-compra h2 {
    color: #3498db;
    padding: 0;
    font-size: 35px;
    text-align: center;
    margin: 20px 0;
    font-weight: 400;

}

.orden-compra h1 {
    font-weight: 100 !important;
    font-size: 42px;
}
.tablaprodoc {
    margin-top: 10rem;
}
/*Clases propias del formulario de la orden de compra*/
/* Estilos para el formulario de orden de compra */
.formulario-oc-grid {
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    font-size: var(--fuente-principal);
}

.formulario-oc {
    margin: 0 auto;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.campos-oc {
    display: flex;
    margin: 10px;
}

#agregarOrdencompra, #edit_cotizacion {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px !important;
    padding: 10px 10px;
    height: 45px;
    width: 200px;
    margin: 60px 5px 30px 5px;
}

#edit_cotizacion {
    width: 350px;
    height: 60px !important;
    font-family: var(--fuente-principal);
    font-size: 18px;
}

.tabla-container-oc {
    overflow-x: auto; /* Añade una barra de desplazamiento horizontal cuando sea necesario */
}

.tabla-container-oc.full-width {
    grid-column: 1 / -1; /* Hace que ocupe todo el ancho del grid */
}

/* Estilo para la columna "Concepto" en la tabla */
#tablaProductos th:nth-child(4),
#tablaProductos td:nth-child(4) {
   margin: 0 600px !important;
}

.envio {
    margin-top: 30px;
}

/* Estilos para las etiquetas */
.formulario-oc label {
    margin-top: 15px !important;
    font-weight: bold;
    margin: 0 auto;
    color: #333;
    flex: 1; /* Las etiquetas ocupan el 100% del espacio disponible */
}

/* Estilos para los campos de entrada */
.formulario-oc input, .formulario-oc select, .formulario-oc textarea {
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 17px;
    flex: 2; /* Los campos ocupan el doble de espacio que las etiquetas */
    padding: 0 !important;
}

.botoncliente, .botonProveedor {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px !important;
    padding: 10px 10px;
    height: 45px;
    width: 200px;
    margin: 10px auto; /* Establece el margen izquierdo automáticamente */
}

.campo-vacio {
    border: 1px solid red;
}

/* Estilos para el botón de enviar */
.formulario-oc .btn_generarpdf {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 20px !important;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 auto !important;
    width: 50%;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 25px !important;
}

.formulario-oc .btn_generarpdf:hover {
    background-color: #2980b9;
}

/* Estilos adicionales para mejorar la legibilidad y apariencia */
.body-formulario-oc {
    font-family: 'Arial', sans-serif;
    background-color: #ecf0f1;
    color: #333;
}

.contenedor h2, .form-fin h2 {
    color: #3498db;
    padding: 0;
    font-size: 35px;
    text-align: center;
    margin: 20px 0;
    font-weight: 400;
}

.formulario-oc input[type="submit"] {
    padding: 10px 15px !important;
    height: 45px;
    margin: 15px 5px 60px 5px;
    height: 45px !important;
}

#tablaProductos {
    font-size: 16px;
}

.boton-actualizar {
    text-align: center;
    margin: 20px 0;
}

/* Media queries para hacer el formulario responsivo */
@media (max-width: 768px) {
    .formulario-oc, .formulario-oc-grid {
        grid-template-columns: 1fr; /* Cambia a una sola columna en pantallas pequeñas */
    }

    .formulario-oc input, .formulario-oc select, .formulario-oc textarea {
        padding: 10px;
        margin-bottom: 12px;
    }

    .formulario-oc input[type="submit"] {
        padding: 10px 15px;
    }
}
/*tabla de orden de compra final responsiva*/
/* Estilos para la tabla responsiva */
.tabla-container-oc-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabla-oc-final {
    width: 100%;
    border-collapse: collapse;
}

.tabla-oc-final th, .tabla-oc-final td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    white-space: nowrap; /* Para evitar el ajuste de texto */
}

.tabla-oc-final th {
    background-color: #f2f2f2;
}
/*ajuste de texto de instrucciones de envío para que no llegue hasta firma*/


/* Estilos para paginacion en listado cotizaciones */

.paginacion {
    margin-top: 20px;
    text-align: center;
}
.paginacion a, .paginacion span {
    margin: 0 5px;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #333;
    border-radius: 5px;
}
.paginacion a:hover {
    background-color: #f0f0f0;
}
.paginacion span {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/*estilo de edicion a formulario final */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.form-group label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.form-group .view-mode {
    margin-bottom: 10px;
}

.form-group .edit-btn {
    margin-top: 10px;
    align-self: flex-end;
}

.btn_generarpdf {
    margin-top: 20px;
}
/*Estilos para orden de compra final */
.datos-generales {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.azul {
    color: #0050d8;
}