body {
    font-family: Arial, sans-serif;
    background-color: #fff; /* Fondo blanco */
    margin: 20px;
    color: #040404; /* Texto negro */
}

.container {
    border: 2px solid #040404; /* Borde negro */
    border-radius: 8px;
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #040404; /* Dorado suave */
    text-align: center;
}

form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff; /* Fondo blanco */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 8px;
    color: #040404; /* Texto negro */
}

input {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid #040404; /* Borde negro */
    border-radius: 4px;
    box-sizing: border-box;
}

hr {
    border: 0;
    border-top: 1px solid #040404; /* Línea negra */
    margin: 20px 0;
}

button {
    background-color: #efb810; /* Dorado suave */
    color: #040404; /* Texto negro */
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #d3bf8d; /* Dorado más oscuro */
}

#resultadoCotizacion {
    margin-top: 20px;
    color: #040404; /* Texto negro */
}

.centered-button {
    display: block;
    margin: 20px auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #040404; /* Borde negro */
    padding: 8px;
    text-align: left;
}

th {
    background-color: #efb810; /* Dorado suave */
    color: #040404; /* Texto negro */
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

.styled-title {
    color: #040404; /* Texto negro */
    font-size: 28px;
    text-align: center;
}

/* Estilos adicionales para las secciones */
.section-title {
    color: #efb810; /* Dorado suave */
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.section-box {
    background-color: #fff; /* Fondo blanco */
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #efb810; /* Borde dorado */
}


.fieldset-hidden {
    display: none;
}

.form-group {
    padding: 0px;             /* Espaciado interno ajustable */
    width: 100%;               /* Ancho relativo al contenedor */
    max-width: 220px;          /* Máximo ancho en dispositivos grandes */
    box-sizing: border-box;    /* Asegura que el padding no afecte el ancho total */
}

.fieldset-container {
    display: flex;
    flex-direction: row;  /* Mantén los elementos en fila en pantallas grandes */
    gap: 40px;            /* Espaciado entre elementos */
    flex-wrap: wrap;      /* Permite que los elementos bajen a la siguiente fila si no caben */
}



/* Ajustar columnas en pantallas menores a 480px */
@media (max-width: 452px) {

     /* Estilos generales */
/****************************************************/
/* Ajustes generales para la tabla */
#resultadoCotizacion {
    padding: 0px; /* Espaciado interno para evitar que el contenido toque los bordes */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    overflow-x: auto; /* Permite scroll horizontal si la tabla es demasiado ancha */
}

#resultadoCotizacion table {
    width: 100%; /* Ajusta la tabla al ancho del contenedor */
    border-collapse: collapse; /* Limpia los bordes entre celdas */
    table-layout: fixed; /* Fija el diseño de las celdas para evitar expansiones desproporcionadas */
    word-wrap: break-word; /* Asegura que el contenido se ajuste en caso de ser largo */
}

#resultadoCotizacion th,
#resultadoCotizacion td {
    padding: 8px; /* Añade espacio interno */
    text-align: left; /* Alinea el texto a la izquierda */
}

/*tabla cotizaciones*/
#resultadoCotizacion {
    padding: 0px; /* Espaciado interno para evitar que el contenido toque los bordes */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    overflow-x: auto; /* Permite scroll horizontal si la tabla es demasiado ancha */
}

#resultadoCotizacion table {
    width: 100%; /* Ajusta la tabla al ancho del contenedor */
    border-collapse: collapse; /* Limpia los bordes entre celdas */
    table-layout: fixed; /* Fija el diseño de las celdas para evitar expansiones desproporcionadas */
    word-wrap: break-word; /* Asegura que el contenido se ajuste en caso de ser largo */
}

#resultadoCotizacion th,
#resultadoCotizacion td {
    padding: 4px; /* Añade espacio interno */
    text-align: left; /* Alinea el texto a la izquierda */
    /*height: 25px;*/
    /*border: 1px solid #ddd; /* Añade un borde a las celdas */
}
    /* Reducir ancho de la primera columna (Items) */
    #resultadoCotizacion th:first-child, 
    #resultadoCotizacion td:first-child {
        width: 13px; /* Ancho fijo reducido */
        text-align: center; /* Centra el texto */
        font-size: 11px; /* Reduce el tamaño del texto */
    }
    #resultadoCotizacion tr:first-child th:nth-child(1), 
    #resultadoCotizacion tr:first-child td:nth-child(1) {
    font-size: 0px; /* Ajusta el tamaño del texto */
    }

    /* Aumentar ancho de la segunda columna (Producto) */
    #resultadoCotizacion th:nth-child(2), 
    #resultadoCotizacion td:nth-child(2) {
        width: 28%; /* Aumenta el ancho al 40% del contenedor */
        font-size: 15px; /* Mantén un tamaño de texto adecuado */
    }
    #resultadoCotizacion tr:first-child th:nth-child(2), 
    #resultadoCotizacion tr:first-child td:nth-child(2) {
    font-size: 13px; /* Ajusta el tamaño del texto */
    
    }

    /* Reducir ancho de la tercera columna (Cantidad) */
    #resultadoCotizacion th:nth-child(3), 
    #resultadoCotizacion td:nth-child(3) {
        width: 14%; /* Reduce el ancho al 15% del contenedor */
        text-align: center; /* Centra el texto */
        font-size: 15px; /* Ajusta el tamaño del texto */
    }
    #resultadoCotizacion tr:first-child th:nth-child(3), 
    #resultadoCotizacion tr:first-child td:nth-child(3) {
    font-size: 10px; /* Ajusta el tamaño del texto */
    padding: 1px;
}

    

    /* Reducir ancho de la cuarta columna (Cantidad) */
    #resultadoCotizacion th:nth-child(4), 
    #resultadoCotizacion td:nth-child(4) {
        width: 15%; /* Reduce el ancho al 15% del contenedor */
        text-align: center; /* Centra el texto */
        font-size: 15px; /* Ajusta el tamaño del texto */
        padding: 3px;
    }
    /*Solo el titulo de la cuarta columna*/
    #resultadoCotizacion tr:first-child th:nth-child(4), 
    #resultadoCotizacion tr:first-child td:nth-child(4) {
    font-size: 10px; /* Ajusta el tamaño del texto */
    }

    /*Solo el titulo de la cuarta columna*/
    #resultadoCotizacion tr:first-child th:nth-child(5), 
    #resultadoCotizacion tr:first-child td:nth-child(5) {
    font-size: 13px; /* Ajusta el tamaño del texto */
    }
    
    #resultadoCotizacion th:nth-child(5), 
    #resultadoCotizacion td:nth-child(5) {
        width: 28%; /* Reduce el ancho al 15% del contenedor */
        font-size: 15px;
    }

    
    /* Ajustar encabezados para reducir texto */
    #resultadoCotizacion th {
        font-size: 11px;
    }

   
}





/*Ancho del celular de mi mami: 356px*/
/*-------------------------------------*/



.logo img {
    width: 40%; /* Ajusta la imagen al ancho del div */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: contain; /* Escala la imagen manteniendo su proporción */
    display: flex; /* Activa flexbox */
    justify-content: center; /* Centra horizontalmente */
    margin: 0 auto;
    
}


/* Estilos específicos para pantallas pequeñas */
@media (max-width: 768px) {
    .form-group {
        width: 45%;          /* Los elementos ocupan todo el ancho disponible */
        max-width: none;      /* Elimina el límite de ancho */
    }
    .fieldset-container {
        flex-direction:row; /* Cambia a disposición vertical */
        gap: 20px;              /* Reduce el espacio entre elementos */
    }
}