@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;900&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
   
}

/* Asegura que cada sección tenga suficiente altura */
section {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Opcional: asegura que el body ocupe siempre más espacio aunque no haya suficiente contenido */
body, html {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    flex-direction: column; /* Organiza los elementos en columna */
    font-family: 'Noto Sans', sans-serif;
}

body {
    background-color: #E6E6E6;
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    background-attachment: fixed; /* La imagen de fondo se fija cuando se hace scroll */
    font-family: 'Noto Sans', sans-serif;
}
/* Para mejorar la visualización de las secciones */

::-webkit-scrollbar {
    width: 20px;      
    margin-right: 50px;
  }
  
::-webkit-scrollbar-track {
background: white;     
border:  2px solid #E6E6E6;  
margin: 20px;
border-radius: 15px;
margin-right: 50px;
}

::-webkit-scrollbar-thumb {
background-color: #E6E6E6;  
border-radius: 15px;     
margin-right: 50px;
}



.texturizado {
    text-align: center;
    color: white;
    padding: 50px;
}
.header {
    width: 100%;
    z-index: 1000;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logos-cabeceras {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    height: 180px;
}

.logo-uno img, .logo-muj img {
    height: 100px;
    margin: auto;
    max-width: 100%;
}

.menu {
    width: 100%;
    background-color: #235B4E;
    text-align: center;
    justify-content: space-between;
    padding: 10px 0;
    height: 70px;
    display: flex;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.menu ul li {
    margin: auto 15px;
}

.menu ul li a {
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.menu ul li a i {
    margin: auto 5px;
}

.menu ul li a:hover, .menu ul li a.active {
    color: #ddd;
}

.hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

.menu-toggle {
    display: none;
}

.usuario-item {
    color: #ccc;
    margin: auto 15px;
    font-size: 0.9rem;
}

/* Estilos Responsivos */

/* Pantallas de hasta 1600px */
@media (max-width: 1280px) {
    .logo-uno img, .logo-muj img {
        height: 60px; 
    }

    .menu ul li a {
        font-size: 0.8rem; 
    }
}

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .logo-uno img, .logo-muj img {
        height: 60px; 
    }

    .menu ul li a {
        font-size: 0.8rem; 
    }
}

/* Pantallas de hasta 1200px */
@media (max-width: 1200px) {
    .logos-cabeceras {
        height: auto;
    }

    .logo-uno img, .logo-muj img {
        height: 40px;
        margin: 10px 0;
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .logo-uno img, .logo-muj img {
        height: 20px;
        justify-content: space-around;
    }

    .hamburger {
        display: block;
        position: absolute;
        top: 6px;
        right: 20px;
    }
    .logos-cabeceras {
        width: 90%;
    }
    .menu {
        display: none; 
        flex-direction: column; 
        align-items: center; 
        background-color: #235B4E; 
        width: 100%; 
        padding: 20px 0; 
        height: auto; 
    }

    .menu ul {
        list-style-type: none; 
        margin: 0;
        padding: 0;
        width: 100%; 
        display: flex;
        flex-direction: column; 
        align-items: center; 
    }

    .menu ul li {
        width: 100%; 
        text-align: center; 
        margin: 10px 0; 
    }

    .menu ul li a {
        display: block;
        width: 100%; 
        padding: 10px 20px; 
        color: white;
        text-decoration: none; 
        font-size: 1rem; 
        text-align: left; 
    }
    .menu ul li a:hover {
        background-color: #1A473A; 
        color: #ddd; 
    }

    .usuario-item {
        width: 100%; 
        text-align: left; 
        color: white; 
        padding: 10px 20px; 
        border-top: 1px solid #1A473A; 
        font-size: 0.9rem; 
        justify-content: center;
    }

    .usuario-item p {
        margin: 0; 
    }

    /* Mostrar el menú cuando el checkbox está marcado */
    .menu-toggle:checked ~ .menu {
        display: flex;
    }
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .menu ul li a {
        font-size: 0.7rem;
    }
}



.usuario {
    position: relative;
}

.usuario .submenu {
    display: none;
    position: absolute;
    background-color: #444;
    padding: 10px;
    top: 30px;
    right: 0;
}

.usuario:hover .submenu {
    display: block;
}

.usuario a {
    color: #ccc;
}

.usuario .submenu a {
    color: white;
    display: block;
    padding: 5px 0;
}
.intra p{
    position: fixed;
    top: 15px;
    left: 540px;
    width: 100%;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Century Gothic', sans-serif;
}
.intra ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
}
 /* Posicionar la imagen en la parte inferior izquierda */
/* Pie de página */
.footer {
    background-color: #19312C; /* Color de fondo en caso de que la imagen no cargue */
    background-size: cover; /* Ajusta la imagen para cubrir todo el fondo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    color: white;
    padding: 20px 40px;
    margin-top: auto; /* Empuja el footer hacia abajo */
}
/* Contenedor interno del footer */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
}

.footer-logo img {
    width: 60%;
    margin-left: -10px;
}

.footer-links, .footer-info {
    flex: 1;
    min-width: 200px;
}
.footer-contact{
    margin-top: 25px;
    flex: 1;
    min-width: 200px;
    margin-left: 5px;
}  
.footer-links h3, .footer-contact h3, .footer-info h3 {
    font-size: 14px;
    margin-bottom: 15px;
}
.footer-info p{
    color: #fff;
    font-size: 0.8rem;
    margin-bottom: 10px;
   
}
.footer-links ul, .footer-info ul {
    list-style: none;
    padding: 0;
}
.footer-contact ul{
    list-style: none;
    padding: 0;
}
.footer-links li, .footer-info li {
    margin-bottom: 5px;
}
.footer-contact li{
    margin-bottom: 5px;
}
.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
}
.footer-info a{
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
}
.footer-contact a{
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
}
.footer-links a:hover, .footer-info a:hover {
    text-decoration: underline;
}

.footer-contact .social-icons a {
    margin-right: 10px;
}

.footer-contact .social-icons img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.footer-contact p {
    margin-top: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}


/* Estilos Responsivos */

/* Pantallas de hasta 1600px */
@media (max-width: 1280px) {
    .footer-container {
        flex-wrap: wrap; /* Asegura que los elementos se ajusten al espacio */
        gap: 10px; /* Incrementa el espacio entre los elementos */
    }

    .footer-logo img {
        width: 50%; /* Reduce el tamaño del logo */
    }

    .footer-links, .footer-info, .footer-contact {
        min-width: 250px; /* Ajusta el ancho mínimo */
    }

    .footer-links h3, .footer-info h3, .footer-contact h3 {
        font-size: 13px; /* Reduce el tamaño de los encabezados */
    }

    .footer-info p, .footer-links a, .footer-contact a {
        font-size: 0.9rem; /* Ajusta el tamaño de las fuentes */
    }

    .footer-contact .social-icons img {
        width: 18px; /* Reduce el tamaño de los íconos sociales */
        height: 18px;
    }
}

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .footer {
        padding: 15px 30px; /* Reduce el padding general */
    }

    .footer-container {
        justify-content: space-around; /* Alinea los elementos con espacio uniforme */
    }

    .footer-logo img {
        width: 45%; /* Ajusta aún más el tamaño del logo */
    }

    .footer-links, .footer-info, .footer-contact {
        min-width: 200px; /* Reduce el ancho mínimo */
    }

    .footer-links h3, .footer-info h3, .footer-contact h3 {
        font-size: 12px; /* Reduce el tamaño de los encabezados */
    }

    .footer-info p, .footer-links a, .footer-contact a {
        font-size: 0.8rem; /* Ajusta el tamaño de las fuentes */
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Apila los elementos en una sola columna */
        align-items: center; /* Centra los elementos */
        text-align: center; /* Alinea el texto al centro */
    }

    .footer-logo img {
        width: 40%; /* Ajusta el tamaño del logo */
    }

    .footer-links, .footer-info, .footer-contact {
        width: 100%; /* Asegura que cada sección ocupe todo el ancho */
        margin-bottom: 15px; /* Espacio entre las secciones */
    }

    .footer-links h3, .footer-info h3, .footer-contact h3 {
        font-size: 11px; /* Ajusta el tamaño de los encabezados */
    }

    .footer-info p, .footer-links a, .footer-contact a {
        font-size: 0.75rem; /* Ajusta el tamaño de las fuentes */
    }

    .footer-contact .social-icons img {
        width: 16px; /* Ajusta el tamaño de los íconos sociales */
        height: 16px;
    }
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .footer {
        padding: 10px 20px; /* Reduce el padding general */
    }

    .footer-logo img {
        width: 30%; /* Reduce aún más el tamaño del logo */
    }

    .footer-links, .footer-info, .footer-contact {
        width: 100%; /* Ocupan todo el ancho disponible */
        margin-bottom: 10px; /* Menor espacio entre las secciones */
    }

    .footer-links h3, .footer-info h3, .footer-contact h3 {
        font-size: 10px; /* Ajusta el tamaño de los encabezados */
    }

    .footer-info p, .footer-links a, .footer-contact a {
        font-size: 0.7rem; /* Ajusta el tamaño de las fuentes */
    }

    .footer-contact .social-icons img {
        width: 14px; /* Ajusta el tamaño de los íconos sociales */
        height: 14px;
    }
}

/**Ingresar Inicio de Sesión*/
/* Carrusel */
/* Estilo para el contenedor del carrusel */
.carousel {
    position: relative;
    width: 100%;
    min-height: 20vh;
    max-width: 100%; /* Asegura que el carrusel ocupe el ancho disponible */
    overflow: hidden; /* Oculta el contenido que se desborda */
    
}

/* Contenedor de las imágenes del carrusel */
.carousel-container {
    display: flex; /* Alinea las imágenes en una fila */
    transition: transform 0.5s ease-in-out; /* Animación suave para el cambio de imágenes */
    width: 100%; /* Asegura que el contenedor ocupe el 100% del ancho disponible */
}

.carousel-item {
    min-width: 100%; /* Asegura que cada imagen ocupe todo el ancho disponible */
    flex: 0 0 100%; /* Evita que las imágenes cambien de tamaño */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño */
}


/* Botones de navegación (flechas) */
.carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.carousel-controls button {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    font-size: 30px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.carousel-controls button:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Si deseas personalizar las flechas */
.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Estilo para las imágenes */
.carousel-item img {
    width: 100%;
    height: auto; 
    object-fit: cover; 
    filter: brightness(0.7);
    margin: 0; 
    display: block; 
}


/* Estilos Responsivos */

/* Pantallas de hasta 1600px */
@media (max-width: 1280px) {
    .carousel-controls button {
        font-size: 25px; 
        padding: 8px; 

    }

    .carousel-item img {
        filter: brightness(0.8); 
    }
}

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .carousel-controls button {
        font-size: 20px; 
        padding: 6px; 
    }

    .carousel-item img {
        object-fit: contain; 
    }
}

/* Pantallas de hasta 1200px */
@media (max-width: 1200px) {
    .carousel {
        max-width: 90%; 
        height: auto;
    }

    .carousel-controls {
        top: 55%; 
    }

    .carousel-item img {
        filter: brightness(0.9); 
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .carousel-controls button {
        font-size: 18px; 
        padding: 5px;
    }

    .carousel {
        max-width: 100%; 
        height: auto;
    }

    .carousel-item img {
        object-fit: contain; 
    }

    .carousel-controls {
        top: 60%; 
    }
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .carousel-controls button {
        font-size: 15px; 
        padding: 4px;
    }

    .carousel {
        max-width: 100%; 
    }

    .carousel-item img {
        object-fit: scale-down; 
    }

    .carousel-controls {
        top: 65%; 
    }
}


.search-section {
    margin-top: 30px; 
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    color: #335A4E;
    margin-bottom: 60px;
}

.search-section h2 {
    font-size: 1.5rem;
    font-weight: normal;
    margin: 10px 0;
}

.search-section h2 span {
    font-weight: bold;
    color: #335A4E;
}

/* Contenedor de la barra de búsqueda */
.search-bar {
    max-width: 300px; 
    margin: 0 auto; 
}


.search-bar input {
    width: 100%; 
    padding: 10px 40px 10px 20px; 
    border: 5px solid #E6E6E6;
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 10px; 
}

.search-bar input::placeholder {
    color: #aaa;
}

.search-bar input[type="text"] {
    padding-left: 40px; 
}


.search-bar button {
    background-color: #19312C;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    width: 30%;
    margin-top: 10px;
}

.search-bar button:hover {
    background-color: #23563e;
}

.search-bar button:hover {
    background-color: #23563e;
}


.fraccion_arancelaria {
    position: relative;
    display: inline-block;
}


.fraccion_arancelaria svg {
    position: absolute;
    top: 20%;
    left: 220px; 
    transform: translateY(-56%);
    pointer-events: none;
    color: #6c757d; 
}


/* Estilos Responsivos */

/* Pantallas de hasta 1600px */
@media (max-width: 1280px) {
    .search-section h2 {
        font-size: 1.4rem; 
    }

    .search-bar {
        max-width: 280px; 
    }

    .search-bar input {
        font-size: 15px; 
        padding: 10px 35px 10px 18px; 
    }

    .search-bar button {
        font-size: 14px; 
        padding: 8px 18px;
    }
    .fraccion_arancelaria svg {
        display: none;
    }
}

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .search-section h2 {
        font-size: 1.3rem; 
    }

    .search-bar {
        max-width: 260px; 
    }

    .search-bar input {
        font-size: 14px;
        padding: 8px 30px 8px 15px;
    }

    .search-bar button {
        font-size: 13px; 
        padding: 8px 16px;
    }
    

}

/* Pantallas de hasta 1200px */
@media (max-width: 1200px) {
    .search-section h2 {
        font-size: 1.2rem;
    }

    .search-bar {
        max-width: 240px;
    }

    .search-bar input {
        font-size: 14px;
        padding: 8px 28px 8px 14px;
    }

    .search-bar button {
        font-size: 12px;
        padding: 7px 14px;
        width: 40%; 
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .search-section {
        margin-top: 20px; 
        margin-bottom: 40px; 
    }

    .search-section h2 {
        font-size: 1rem; 
        text-align: center;
    }

    .search-bar {
        max-width: 200px; 
    }

    .search-bar input {
        font-size: 13px;
        padding: 6px 20px 6px 12px;
    }

    .search-bar button {
        font-size: 12px;
        padding: 6px 12px;
        width: 50%; 
    }
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .search-section {
        margin-top: 15px; 
        margin-bottom: 30px; 
        text-align: left; 
    }

    .search-section h2 {
        font-size: 0.9rem; 
    }

    .search-bar {
        max-width: 180px; 
    }

    .search-bar input {
        font-size: 12px;
        padding: 5px 15px 5px 10px; 
    }

    .search-bar button {
        font-size: 11px;
        padding: 5px 10px;
        width: 100%; 
    }
}



/*Seccion tres*/
.recent-options-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 10px;
}

.recent-options-section .recent-searches {
    background-color: #002b22;
    color: #ffffff;
    padding: 15px;
    border-radius: 9px;
    width: 20%;
}

.recent-searches h3 {
    margin: 0 0 15px; 
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 5px;
    position: relative; 
    text-align: center;
}


.recent-options-section .recent-searches ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-options-section li {
    font-size: 14px;
    line-height: 1.8;
    border-bottom: 1px solid #ffffff; 
    padding-bottom: 5px;
    margin-bottom: 5px; 
    text-align: center;
}
.search-options {
   
    text-align: center; 
}

.search-options h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: white;
    font-weight: bold;
    background-color: #355A4E;
    padding: 5px; 
    border-radius: 5px; 
}

.options {
    display: flex; 
    gap: 20px; 
    justify-content: center; 
}

.option img {
    width: 190px; 
    height: auto;
}

.option-one p {
    font-size: 16px;
    font-weight: bold;
    color: #002b22;
}
.option {
    text-align: center; 
    margin: 10px; 
}
.recent-options-section .option p {
    font-size: 16px;
    font-weight: bold;
    color: #002b22;
}
.recent-options-section {
    margin-bottom: 40px; 
}

/* Estilos Responsivos */

/* Pantallas de hasta 1600px */
@media (max-width: 1280px) {
    .recent-options-section {
        flex-direction: column; 
        align-items: center; 
        padding: 15px; 
    }

    .recent-searches, .search-options {
        width: 45%; 
        margin-bottom: 20px; 
    }

    .recent-searches h3, .search-options h3 {
        font-size: 18px; 
    }

    .options {
        gap: 15px; 
    }

    .option img {
        width: 150px; 
    }
}

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .recent-options-section {
        padding: 10px;
    }
    .recent-options-section .recent-searches{
        width: 50%;
    }


    .recent-searches, .search-options {
        width: 60%; 
    }

    .recent-searches h3, .search-options h3 {
        font-size: 16px;
    }

    .option img {
        width: 140px; 
    }

    .recent-options-section li {
        font-size: 13px; 
    }
}

/* Pantallas de hasta 1200px */
@media (max-width: 1200px) {
    .recent-searches {
        padding: 10px; 
    }

    .search-options h3 {
        font-size: 15px;
    }

    .options {
        gap: 10px; 
    }

    .option img {
        width: 130px;
    }

    .recent-options-section li {
        font-size: 12px; 
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .recent-options-section {
        padding: 5px;
    }

    .recent-searches, .search-options {
        width: 80%; 
    }

    .recent-searches h3, .search-options h3 {
        font-size: 14px; 
    }

    .options {
        flex-direction: column; 
        gap: 15px;
    }

    .option img {
        width: 120px; 
    }

    .recent-options-section li {
        font-size: 12px; 
    }
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .recent-options-section {
        padding: 5px;
        margin-bottom: 20px; 
    }
    
    .recent-searches, .search-options {
        width: 100%; 
        margin-bottom: 15px; 
    }

    .recent-searches h3, .search-options h3 {
        font-size: 12px;
    }

    .options {
        gap: 10px; 
    }

    .option img {
        width: 100px; 
    }

    .recent-options-section li {
        font-size: 10px; 
    }
}



/*Ultima seccionn */
/* Contenedor principal */
.data-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 300px;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #003b27;
    background-color: white;
    position: relative; 
}

/* Tarjetas individuales */
.data-card {
    border-radius: 10px;
    padding: 20px;
    width: 260px;
    
}

/* Títulos */
.data-card h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #335A4E;
}

/* Tablas */
.data-table {
    width: 100%; /* Ajusta el ancho según sea necesario */
    margin: 20px auto; /* Centra la tabla */
    border-collapse: collapse; /* Para evitar bordes dobles */
    font-family: 'Noto Sans', sans-serif;
    text-align: center;
    font-size: 16px;
}

.data-table td {
    padding: 10px 20px; /* Espaciado interno */
    background-color: white; /* Fondo blanco */
    color: #333; /* Color del texto */
    border-top: 1px solid #19312C; /* Borde superior */
    border-bottom: 1px solid #19312C; /* Borde inferior */
}

/* Quitar el borde entre las dos celdas del mismo renglón */
.data-table td:first-child {
    border-right: none; /* Elimina el borde derecho de la primera celda */
}

.data-table td:last-child {
    border-left: none; /* Elimina el borde izquierdo de la última celda */
}

/* Quitar el borde vertical de la segunda y cuarta fila */
.data-table tr:nth-child(2) td,
.data-table tr:nth-child(4) td,
.data-table tr:nth-child(6) td {
    border-left: none;  /* Elimina el borde izquierdo */
    border-right: none; /* Elimina el borde derecho */
}
/* Estilo opcional para filas con clase .bordado */

/* Botón de Ver Más */
.view-more-button {
    background-color: #19312C;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    margin-left: 120px;
}

.view-more-button:hover {
    background-color: #025641;
    
}
.data-card-dos{
    border-radius: 10px;
    padding: 9x;
    width: 260px; 
}
.estilo{
    color: black;
    font-size: 11px;
    font-weight: bold;
}
/* Nota de actualización */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea el contenido a la derecha */
    gap: 5px;
    width: 100%; /* Asegura que ocupe el 100% del contenedor */
    margin:  20px auto; /* Espacio entre el final de .data-section y el footer */
    box-sizing: border-box; /* Asegura que el padding y el margen no afecten el tamaño total */
    padding-right: 20px; /* Opcional: Espacio desde el borde derecho del contenedor */

}

.footer-content-container {
    display: flex;
    flex-direction: column; /* Apilar los elementos verticalmente */
    align-items: flex-end; /* Alinea el contenido a la derecha */
    width: 100%; /* Ocupa todo el ancho del contenedor */
    
}

.actualizacion p {
    color: black;
    font-size: 0.5rem;
    margin: 0;
    white-space: nowrap;
}

.actualizacion-d p {
    font-size: 0.7rem;
    margin: 0;
    color: black;
    white-space: nowrap;
}


/* Estilos Responsivos */

/* Pantallas de hasta 1600px */
@media (max-width: 1280px) {
    .data-section {
        flex-direction: column; 
        align-items: center;
        gap: 30px;
    }

   
    .view-more-button {
        margin-left: 0; 
        width: 100%; 
    }

    .data-card h3 {
        font-size: 16px; 
    }

    .data-table {
        font-size: 14px;
    }

    .data-table td {
        padding: 8px; 
    }
}

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    

    .data-section {
        gap: 20px; 
    }

 

    .view-more-button {
        margin-left: 0; 
        width: 80%; 
    }

    .data-card h3 {
        font-size: 14px; 
    }

    .data-table {
        font-size: 12px;
    }

    .data-table td {
        padding: 6px;
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .data-section {
        gap: 15px; 
    }

    .view-more-button {
        margin-left: 0; 
        width: 90%; 
    }

    .data-card h3 {
        font-size: 12px; 
    }

    .data-table {
        font-size: 10px; 
    }

    .data-table td {
        padding: 5px; 
    }

    .footer-content {
        margin-left: 0; 
        margin-right: 0; 
    }
    .actualizacion p {
        font-size: 0.6rem; 
        margin-left: 0; 
    }

    .actualizacion-d p {
        font-size: 0.4rem;
    }
    
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .data-section {
        gap: 10px; 
    }

    .data-card {
        width: 100%; 
    }

    .view-more-button {
        margin-left: 0;
        width: 100%; 
    }

    .data-card h3 {
        font-size: 10px; 
    }

    .data-table {
        font-size: 8px; 
    }

    .data-table td {
        padding: 4px; 
    }

    .footer-content {
        margin-top: 20px; 
    }

  
}

/**Loggin*/
.loggin_principal {
    display: flex;
    width: 1000px;
    height: 400px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    min-height: 50vh; /* Usar 100% de la altura de la pantalla */
    height: 420px; /* Hace que el contenedor ocupe toda la altura de la pantalla */
}

.izquierda {
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
   
}

.logo-hacienda {
    width: 350px;
    margin-bottom: 30px;
}

.logo-aduanas {
    width: 350px;
}

.derecha {
    background-color: #8C2233;
    width: 70%;
    padding: 40px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  
}

.derecha h1 {
    margin-bottom: 30px;
    color: white;
}

.derecha label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
}

.derecha input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
}

.derecha button {
    width: 50%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}

.btn-ingresar {
    background-color: #235B4E;
    color: white;
}

.btn-registrarse {
    background-color: #6A6A6A;
    color: white;
}

.olvido-contrasena {
    margin-top: 20px;
    color: white;
    text-decoration: none;
    font-size: 0.9em;
}

.olvido-contrasena:hover {
    text-decoration: underline;
}     
/**----------2--------------------**/
.pantalla_principal {
    margin: 0 auto;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo negro con 50% de transparencia */
    color: rgb(0, 0, 0);
    border-radius: 8px;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas del mismo tamaño */
    gap: 10px; /* Espacio entre las columnas */
    padding: 20px;
    min-height: 60vh;  /* Ocupa toda la altura de la pantalla */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */    
}

.busqueda {
    display: flex;
    justify-content: center; /* Centra el botón horizontalmente */
    align-items: center; /* Alinea verticalmente */
    width: 100%; /* Ocupar todo el ancho del contenedor padre */
    margin-top: 1px; /* Espacio entre la tabla y el botón */
   
}

.boton_detalle button{
    padding: 10px 30px;
    background-color: #235B4E;
    color: white;
    margin: 10px 60px;
    border-radius: 7px;
}
.boton_destalle_dos button{
    padding: 10px 30px;
    background-color: #235B4E;
    color: white;
    margin: 10px 60px;
    border-radius: 7px; 
}
.busqueda {
    display: inline-block; /* Asegura que el input y el botón se mantengan en la misma línea */
    white-space: nowrap; /* Evita que los elementos se envuelvan en línea */
}

.busqueda input[type="text"] {
    width: 40%; /* Ajusta el input al contenedor sin hacer que el botón se desplace */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    vertical-align: middle;
    margin-left: 26%;
}

#autocomplete-results {
    position: absolute;
    width: 40%;
    margin-left: 26%;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.autocomplete-item {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.autocomplete-item:hover {
    background-color: #f0f0f0;
}

.busqueda button {
    padding: 10px 20px;
    background-color: #235B4E;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}
.columnas {
    flex-basis: 20%;  /* Ocupa el 23% en pantallas grandes */
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    
}
.busqueda_rec {
    margin-top: 1px; /* Espacio entre el título y la tabla */
    font-size: 11px;
    border-collapse: collapse; /* Elimina los espacios entre bordes */
    margin: -1px 10px;
}
.busqueda_rec table{
    width: 100px;
    border: 1px solid #ccc;
    margin: -1px;

}
.busqueda_rec th, .busqueda_rec td {
    border: 1px solid #ccc; /* Bordes para las celdas */
    text-align: left;
    padding: 6px 75px; /* Espacio interno en las celdas */
    width: 100px;
    
    
}

.busqueda_rec th {
    background-color: #f2f2f2; /* Fondo para la cabecera */
    
}
.tabla_busquedas_recientes{
    background-color: #235B4E;
    margin-bottom: 50px; /* Espacio entre el título y el icono */
    text-align: center;
    font-family: Arial, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 16px;
    margin: 8px;
    display: flex;
    justify-content: center; /* Centra el botón dentro del contenedor */
    margin-top: 10px; /* Espacio entre la tabla y el botón */

}

.titulo_uno {
    background-color: #857f7f;
    margin-bottom: 90px; /* Espacio entre el título y el icono */
    text-align: center;
    font-family: Arial, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin: 1px;
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    padding: 10px;
    
}   
a {
    text-decoration: none;
}
/* Pseudo-elemento para la punta triangular */
.titulo_uno::after {
    content: "";
    position: absolute;
    bottom: -px; /* Coloca el triángulo debajo de la caja */
    left: 50%;
    transform: translateX(-50%); /* Centra el triángulo horizontalmente */
    border-width: 40px;
    border-style: solid;
    border-color: #857f7f transparent transparent transparent; /* Color del triángulo que coincide con el fondo */
    
}
.titulo_dos {
    background-color: #aa3963;
    margin-bottom: 90px; /* Espacio entre el título y el icono */
    text-align: center;
    font-family: Arial, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin: 1px;
    padding: 10px;
}
.titulo_dos::after {
    content: "";
    position: absolute;
    bottom: -px; /* Coloca el triángulo debajo de la caja */
    left: 50%;
    transform: translateX(-167%); /* Centra el triángulo horizontalmente */
    border-width: 40px;
    border-style: solid;
    border-color: #aa3963 transparent transparent transparent; /* Color del triángulo que coincide con el fondo */
}
.titulo_tres{
    background-color: #427068;
    margin-bottom: 90px; /* Espacio entre el título y el icono */
    text-align: center;
    font-family: Arial, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin: 1px;
    padding: 10px;
}
.titulo_tres::after {
    content: "";
    position: absolute;
    bottom: -px; /* Coloca el triángulo debajo de la caja */
    left: 50%;
    transform: translateX(90%); /* Centra el triángulo horizontalmente */
    border-width: 40px;
    border-style: solid;
    border-color: #427068 transparent transparent transparent; /* Color del triángulo que coincide con el fondo */
}
.titulo_cuatro{
    background-color: #c4a378;
    margin-bottom: 90px; /* Espacio entre el título y el icono */
    text-align: center;
    font-family: Arial, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin: 1px;
    padding: 10px;
}
.titulo_cuatro::after {
    content: "";
    position: absolute;
    bottom: -px; /* Coloca el triángulo debajo de la caja */
    left: 50%;
    transform: translateX(274px); /* Centra el triángulo horizontalmente */
    border-width: 40px;
    border-style: solid;
    border-color: #c4a378 transparent transparent transparent; /* Color del triángulo que coincide con el fondo */
}
.icono_uno {
    width: 200px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Asegura que el contenido esté centrado verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    margin: 1px;
    border-radius: 8px;
    background-color: rgba(211, 211, 211, 0.5);     
    background-size: cover;
    background-position:center;
    /*opacity: 0.1; /* Marca de agua translúcida */
    z-index: -1; /* Detrás del contenido */
    border: 9px;
}
.icono_uno {
    background-color: #f5f5f5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 15;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s, opacity 0.3s;
}
.icono_uno img{
    margin-left: 50px;
}
.icono_uno:hover {
    background-color: #ddd;
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    opacity: 10.0;
}

.tipo_cambio {
    text-align: left;
    font-size: 0.9em;
    padding: 5px;
}
.tipo_cambio button{
    padding: 10px 30px;
    background-color: #235B4E;
    color: white;             /* Activa Flexbox en el contenedor */
    display: flex;
    justify-content: center; /* Centra el botón dentro del contenedor */
    margin-top: 10px; /* Espacio entre la tabla y el botón */
    border-radius: 7px;

}
.tabla_principal_inpc {
    background-color: #235B4E;
    margin-bottom: 90px; /* Espacio entre el título y el icono */
    text-align: center;
    font-family: Arial, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 16px;
    margin: 8px;
    width: 100%;
    
}
.principal_inpc table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
    margin: 8px;

}
.principal_inpc table, .principal_inpc th, .principal_inpc td {
    border: 2px solid #ccc;
}

.principal_inpc th, .principal_inpc td {
    padding: 3px;
}
.tipo-cambio-usd{
    background-color: #235B4E;
    margin-bottom: 90px; /* Espacio entre el título y el icono */
    text-align: center;
    font-family: Arial, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 16px;
    margin: 8px;
    width: 100%;
}

.tipo_cambio table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
    margin: 8px;
}

.tipo_cambio table, .tipo_cambio th, .tipo_cambio td {
    border: 1px solid #ccc;
    text-align: center;
}

.tipo_cambio th, .tipo_cambio td {
    padding: 6px;
}

.busqueda_recientes {
    text-align: left;
}

.busqueda_recientes ul {
    list-style: none;
    padding: 0;
}
/**Busqueda por Descripcion de mercancia**/
.busqueda_mercancia {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 60px;
    
}

.busqueda_mercancia label {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
    display: flex;
    margin: 20px;
}

.busqueda_mercancia input[type="text"] {
    width: 300px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    margin: 40px;
    
}

.busqueda_mercancia button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #235B4E;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    margin-left: 145px;
}
.busqueda_mercancia p{
    margin: 60px;
    display: flex;
    
}

/* Estilos Generales para la sección de búsqueda de mercancía */
.busqueda_mercancia {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 60px;
}

.busqueda_mercancia label {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
    display: flex;
    margin: 20px;
}

.busqueda_mercancia input[type="text"] {
    width: 300px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    margin: 40px;
}

.busqueda_mercancia button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #235B4E;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    margin-left: 145px;
}

.busqueda_mercancia p {
    margin: 60px;
    display: flex;
}


/* Media Queries */

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .busqueda_mercancia {
        margin-top: 40px; 
    }

    .busqueda_mercancia label {
        font-size: 16px;
        margin: 15px;
    }

    .busqueda_mercancia input[type="text"] {
        width: 250px; 
        font-size: 14px; 
        padding: 8px; 
        margin: 30px; 
    }

    .busqueda_mercancia button {
        font-size: 14px;
        padding: 8px 16px; 
        margin-left: 120px; 
    }

    .busqueda_mercancia p {
        margin: 40px;
    }
}

/* Pantallas de hasta 1024px */
@media (max-width: 1024px) {
    .busqueda_mercancia {
        margin-top: 30px; 
    }

    .busqueda_mercancia label {
        font-size: 14px; 
        margin: 10px;
    }

    .busqueda_mercancia input[type="text"] {
        width: 220px; 
        font-size: 14px; 
        padding: 7px; 
    }

    .busqueda_mercancia button {
        font-size: 14px; 
        padding: 8px 14px; 
        margin-left: 100px; 
    }

    .busqueda_mercancia p {
        margin: 20px;
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .busqueda_mercancia {
        margin: 50px; 
        justify-content: center;
        height: 100vh;
    }
    .busqueda_mercancia h1{
        font-size: 20px;
    }

    .busqueda_mercancia label {
        font-size: 14px; 
        margin: 10px auto; 
    }

    .busqueda_mercancia input[type="text"] {
        width: 200px; 
        font-size: 14px; 
        padding: 6px; 
        margin: 20px 0;
    }

    .busqueda_mercancia button {
        font-size: 14px; 
        padding: 6px 12px; 
        margin-left: 80px; 
    }

    .busqueda_mercancia p {
        margin: 10px; 
    }
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .busqueda_mercancia {
        margin-top: 15px; 
    }

    .busqueda_mercancia label {
        font-size: 12px; 
        margin: 8px 0;
    }

    .busqueda_mercancia input[type="text"] {
        width: 180px; 
        font-size: 12px; 
        padding: 5px; 
        margin: 15px 0; 
    }

    .busqueda_mercancia button {
        font-size: 12px; 
        padding: 5px 10px;
        margin-left: 60px; 
    }

    .busqueda_mercancia p {
        margin: 5px; 
    }
}

.tabla_prinicipal_descrp_mercancia {
    max-width: 100%; /* Limita el ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    padding: 20px; /* Espacio interno opcional */
}
/**Fraccion Arancelaria**/
.texto-busqueda-fraccion-arancelaria{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 60px;
    
}
.fraccion_arancelaria {
    margin-top: 50px; 
    margin-left: -400px;
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: left; 
}
.fraccion_arancelaria button{
    padding: 10px 30px;
    background-color: #235B4E;
    color: white;
    border-radius: 5px;
    margin-top: 40px;
    margin-left: 55%;

}

.fraccion_arancelaria input{ 
    padding-inline: 100px;
    margin-left: 420px;
}
.texto-busqueda-fraccion-arancelaria {
    margin-bottom: 20px;
}

.form-fraccion {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fraccion:hover {
    color: blue; 
    text-decoration: underline; 
    }

.boton-actualizar button {
    padding: 10px 20px;
    cursor: pointer;
}

/* Estilos Responsivos */

/* Pantallas de hasta 1600px */
@media (max-width: 1280px) {
    .fraccion_arancelaria {
        margin-left: -300px; 
    }

    .fraccion_arancelaria input {
        padding-inline: 80px; 
        margin-left: 300px;
    }

    .fraccion_arancelaria button {
        margin-left: 50%; 
        padding: 10px 25px; 
    }
}

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .fraccion_arancelaria {
        margin-left: -200px;
    }

    .fraccion_arancelaria input {
        padding-inline: 60px; 
        margin-left: 200px;
    }

    .fraccion_arancelaria button {
        margin-left: 45%; 
        padding: 8px 20px;
    }
}

/* Pantallas de hasta 1200px */
@media (max-width: 1200px) {
    .fraccion_arancelaria {
        margin-left: -150px;
        text-align: center; 
    }

    .fraccion_arancelaria input {
        padding-inline: 50px; 
        margin-left: 150px;
    }

    .fraccion_arancelaria button {
        margin-left: 40%;
        padding: 8px 15px; 
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .fraccion_arancelaria {
        margin-left: 0;
        text-align: center;
    }

    .fraccion_arancelaria input {
        padding-inline: 40px;
        margin-left: 0; 
    }

    .fraccion_arancelaria button {
        margin-left: 0; 
        padding: 6px 15px;
        width: 70%;
    }
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .fraccion_arancelaria {
        margin-top: 30px; 
        margin-left: 0; 
        text-align: center;
    }

    .fraccion_arancelaria input {
        padding-inline: 30px;
        width: 100%; 
        margin: 0 auto; 
    }

    .fraccion_arancelaria button {
        margin-top: 20px; 
        margin-left: 0;
        width: 100%; 
        padding: 6px 10px;
    }

    .texto-busqueda-fraccion-arancelaria {
        margin-bottom: 10px;
    }
}





/**Resultado Fraccion Arancelaria**/

.contenedor-principal {
    display: flex;
    margin: 50px auto; 
    width: 90%;
    background-color: rgba(255, 255, 255, 0.6);
    height: 80%;
    font-size: 0.7rem;
    color: #335A4E;
    
}

.lado-izquierdo {
    flex: 1;
    padding: 10px 5px;
    display: flex; 
    flex-direction: column;
    align-items: center;
    width: 20%;
    background-color: white;
}

.contenedor-centrado { 
    text-align: justify;
    padding: 10px;
    box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 800px; 
    margin: 0 auto; 
    overflow-y: auto;
    border-radius: 10px;
}

.enlaces-container {
    display: flex;
    align-items: center;
    justify-content: left;
    margin: 10px auto; 
}

.botones-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto; 
}

.button {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #19312C;
    border-radius: 10px;
    padding: 5px 10px;
    text-decoration: none;
    color: #19312C;
    margin-right: 10px;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.6);
    
}
.button i {
    margin-right: 8px;
    font-size: 1.3em;
    color: #19312C; 
    border-radius: 50%; 
    padding: 7px;
    display: flex; 
    align-items: center;
    justify-content: center;
}

.contenedor-titulo{
    border: 2px solid #335A4E;
    color: #335A4E;
    padding: 15px;
}

.fraccion-titulo { 
    font-size: 2rem; 
    font-weight: 900;
    letter-spacing: 3px;
}

.fraccion-descripcion { 
    font-size: 0.9rem; 
    margin-bottom: 10px; 
    font-weight: 600;
}

.fraccion-info { 
    font-size: 0.8rem;
    margin: 5px auto;
    line-height: 1.5;
}

.fraccion-ligie {
    font-size: 1.1rem;
    font-weight: 700;
}

.fraccion-NICOS, .fraccion-cuotas-compensatorias { 
    display: block; 
    color: white; 
    text-decoration: none; 
    background-color: #335A4E; 
    padding: 10px; 
    border-radius: 12px; 
    margin: 10px 10px;
    
}

.img-container {
    width: 100%; 
    max-width: 250px; 
    height: auto; 
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
}

.img-cap {
    width: 100%;
    height: auto;
    object-fit: cover; 
    
}
.lado-derecho {
    flex: 2.5;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 80%;
    padding: 10px 0;
    background-color: white;
}

.lado-derecho h2 {
    font-size: 0.8rem;
    font-weight: 500;
}

.tratados-container, .cupos, .acuerdos, .prohibidas {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

.categoria {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(230, 230, 230, 0.2);
    box-shadow: 0 4px 4px rgba(25, 49, 44, 0.6);
}

.categoria h2{
    margin-top: 0;
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    white-space: nowrap; 
}

.pais {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
    padding: 10px;
}
.pais:hover {
    cursor: pointer;
}

.texto-pais {
    display: flex;
    flex-direction: column;
}

.pais-nombre, .sector-info, .region-info {
    white-space: normal;
    text-align: left;
    text-decoration: underline;
    font-weight: 400;
}

.bandera {
    width: 40px;
    height: 26px;
    object-fit: cover;
    border: 1px solid #ccc;
}

.etiqueta {
    white-space: normal;
    text-align: left;
    font-size: 0.6rem;
}

.promocion-franja, .acuerdos {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.box {
    border: 1px solid #ccc;
    padding: 10px;
    width: 49.5%;
    background-color: rgba(230, 230, 230, 0.2);
    box-shadow: 0 4px 4px rgba(25, 49, 44, 0.6);
    display: flex;
    flex-direction: column;
    height: auto; 
}

.region-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.region-info, .sector-info {
    margin-top: 7px;
}

.region-info:hover, .sector-info:hover {
    cursor: pointer;
}
.region {
    display: flex;
    flex-direction: column;
    width: calc(50% - 12px); 
}

/* Estilo para la bandera de LIGIE */
.ligie-bandera {
    width: 40px; 
    height: 26px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: 1px solid #ccc;
    background-color: black;
    font-weight: bold;
}

/* Estilo para la etiqueta roja */
.etiqueta-excluida {
    color: red;
    font-weight: 600;
    padding: 10px;
}

/* Descargas en navbar */

.dropdown {
    padding-top: 5.5px;
}
.dropbtn i{
    margin-left: 5px;
    font-size: 1rem;
}

.dropdown .dropbtn {
    background-color: #335A4E; 
    color: #ccc; 
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #E6E6E6; 
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%; /* Para que el contenido se muestre justo debajo del botón */
    left: 0;
}

/* #enm6, #enm7 {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
} */

.dropdown-content a:hover {
    background-color: rgba(51, 90, 78, 0.2);
}

.dropdown:hover .dropdown-content {
    display: block; /* Mostrar el contenido del dropdown al pasar el cursor */
}

.dropdown:hover .dropbtn {
    color: white; 
}



@media screen and (max-width: 1440px) and (max-height: 900px) {
  
  .contenedor-principal {
    height: 75%;
    font-size: 0.7rem;
  }
  .lado-izquierdo {
    padding: 5px 5px;
  }
  .fraccion-titulo { 
    font-size: 1.3rem; 
  }
  .fraccion-descripcion { 
    font-size: 0.8rem; 
  }
  .fraccion-info{
    line-height: 1;
  }
  .categoria{
    padding: 5px;
  }
  .bandera {
    width: 36px;
    height: 24px;
  }



}


/* Media Queries para Responsive Design */
@media screen and (max-width: 1200px) {
    .lado-derecho, .lado-izquierdo {
        width: 100%;
    }

    .contenedor-principal {
        flex-direction: column;
        height: auto;
        padding-bottom: 50px;
    }

    .contenedor-centrado {
        width: 90%;
    }

}

@media screen and (max-width: 768px) {
    .region {
        width: 100%; 
    }

    .botones-container, .enlaces-container {
        flex-direction: column;
    }

    .fraccion-titulo, .fraccion-descripcion, .fraccion-info, .fraccion-ligie {
        font-size: 1rem; 
    }

    .button {
        margin-bottom: 10px; 
    }

    .img-cap {
        max-width: none;
    }

    .contenedor-centrado {
        width: 95%;
    }
}


/**Busqueda por seccion Arancelaria*/
.nav_bar {
    background-color: #235B4E;;
    overflow: hidden;
}

.nav_bar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

.nav_bar a:hover {
    background-color: #235B4E;
}

.seccion_arancelaria {
    padding: 20px;
    text-align: center;
    z-index: 150px;
    padding-bottom: 100px;
}

.secciones {
    background-color: #E6E6E6;
    /* background-color: rgba(230, 230, 230, 0.6); */
    padding: 20px;
    margin: 0 auto;
    width: 100%;
    border-radius: 10px;
   

}
.busque-secc-aran{
    color: #19312C;
    margin-top: 20px;
    font-weight: 900;
}
.secciones ul {
    list-style-type: none;
    padding: 0;
}

.secciones li {
    text-align: left;
    padding: 10px 0;
    font-size: 0.7rem;
}

.secciones li a {

    text-decoration: none;
    color: #000;
    margin-top: 10px;
}

.secciones li a:hover {
    text-decoration: underline;
}


/* Estilos Generales */
.seccion_arancelaria {
    padding: 20px;
    text-align: center;
    z-index: 150px;
    padding-bottom: 100px;
}

.secciones {
    background-color: #E6E6E6;
    /* background-color: rgba(230, 230, 230, 0.6); */
    padding: 20px;
    margin: 0 auto;
    width: 100%;
    border-radius: 10px;
}

.busque-secc-aran {
    color: #19312C;
    margin-top: 20px;
    font-weight: 900;
}

.secciones ul {
    list-style-type: none;
    padding: 0;
}

.secciones li {
    text-align: left;
    padding: 10px 0;
    font-size: 0.7rem;
}

.secciones li a {
    text-decoration: none;
    color: #000;
    margin-top: 10px;
}

.secciones li a:hover {
    text-decoration: underline;
}

/* Media Queries */

/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .seccion_arancelaria {
        padding: 15px;
    }

    .secciones {
        padding: 15px; 
        width: 95%; 
    }

    .busque-secc-aran {
        font-size: 1.2rem;
        margin-top: 15px;
    }

    .secciones li {
        font-size: 0.75rem; 
    }
}

/* Pantallas de hasta 1024px */
@media (max-width: 1024px) {
    .seccion_arancelaria {
        padding: 10px;
        padding-bottom: 80px; 
    }

    .secciones {
        padding: 10px;
        width: 90%; 
    }

    .busque-secc-aran {
        font-size: 1rem; 
    }

    .secciones li {
        font-size: 0.8rem; 
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px) {
    .seccion_arancelaria {
        padding: 10px;
        padding-bottom: 60px; 
    }

    .secciones {
        padding: 10px;
        width: 85%;
    }

    .busque-secc-aran {
        font-size: 0.9rem; 
        margin-top: 10px;
    }

    .secciones li {
        font-size: 0.7rem; 
    }
}

/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .seccion_arancelaria {
        padding: 5px;
        padding-bottom: 40px;
    }

    .secciones {
        padding: 5px;
        width: 100%; 
    }

    .busque-secc-aran {
        font-size: 0.8rem; 
    }

    .secciones li {
        font-size: 0.8rem; 
    }

    .secciones li a {
        font-size: 0.7rem; 
    }
}

/**Notas nacionales*/
.not-nacionales{
    color: #19312C;
    margin-top: 20px;
    font-weight: 900;
}
.nota-aviso {
    background-color: #E6E6E6; 
    /* background-color: rgba(230, 230, 230, 0.6);  */
    border-left: 4px solid #19312C; 
    padding: 10px 15px;
    margin: 20px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.nota-aviso strong {
    color: #19312C; 
}

.notas_nacionales{
    padding: 20px 20px 100px;
}
.menu_titulo {
    text-align: center;
    margin: 20px 0;
    font-size: 24px;
}
.menu_secciones {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #c9c9c9;
    text-align: center;
}
.secciones h2 {
    margin-bottom: 10px;
    font-weight: bold;
    
}
.capitulo {
    margin-bottom: 10px;
    font-weight: bold;
}
.notas {
    font-size: 14px;
    color: #242424;
}
/**Jerarquía de secciones arancelarias y notas nacionales*/
    /* Estilos generales */
    /* Sección principal (Nivel 1) */
    .seccion {
        font-weight: bold;
        font-size: 0.9rem;
    }
    .seccion i {
        font-weight: 900;
    }


    /* Contenedor de Notas y Capítulos de la Sección (Nivel 2)*/
    .notas-container, .capitulos-container,  .notas-subpartida-container{
        margin: 10px 0 0 40px;
    }

    /* Títulos de Capítulo (Nivel 3) */
    .capitulo-item, .nota-item {
        margin-left: 40px;
        
        
    }

    /* Notas y Partidas dentro de cada Capítulo (Nivel 4) */
    .notas-capitulo-container, .partidas-capitulo-container {
        
        margin-left: 40px;
        margin: 10px 0 0 40px;
       
       
    }

    /* Elementos de Notas y Partidas (Nivel 5) */
    .nota-capitulo-item, .partida-capitulo-item {
        /* font-size: 1em; */
        font-weight: bold;
        margin-left: 40px;
    
    }

    /* Lista de Incisos dentro de Notas del Capítulo o Partidas (Nivel 6)*/
    .incisos-list, .subpartidas-list, .fracciones-list {

        font-style: italic;
        margin-left: 40px;
    }
    /* Evitar desplazamiento al desplegar sección */
    .hidden {
        display: none;
    }


/**Indicadores*/
.container-indicadores {
    width: 80%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
.titulo-indicadores {
    text-align: center;
    background-color: #335A4E;
    color: white;
    padding: 10px 0;
    margin: 10px;
    width: 75%;
    margin-left: -5px;
    margin-top: 25px;
  }
  
  /* Card Styles */
.cards {
    display: flex;
    gap: 1rem;
    margin-top: 20px;
}

.indicadores {
    display: flex;
    flex-direction: column; /* Mantiene el título y las tarjetas alineados verticalmente */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con transparencia */
    margin: 10px auto; /* Centra el contenedor horizontalmente */
    margin-top: 10px;
    width: 90%; /* Ajusta el ancho del fondo */
    max-width: 1200px; /* Limita el ancho máximo */
    height: 520px; /* Ajusta la altura automáticamente */
    border-radius: 8px; /* Bordes redondeados para un diseño más limpio */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para darle un efecto de elevación */
}

.titulo-inidicadores h1{
    color: #335A4E;
}

.contenedor-cards {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap; /* Permite que las tarjetas se acomoden en varias filas */
}
.card {
    flex: 1;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 30rem; /* Ancho inicial */
    max-width: 90%; /* Asegura que no excedan el ancho de la pantalla */
    text-align: left;
    height: auto; /* Ajusta la altura automáticamente */
    min-height: 60vh;
}
.cont-uno{
    color: #19312C; /* Color del texto */
    border: 2px solid #2b755c; /* Contorno verde */
    padding: 10px; /* Espaciado interno ampliado */
    display: inline-block; /* Permite que el contenedor se ajuste solo al contenido */
    border-radius: 5px; /* Esquinas redondeadas */
    width: 320px; /* Ancho fijo del contenedor (ajusta según lo necesario) */
    margin-left: 110px; /* Mueve el contenedor hacia la derecha */
    text-align: center; /* Centra el texto dentro del contenedor */
    font-size: 14px;
    font-weight: bold; /* Texto en negrita */
}
.cont-uno p{
    color: #19312C;
}
.card h2 {
    color: #2b755c;
    margin-bottom: 10px;
    background-color: #335A4E;
    margin: -20px -20px 20px -20px;
    padding: 10px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    font-size: 0.9rem;
}
  

.selects-container {
    display: flex; /* Modelo flexbox para la alineación horizontal del contenedor */
    margin-top: 20px; /* Espaciado superior opcional */
}

.selects {
    display: flex; /* Flexbox para alinear los elementos horizontalmente */
    align-items: center; /* Alinea verticalmente al centro */
    gap: 10px; /* Espaciado entre el label y los selectores */
    font-family: Arial, sans-serif; /* Fuente limpia y moderna */
}

.selects select {
    width: 180px; /* Ajusta el ancho del selector */
    font-size: 14px; /* Tamaño del texto */
    padding: 5px; /* Espaciado interno */
    border: 1px solid #ccc; /* Define un borde estándar */
    border-radius: 4px; /* Bordes redondeados */
    background-color: #fff; /* Fondo blanco */
    color: #19312C; /* Color del texto */
}

.fecha-inpc {
    font-weight: bold; /* Texto en negrita */
    margin: 0; /* Elimina márgenes adicionales */
    color: #19312C; /* Color del texto del label */
    font-size: 14px; /* Tamaño del texto del label */
}

.boton-inid-uno button {
    background-color: #a71d4f;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    margin-left: 70%;
    width: 25%;
    margin-top: 20px;
    padding: 10px;
    font-size: 0.9rem;
    text-align: center;
    padding: 4px;
    border: 1px solid #ddd;
    background-color: #335A4E;
    font-weight: bold;
}

.boton-inid-uno button:hover {
    background-color: #89193f;
}

/*Esrtilo tabla tipo de cambio*/
.cont-tip-cambio{
    color: #19312C; /* Color del texto */
    border: 2px solid #2b755c; /* Contorno verde */
    padding: 10px; /* Espaciado interno ampliado */
    display: inline-block; /* Permite que el contenedor se ajuste solo al contenido */
    border-radius: 5px; /* Esquinas redondeadas */
    width: 320px; /* Ancho fijo del contenedor (ajusta según lo necesario) */
    margin-left: 110px; /* Mueve el contenedor hacia la derecha */
    text-align: center; /* Centra el texto dentro del contenedor */
    font-size: 14px;
    font-weight: bold; /* Texto en negrita */
}
.titulo-tipo-cambio  h2{
    text-align: center;
    background-color: #335A4E;
    color: white;
    padding: 10px 0;
    margin: 10px;
    width: 30%;
    margin-left: -5px;
    margin-top: 25px;

}
.cont-tip-cambio p{
    color:#335A4E;
}
.form-tip-cambio {
    display: flex; /* Flexbox para alinear los elementos en una fila */
    align-items: center; /* Alinea verticalmente al centro */
    gap: 20px; /* Espaciado entre el label y los inputs */
    font-family: Arial, sans-serif; /* Fuente limpia y moderna */
    margin-top: 20px;
    justify-content: center; /* Centra todo el formulario horizontalmente */
}

.form-tip-cambio label {
    font-weight: bold; /* Texto en negrita */
    color: #19312C; /* Color del texto */
    font-size: 14px; /* Tamaño de la fuente */
    text-align: left; /* Alinea el texto a la izquierda */
    margin-right: 20px; /* Espaciado entre el texto y los selectores */
}

.form-tip-cambio .inputs {
    display: flex; /* Flexbox para los inputs */
    gap: 15px; /* Espaciado entre los inputs */
    justify-content: flex-start; /* Alinea los inputs a la izquierda */
}

.form-tip-cambio input[type="date"] {
    padding: 5px; /* Espaciado interno más grande */
    font-size: 14px; /* Tamaño de la fuente */
    border: 1px solid #2b755c; /* Borde verde como en la imagen */
    border-radius: none; /* Bordes más redondeados */
    width: 180px; /* Ajusta el ancho de los inputs */
}


.boton-indi-dos button {
    background-color: #a71d4f;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    margin-left: 70%;
    width: 25%;
    margin-top: 20px;
    padding: 10px;
    margin-left: 70%;
    margin-top: 20px;
}

.form-tip-cambio button:hover {
    background-color: #246c54; /* Cambia el color al pasar el cursor */
}
/*Estilos tabla dos*/
.tabla-usd {
    width: 100%; /* Ajusta el ancho según sea necesario */
    margin: 20px auto; /* Centra la tabla */
    border-collapse: collapse; /* Para evitar bordes dobles */
    font-family: 'Noto Sans', sans-serif;
    text-align: center;
    font-size: 16px;
}

.tabla-usd td {
    padding: 10px 20px; /* Espaciado interno */
    background-color: white; /* Fondo blanco */
    color: #333; /* Color del texto */
    border-top: 1px solid #19312C; /* Borde superior */
    border-bottom: 2px solid #19312C; /* Borde inferior */
}
.tabla-usd tr{
    background-color: #19312C;
    color:white;
    text-align: left;

}
/* Quitar el borde entre las dos celdas del mismo renglón */
.tabla-usd td:first-child {
    border-right: none; /* Elimina el borde derecho de la primera celda */
}

.tabla-usd td:last-child {
    border-left: none; /* Elimina el borde izquierdo de la última celda */
}

/* Quitar el borde vertical de la segunda y cuarta fila */
.tabla-usd tr:nth-child(2) td,
.tabla-usd tr:nth-child(4) td,
.tabla-usd tr:nth-child(6) td {
    border-left: none;  /* Elimina el borde izquierdo */
    border-right: none; /* Elimina el borde derecho */
}
.footer-content-indi {
    position: absolute; /* Cambié de absolute a relative para que esté dentro del flujo del contenedor */
    top: 95%; /* Elimina el desplazamiento desde el top */
    left: 50%; /* Elimina el desplazamiento desde el left */
    text-align: left; /* Alinea el texto hacia la izquierda */
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: flex-start; /* Alinea los textos al inicio (lado izquierdo) */
    gap: 5px; /* Espaciado entre los elementos */
    z-index: 10;
    margin-top: 50px; /* Espacio entre el final de los cards y el footer */
}

.actualizacion-indi p {
    color: black;
    font-size: 0.5rem;
    margin: 0; /* Elimina márgenes predeterminados */
    white-space: nowrap;
    margin-left: 194%;
    
}

.actualizacion-d-indi p {
    font-size: 0.7rem;
    margin: 0; /* Elimina márgenes predeterminados */
    color: black;
    white-space: nowrap;
    margin-top: 40%;
}
.informacion-actualizacion {
    text-align: right; /* Centra los párrafos */
    font-size: 0.7rem; /* Ajusta el tamaño del texto */
    color: #555; /* Color gris similar al de la imagen */
    margin: 30px 0; /* Espaciado vertical */
    padding: 20px; /* Opcional: Espaciado interno */
    background-color: white; /* Fondo claro para destacar la sección */
}
/*Estilo de modals de indicadores*/
.modal-unique {
    display: none; /* Por defecto oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 1000; /* Asegúrate de que esté encima de otros elementos */
}

.modal-content-unique {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    width: 80%;
    max-width: 600px;
    display: flex;
    flex-direction: column; /* Organiza los elementos en columna */
    align-items: center; /* Centra el contenido */
}

.close-unique {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

.table-container {
    width: 100%; /* Asegura que la tabla ocupe todo el ancho disponible */
    margin-bottom: 20px; /* Espacio entre la tabla y el botón */
    font-family: 'Noto Sans', sans-serif;
}
.resultado-modal-inpc{
    background-color: #335A4E;
    color:white;
    width: 100%;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
}
.resultato-modal-tip-cambio{
    background-color: #335A4E;
    color:white;
    width: 100%;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
}
.boton-rojo {
    background-color: #a71d4f; /* Rojo brillante */
    color: white; /* Texto blanco */
    border: none; /* Sin bordes */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de la fuente */
    font-family: 'Noto Sans', sans-serif; /* Fuente */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease; /* Efecto suave al pasar el ratón */
}

.boton-rojo:hover {
    background-color: #C0392B; /* Rojo más oscuro cuando se pasa el ratón */
}

/**Busquedas Recienetes-2*/
.busqueda_reciente_dos {
    padding: 20px;
    text-align: center;
    
}

.busqueda_reciente_dos h1 {
    font-size: 24px;
    color: #333;
}

.busqueda_reciente_dos ul {
    list-style: none;
    padding: 0;
    margin: 20px 300px;
}

.busqueda_reciente_dos li {
    background-color: #b3b3b3;
    color: rgb(8, 8, 8);
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 18px;
    align-items: center;
    text-align: center;
}

.lista_busqueda_reciente_dos li:hover {
    background-color: #b1abab;
}

.boton-descargar {
    margin-top: 20px;
}

.boton-descargar button {
    background-color: #235B4E;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 50px;
}

.boton-descargar button:hover {
    background-color: #235B4E;
}
        
/*BUSQUEDA POR DESCRIPCION DE LA MAERCANCIA */
.tabla_principal {
    display: flex;
    flex-direction: column;
    background-color:#335A4E;
    padding: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 70%;
    letter-spacing: 3px;
}
.tabla_principal h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    left: 0;
    text-align: center;
    font-weight: 900;
    color:white;
}

.texto_res h3 {
    font-size: 1.9rem;
    margin-top: 15px;
    padding: 10px 10px;
    color:#335A4E;
    font-size: 900;
}

.jerarquia {
    background-color: rgba(255, 255, 255, 0.5);         
    padding: 20px;
    padding-left: 100px;
    margin: 10px auto;
    width: 95%;
    border-radius: 10px;
    flex: 1; 
    min-height: 500px;
    max-height: calc(70vh - 100px); 
    overflow-y: auto;
    box-sizing: border-box;
}
       
.jerarquia .capitulo {
    font-weight: bold;
    font-size: 0.7rem;
    color: #335A4E;
    margin-top: 15px;
}

.jerarquia .partida {
    font-weight: bold;
    margin-left: 20px;
    color: black;
    margin-top: 10px;
    font-size: 0.7rem;
}

.jerarquia .subpartida {
    font-weight: bold;
    margin-left: 40px;
    color: black;
    margin-top: 8px;
    font-size: 0.7rem;
}

.jerarquia .fraccion {
    margin-left: 60px;
    color: black;
    margin-top: 5px;
    font-size: 0.7rem;
}
.jerarquia .capitulo,
.jerarquia .partida,
.jerarquia .subpartida,
.jerarquia .fraccion {
    cursor: pointer;
    display: block;
}

.jerarquia .capitulo {
    display: block; /* El capítulo principal siempre es visible */
}

.fraccion:hover {
color: blue; /* Cambia a azul al pasar el cursor */
text-decoration: underline; /* Opcional, añade subrayado al pasar el cursor */
}

.contenedor-capitulo {
    display: flex;
    justify-content: space-between; /* Espacia el contenido y la imagen */
    align-items: center; /* Alinea verticalmente el contenido */
    gap: 10px; /* Espaciado entre el contenido y la imagen */
    flex-wrap: wrap; /* Permite que los elementos se ajusten si es necesario */
}

.contenido-capitulo {
    flex: 1; /* Ocupa todo el espacio disponible excepto para la imagen */
    word-wrap: break-word; /* Asegura que el texto no se corte y se ajuste si es necesario */
}

.imagen-capitulo {
    max-width: 100px; /* Ajusta el tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-left: 10px; /* Espacio entre el texto y la imagen */
    flex-shrink: 0; /* Evita que la imagen se reduzca */
}

/* Estilos Generales para la tabla principal */
.tabla_principal {
    display: flex;
    flex-direction: column;
    background-color: #335A4E;
    padding: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 70%;
    letter-spacing: 3px;
}

.tabla_principal h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    left: 0;
    text-align: center;
    font-weight: 900;
    color: white;
}

.texto_res h3 {
    font-size: 1.9rem;
    margin-top: 15px;
    padding: 10px 10px;
    color: #335A4E;
    font-size: 900;
}

.jerarquia {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    padding-left: 100px;
    margin: 50px auto;
    width: 95%;
    border-radius: 10px;
    flex: 1;
    max-height: calc(70vh - 100px);
    overflow-y: auto;
    box-sizing: border-box;
}

.jerarquia .capitulo {
    font-weight: bold;
    font-size: 0.7rem;
    color: #335A4E;
    margin-top: 15px;
}

.jerarquia .partida {
    font-weight: bold;
    margin-left: 20px;
    color: black;
    margin-top: 10px;
    font-size: 0.7rem;
}

.jerarquia .subpartida {
    font-weight: bold;
    margin-left: 40px;
    color: black;
    margin-top: 8px;
    font-size: 0.7rem;
}

.jerarquia .fraccion {
    margin-left: 60px;
    color: black;
    margin-top: 5px;
    font-size: 0.7rem;
}

.jerarquia .capitulo,
.jerarquia .partida,
.jerarquia .subpartida,
.jerarquia .fraccion {
    cursor: pointer;
    display: block;
}

.jerarquia .capitulo {
    display: block; /* El capítulo principal siempre es visible */
}

.fraccion:hover {
    color: blue; /* Cambia a azul al pasar el cursor */
    text-decoration: underline; /* Opcional, añade subrayado al pasar el cursor */
}

.contenedor-capitulo {
    display: flex;
    justify-content: space-between; /* Espacia el contenido y la imagen */
    align-items: center; /* Alinea verticalmente el contenido */
    gap: 10px; /* Espaciado entre el contenido y la imagen */
    flex-wrap: wrap; /* Permite que los elementos se ajusten si es necesario */
}

.contenido-capitulo {
    flex: 1; /* Ocupa todo el espacio disponible excepto para la imagen */
    word-wrap: break-word; /* Asegura que el texto no se corte y se ajuste si es necesario */
}

.imagen-capitulo {
    max-width: 100px; /* Ajusta el tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-left: 10px; /* Espacio entre el texto y la imagen */
    flex-shrink: 0; /* Evita que la imagen se reduzca */
}


/* Pantallas de hasta 1280px */
@media (max-width: 1280px) {
    .tabla_principal {
        width: 80%; 
    }

    .tabla_principal h1 {
        font-size: 1.8rem; 
    }

    .texto_res h3 {
        font-size: 1.6rem;
    }

    .jerarquia {
        padding-left: 50px; 
        width: 90%; 
    }

    .jerarquia .capitulo,
    .jerarquia .partida,
    .jerarquia .subpartida,
    .jerarquia .fraccion {
        font-size: 0.8rem; 
        margin-left: 15px;
    }

    .contenedor-capitulo {
        gap: 8px; 
    }

    .imagen-capitulo {
        max-width: 90px; 
    }
}

/* Pantallas de hasta 1024px */
@media (max-width: 1024px) {
    .tabla_principal {
        width: 90%; 
    }

    .tabla_principal h1 {
        font-size: 1.6rem; 
    }

    .texto_res h3 {
        font-size: 1.5rem; 
    }

    .jerarquia {
        padding-left: 30px; 
        width: 95%; 
    }

    .jerarquia .capitulo,
    .jerarquia .partida,
    .jerarquia .subpartida,
    .jerarquia .fraccion {
        font-size: 0.75rem; 
        margin-left: 10px; 
    }

    .contenedor-capitulo {
        gap: 5px; 
    }

    .imagen-capitulo {
        max-width: 80px;
    }
}

/* Pantallas de hasta 768px */
@media (max-width: 768px)  {
    .tabla_principal {
        width: 100%; 
        padding: 10px; 
       
    }

    .tabla_principal h1 {
        font-size: 1.2rem; 
    }

    .texto_res h3 {
        font-size: 1.3rem; 
    }

    .jerarquia {
        padding-left: 20px; 
        width: 100%;
        margin: 50px 0;
        height: auto;
    }

    .jerarquia .capitulo,
    .jerarquia .partida,
    .jerarquia .subpartida,
    .jerarquia .fraccion {
        font-size: 0.7rem; 
        margin-left: 0; 
    }

    .contenedor-capitulo {
        flex-direction: column; 
    }

    .imagen-capitulo {
        max-width: 70px; 
    }
}



/* Pantallas de hasta 480px */
@media (max-width: 480px) {
    .tabla_principal {
        padding: 5px; 
        width: 100%; 
    }

    .tabla_principal h1 {
        font-size: 1.2rem; 
    }

    .texto_res h3 {
        font-size: 1.1rem;
    }

    .jerarquia {
        padding-left: 10px; 
    }

    .jerarquia .capitulo,
    .jerarquia .partida,
    .jerarquia .subpartida,
    .jerarquia .fraccion {
        font-size: 0.6rem; 
        margin-left: 0; 
    }

    .contenedor-capitulo {
        flex-direction: column; 
        gap: 5px; 
    }

    .imagen-capitulo {
        max-width: 50px; 
    }
}


/* Tabla */
.tabla_prinicipal_descrp_mercancia table {
    width: 95%;
    border-collapse: collapse;
    margin: 20px 35px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px;
}

.tabla_prinicipal_descrp_mercancia thead {
    background-color: #285349;
    color: white;
}

.tabla_prinicipal_descrp_mercancia th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

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

.tabla_prinicipal_descrp_mercancia tbody tr:nth-child(odd) {
    background-color: #d1e7dd;
}

.tabla_prinicipal_descrp_mercancia{
    tbody td:nth-child(1),
    tbody td:nth-child(2),
    tbody td:nth-child(3),
    tbody td:nth-child(4){
        text-align: center;
        font-size: 14px;
    }
}
.tabla_prinicipal_descrp_mercancia{
tbody td:nth-child(5) {
    text-align: left;
    font-size: 14px;
    }
}
/* PUBLICACIONES DOF*/
.contenido-scroll-publicaciones-dof {
    margin-top: -50px; /* Espacio para el header */
    margin-bottom: 0px; /* Espacio para el footer */
    padding: 20px;
    height: calc(150vh - 10px); /* Altura restante menos el espacio ocupado por el header y el footer */
    overflow-y: auto; /* Activa el scroll vertical en el contenido */
}
.principal_publicaciones_dof {
    max-width: 500px;
    margin: 31px;
    padding-left: 0px;
    border: 1px solid #ccc;
    box-shadow: 0px px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.text_publicaciondes_dof h1 {
    margin: 30px;
    padding: 10px;
    color: #000000;
    text-align: center;
}

.tabla_publicaciones_dof {
    display: flex;
    justify-content:space-between
  
}

.principal_publicaciones_dof input[type="date"], select {
    width: 49.5%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
}

.tabla_pulicaciones_dof table {
    width: 95%;
    border-collapse: collapse;
    margin: 20px 35px;
    font-size: 12px;
    
    
}

.tabla_pulicaciones_dof table th,.tabla_pulicaciones_dof table td {
    padding: 15px;
    text-align: left;
    border: 1px solid #ddd;
}

.tabla_pulicaciones_dof thead {
    background-color: #285349;
    color: white;
    
}

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

.tabla_pulicaciones_dof tbody tr:nth-child(odd) {
    background-color: #d1e7dd;
}

.boton_descargar_publiciaciones_dof  {
    display: block;
    width: 15%;
    padding: 15px;
    margin: 30px;
    background-color: #8C2233;
    color: white;
    text-align: center;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
}


/**Modal fracciones */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 6% 10%;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/*Intranet*/

.icon {
    width: 30%; /* Ajusta el ancho deseado */
    height: auto; /* Mantiene las proporciones de la imagen */
    display: block; /* Asegura que se comporte como un bloque */
    margin: 0 auto 10px; /* Centra la imagen horizontalmente y añade espacio inferior */
    transition: transform 0.3s ease; /* Transición para el ícono */
}

.icon:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño del ícono */
}



.card-link {
    display: block; /* Hace que el enlace abarque toda la tarjeta */
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Mantiene el color original del texto */
    height: 100%; /* Asegura que el enlace abarque toda la tarjeta */
}

.card-intranet:hover {
    transform: translateY(-10px); /* Mueve la tarjeta hacia arriba */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Aumenta la sombra */
}

.icon-fracc {
    width: 28%; /* Ajusta el ancho deseado */
    height: auto; /* Mantiene las proporciones de la imagen */
    display: block; /* Asegura que se comporte como un bloque */
    margin: 0 auto 10px; /* Centra la imagen horizontalmente y añade espacio inferior */
}

.card-link h3, .card-link p {
    margin: 0; /* Elimina márgenes por defecto */
}

.icon-estadisica {
    width: 28%; /* Ajusta el ancho deseado */
    height: auto; /* Mantiene las proporciones de la imagen */
    display: block; /* Asegura que se comporte como un bloque */
    margin: 0 auto 10px; /* Centra la imagen horizontalmente y añade espacio inferior */
    transition: transform 0.3s ease; /* Transición para el ícono */
}

.icon-estadisica:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño del ícono */
}
.card-intranet h3 {
    margin-top: 0;
    color: #00523b;
}

/**DISEÑO RESPONSIVO */


@media (max-width: 1024px) and (min-width: 768px) {
    /* Estilos para pantallas medianas y laptops */
    body {
        overflow-y: scroll; /* Activa el scroll vertical si es necesario */
        background-size:cover; /* Ajusta el fondo para que quepa dentro del contenedor */
        background-position: top; /* Posiciona la imagen en la parte superior */
        height: 120vh; /* Asegura que el body cubra toda la ventana */

    }
    
 

    .imagen_logo_footer img {
        max-width: 80px; /* Ajusta el tamaño del logo */
        width: auto;
        margin-top: -12px; /* Remueve el margen superior para centrar */
        transform: translateX(10px); /* Asegura que esté centrado */
    }

    .actualizacion p {
        margin-left: 860px; /* Elimina el margen izquierdo excesivo */
        font-size: 0.45em; /* Ajusta el tamaño de la fuente */
        text-align: right; /* Alineación a la derecha */
        top: -40px; /* Ajusta la posición vertical */
        right: -1140%; /* Ajusta la posición horizontal */
        font-size: 0.5em; /* Tamaño de fuente más grande */
    }
    .actualizacion-d p {
        top: -45px; /* Ajusta la posición vertical */
        right: -1150%; /* Ajusta la posición horizontal */
        font-size: 0.7em; /* Tamaño de fuente más grande */
    }
    /*ingreso de sesion*/
    .main{
        padding: 15px;
    }
    .titulo_clasificacion_aranclaria h1 {
        font-size: 2.7em; /* Reduce el tamaño del texto para pantallas pequeñas */
        padding: 10px; /* Ajusta el padding para adaptarlo a pantallas pequeñas */
        margin: 40px;
    }
    .clasificacion_tarifa h2 {
        font-size: 1.4em;
        margin: 7px;
        padding: 10px;
    
    }
    
    .linea_decorativa{
        width: 450px;
        height: 5px;
    }

    .parrafos p {
        padding: 40px;
        margin: 7px;
        font-size: 0.9em;
        padding: 8px;
        text-align: justify;
        margin-bottom: 20px;
    }


    /*Pntalla index*/
    .pantalla_principal {
        width: 100%;
        padding: 10px;
        min-height: 70vh;
        height: auto;
        grid-template-columns: 1fr; /* Cambiar a una sola columna */
        gap: 5px; /* Reducir el espacio entre elementos */
    }

    .busqueda {
        margin-top: 35px;
    }

    .busqueda input[type="text"] {
        width: 60%; /* Ajustar el ancho del input */
        font-size: 0.8em; /* Aumentar un poco el tamaño de la fuente */
    }

    .busqueda button {
        padding: 8px 16px; /* Ajusta el padding del botón */
        font-size: 0.9em; /* Ajusta el tamaño de la fuente */
        margin-left: 5px;
        border-radius: 7px;
    }

    .boton_detalle button {
        padding: 8px 20px; /* Reducir padding */
        margin: 55px 55px; /* Ajustar margen para pantallas más pequeñas */
        font-size: 0.9em;
        margin-top: 40px;
        overflow: hidden;
        border-radius: 7px;
    }

    .columnas {
        margin-bottom: 100px; /* Espacio inferior */
        height: 350px; /* Aumenta la altura de las columnas */
        margin: 0 auto;
        width: 100%;
        margin-top: -150px;
    }

    .busqueda_rec {
        margin-top: 1px;
        font-size: 0.8em; /* Reducir tamaño de la fuente */
        width: 100%; /* Ajustar al 100% del ancho */
    }

    .busqueda_rec table {
        width: 90%; /* Ocupa todo el ancho disponible */
        font-size: 0.8em; /* Ajusta el tamaño de la fuente */
        margin-left: 10px;      
        
    }

    .busqueda_rec th, .busqueda_rec td {
        padding: 4px 10px; /* Ajustar padding en las celdas */
        text-align: center;
        font-size: 1.2em;
    }

    .tabla_busquedas_recientes {
        font-size: 14px; /* Ajustar tamaño del texto */
        margin: 10px;
        margin-top: -60px;
    }

    .titulo_uno, .titulo_dos, .titulo_tres, .titulo_cuatro {
        font-size: 0.8em; /* Reducir el tamaño de los títulos */
        padding: 9px; /* Ajustar el padding */
       width: 100%;
    }

    .icono_uno {
        width: 150px; /* Ajustar tamaño del icono */
        height: 350px; /* Ajustar altura del icono */
    }
    .titulo_uno::after {
        border-width: 40px; /* Reducir el tamaño del triángulo */
        left: 50%;
        transform: translateX(-50%); /* Mantener el triángulo centrado */       
    }
    .titulo_dos::after {
        border-width: 40px; /* Reducir el tamaño del triángulo */
        left: 50%;
        transform: translateX(-146%); /* Mantener el triángulo centrado */       
    }
    .titulo_tres::after {
        border-width: 40px; /* Reducir el tamaño del triángulo */
        left: 50%;
        transform: translateX(47%); /* Mantener el triángulo centrado */       
    }
    .titulo_cuatro::after {
        border-width: 40px; /* Reducir el tamaño del triángulo */
        left: 50%;
        transform: translateX(240%); /* Mantener el triángulo centrado */       
    }
    .principal_inpc table, .tipo_cambio table {
        width: 88%; /* Ocupa el ancho completo */
        font-size: 0.7em; /* Ajustar tamaño de la fuente */
        text-align: center;
    }

    .principal_inpc th, .principal_inpc td, .tipo_cambio th, .tipo_cambio td {
        padding: 5px; /* Reducir padding en las celdas */
        margin: 10px;
    }

    .tipo_cambio button {
        padding: 8px 16px; /* Ajustar el padding del botón */
    }
    .tabla_principal_inpc {
        font-size: 14px; /* Ajustar tamaño del texto */
        margin: 6px;
        margin-top: -40px;
        width: 90%;
        text-align: center;
        margin-right: 10px;    
    }
    .tipo-cambio-usd {
        width: 90%; /* Ocupa todo el ancho disponible */
        font-size: 14px; /* Ajusta el tamaño de la fuente */
        margin-left: 6x;      
        margin-top: 5px;
    }
    .boton_destalle_dos button{
        padding: 8px 20px; /* Reducir padding */
        margin: 55px 55px; /* Ajustar margen para pantallas más pequeñas */
        font-size: 0.9em;
        margin-top: 10px;
        border-radius: 7px;
    }
    .icono_uno:hover {
        background-color: #ddd;
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
        opacity: 10.0;
    }
    /** Busqueda por Descripcion de mercancia**/
 

    .tabla_prinicipal_descrp_mercancia {
        padding: 10px; /* Reduce el padding del contenedor de la tabla */
    }
    /**Fraccion Arancelaria**/
    .contenido-scroll-fraccarancelaria {
        padding: 15px;
        height: calc(75vh - 10px);
    }

    .datos_prin {
        max-width: 450px;
        padding: 40px;
        margin-left: 28%;
    }

    .datos_prin h1 {
        font-size: 1.8rem;
    }

    .botones-principales button, .boton-principal-ti button {
        padding: 10px 30px;
        font-size: 11px;
       
    }

    /*Busqueda por Seccion Arancelaria*/
    .nav_bar a {
        font-size: 12px; /* Reduce el tamaño de fuente de los enlaces */
    }
    

    /*Notas Nacionales*/
    .menu_titulo {
        font-size: 1.9em; /* Reduce el tamaño del título del menú */
        margin: 5px 0; /* Reduce el margen superior e inferior */
    }

    .menu_secciones {
        max-width: 80%; /* Ajusta el ancho máximo al 85% */
        margin-left: 100px; /* Reduce el margen superior */
        padding: 30px; /* Reduce el padding */
    }

    .secciones h2 {
        font-size: 1.3em; /* Reduce el tamaño de la fuente para h2 */
        margin-bottom: 30px; /* Reduce el margen inferior */
        margin-right: 20px;
    }

    .capitulo {
        font-size: 1.2em; /* Reduce el tamaño de la fuente de capítulos */
        margin: 20px; /* Reduce el margen */
    }

    .notas {
        font-size: 0.9em; /* Reduce el tamaño de la fuente de las notas */
        margin: 10px 30px; /* Reduce el margen */
    }
    /*Indicadores*/
    .contenido-scroll-indicadores {
        margin-top: -30px; /* Ajusta el espacio superior */
        padding: 10px;
        height: calc(100vh - 20px); /* Ajusta la altura para la resolución específica */
        overflow-y: auto;
    }

    .main {
        max-width: 90%; /* Ajusta el ancho al 100% del contenedor */
        margin: 20px auto;
        padding: 15px;
        box-shadow: 5px 0 5px rgba(189, 42, 42, 0.1);
    }

    .texto-indicadores h1 {
        font-size: 24px; /* Reduce el tamaño de fuente */
        margin-bottom: 15px;
    }

    .menu_indicadores {
        flex-direction: column; /* Cambia la dirección a columna */
        margin: 10px auto; /* Centra horizontalmente */
    }

    .tipo_de_cambio,
    .seccion_inpc {
        width: 85%; /* Ocupa todo el ancho del contenedor */
        margin-bottom: 15px;
        padding: 15px;
        margin: 10px auto;
        
    }

    .tipo_de_cambio h2,
    .seccion_inpc h2,
    .publicaciones_dof h2 {
        font-size: 18px; /* Reduce el tamaño de fuente de los títulos */
        padding: 8px;
        text-align: center;
    }

    .tipo_de_cambio_dos input {
        width: calc(85% - 30px); /* Ajusta el ancho al contenedor */
        padding: 6px;
    }

    .tipo_de_cambio_dos button {
        padding: 6px;
        font-size: 14px; /* Reduce el tamaño de fuente */
    }

    .table_tp {
        width: 100%; /* Ocupa el ancho completo */
        font-size: 0.8em; /* Reduce el tamaño de fuente */
    }

    .table_tp th, .table_tp td {
        padding: 6px; /* Ajusta el padding */
    }
    .table{
        width: 100%; /* Ocupa todo el ancho del contenedor */
        margin-bottom: 0px;
        padding: 0px;
        margin: 10px auto;
    }

    .publicaciones_dof {
        width: 85%;
        margin: 10px auto;
        padding: 15px;
    }

    .publicaciones_dof table {
        font-size: 0.8em; /* Reduce el tamaño de fuente */
    }

    .button-buscar {
        width: 30%; /* Ajusta el ancho del botón */
        padding: 8px;
        font-size: 14px; /* Reduce el tamaño de fuente */
        margin: 10px auto;
    }
    /*Busquedas recientes-2*/
    .busqueda_reciente_dos {
        padding: 15px; /* Reduce el padding para hacer más compacto */
        text-align: center;
    }

    .busqueda_reciente_dos h1 {
        font-size: 1.9em; /* Reduce el tamaño de la fuente del h1 */
        padding: 20px; /* Reduce el padding del título */
    }

    .busqueda_reciente_dos ul {
        margin: 5px; /* Reduce el margen lateral */
        padding: 20px; /* Reduce el padding de la lista */
        width: 80%; /* Mantiene el ancho en 90% */
        margin-left: 90px;
    }

    .busqueda_reciente_dos li {
        font-size: 14px; /* Reduce el tamaño de la fuente de los elementos de la lista */
        padding: 15px; /* Reduce el padding de los elementos de la lista */
        margin: 8px 0; /* Reduce el margen entre los elementos de la lista */
    }

    .boton_descargar_publiciaciones_dof {
        padding: 9px; /* Reduce el padding para mejor usabilidad */
        font-size: 1.1em; /* Reduce el tamaño de la fuente del botón */
        margin: 20px; /* Ajusta el margen para centrarlo */
        width: 30%; /* Ajusta el ancho del botón al 50% del contenedor */
        display: block; /* Mantiene el botón como un bloque */
    }
    /*Detalle fraccion*/
    .titulo_dettale_de_fraccion {
        font-size: 20px; /* Reduce el tamaño de la fuente */
        margin: -20px 300px; /* Ajusta los márgenes para centrar mejor */
        padding: 8px; /* Ajusta el padding */
    }

    .contenedor_principal {
        width: 90%; /* Aumenta el ancho del contenedor */
        margin: 25px auto;
        grid-template-columns: repeat(3, 1fr); /* Cambia a dos columnas para pantallas medianas */
        gap: 15px; /* Ajusta el espacio entre columnas */
        max-height: 500px; /* Ajustar la altura máxima deseada para activar el scroll */
        overflow-y: scroll; /* Aplica el scroll vertical */
        font-size: 0.6em;
    }

    .th, td {
        padding: -2px; /* Reduce el padding de las celdas */
    }

    .unidad, .nota {
        padding: 12px; /* Ajusta el padding */
        font-size: 1.2em; /* Ajusta el tamaño de la fuente */
    }

    .actualizacion_tarifa input[type="text"] {
        width: 250px; /* Reduce el tamaño del input */
        padding: 8px; /* Ajusta el padding del input */
    }

    .boton-buscar button, .boton-actualizar button {
        font-size: 14px; /* Reduce el tamaño de la fuente del botón */
        padding: 8px 16px; /* Ajusta el padding del botón */
    }

    .seccion_titulo, .seccion_tres_titulo {
        font-size: 20px; /* Reduce el tamaño de la fuente */
        margin: 20px 300px; /* Ajusta los márgenes para centrar mejor */
    }

    .descripcion_datos_uno {
        margin: 0px 100px; /* Ajusta los márgenes */
        padding: 0px; /* Ajusta el padding */
        font-size: 0.8em;
        justify-content: space-between; 
    }

    .datos_seccion_uno, .datos_seccion_dos, .datos_seccion_tres {
        display: inline-block;
        padding: 15px;
        margin: 0 10px;
        width: 30%;
        font-size: 0.8em;
        
    }
    .descripcion_datos {
        flex-direction: row; /* Cambia a columna en lugar de fila para pantallas más pequeñas */
        padding: 2px; /* Ajusta el padding */
        margin: -10px 50px; /* Ajusta los márgenes */
        
    }

    .datos_seccion {
        width: 500%; /* Ajusta el ancho al 100% en pantallas más pequeñas */
    }

    .tabla_seccion_tres {
        width: 100%; /* Ajusta el ancho de la tabla */
        margin: 10px 30px 10px -10px; /* Ajusta los márgenes */
        padding: 5px; /* Ajusta el padding */
        font-size: 0.7em;
    }
    .descargar_boton_pdf {
        margin-top: 10px; /* Ajusta el margen superior */
        margin-bottom: 30px; /* Reduce el margen inferior */
        padding: 10px 15px; /* Ajusta el padding */
        font-size: 14px; /* Reduce el tamaño de la fuente */
        width: 20%;
    }
    /*Actualizacion de Tarifa Arancelria*/
    .actualizacion_tarifa {
        margin-top: 50px; /* Reducir el margen superior */
        margin: 60px; /* Ajustar el margen general */
    
    }

    .actualizacion_tarifa label {
        font-size: 16px; /* Reducir el tamaño de la fuente */
        margin-bottom: 50px; /* Ajustar el margen inferior */
    }

    .actualizacion_tarifa input[type="text"] {
        width: 350px; /* Reducir el ancho del input */
        padding: 8px; /* Reducir el padding */
        font-size: 14px; /* Reducir el tamaño de la fuente */
    }

    .boton-buscar button {
        padding: 8px 16px; /* Reducir el padding del botón */
        font-size: 14px; /* Reducir el tamaño de la fuente del botón */
        margin-top: 8px;
    }

    .boton-actualizar button {
        padding: 8px 16px; /* Reducir el padding del botón de actualización */
        font-size: 14px; /* Reducir el tamaño de la fuente del botón de actualización */
        margin-top: 50px;
    }
    /*Busqueda por descripcion de la mercancia*/
    .tabla_principal h1 {
        font-size: 1.6em; /* Reducir un poco más el tamaño de la fuente */
        margin-bottom: 6px; /* Reducir el margen inferior */
        text-align: center; /* Mantener el centrado */
    }

    .texto_res h3 {
        font-size: 1.2em; /* Reducir el tamaño de la fuente */
        margin: 8px 25px; /* Ajustar el margen */
        padding: 20px 20px; /* Reducir el relleno */
    }

    .tabla_prinicipal_descrp_mercancia table {
        width: 90%; /* Aumentar el ancho al 95% */
        margin: 10px 45px; /* Reducir el margen */
    }

    .tabla_prinicipal_descrp_mercancia th, 
    .tabla_prinicipal_descrp_mercancia td {
        padding: 9px; /* Reducir el relleno de las celdas */
        font-size: 1.1em; /* Ajustar el tamaño de la fuente en celdas */
    }

    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(1),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(2),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(3),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(4),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(5) {
        font-size: 0.9em; /* Aumentar ligeramente el tamaño de fuente de las columnas */
        text-align: center; /* Mantener el texto centrado */
    }
    /*Publicaciones Dof*/
    .principal_publicaciones_dof {
        max-width: 50%; /* Aumenta un poco el ancho para pantallas pequeñas */
        margin: 0px 55px; /* Ajusta los márgenes */
        padding: 10px; /* Mantén un poco más de espacio interno */
        border: 1px solid #ccc;
        border-radius: 8px; /* Mantén un borde suave */
        display: flex;
        gap: 2px;
    }

    .text_publicaciondes_dof h1 {
        font-size: 1.1em; /* Reduce ligeramente el tamaño de la fuente */
        margin: 15px; /* Ajusta el margen */
        text-align: center;
        width: 100%; /* Asegura que el h1 ocupe todo el ancho */
    
    }

    .principal_publicaciones_dof input[type="date"], 
    .principal_publicaciones_dof select {
        width: 55%; /* Ambos ocupan el mismo ancho */
        padding: 9px;
        font-size: 14px;
        margin: -12px; /* Elimina cualquier margen adicional */
        box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
    }

    .tabla_pulicaciones_dof table {
        width: 90%; /* Ajusta el ancho a un 95% para mayor comodidad */
        margin: 45px 55px; /* Ajusta los márgenes */
        font-size: 0.6em; /* Aumenta ligeramente el tamaño de la fuente */
        margin-top: 20px;
    }

    .tabla_pulicaciones_dof table th, .tabla_pulicaciones_dof table td {
        padding: 8px; /* Ajusta el relleno de las celdas */
        font-size: 1.1em; /* Reduce ligeramente el tamaño de la fuente */
    }

    .boton_descargar_publiciaciones_dof {
        width: 25%; /* Aumenta el ancho del botón */
        padding: 12px; /* Ajusta el padding */
        font-size: 14px; /* Reduce el tamaño de la fuente */
        margin: 15px auto; /* Ajusta el margen */
        margin-top: -15px;
    }
}

@media (max-width: 480px) and (max-width: 768px) {
    body {
        overflow-y: scroll; /* Activa el scroll vertical si es necesario */
        background-size:contain auto;  /* Ajusta el fondo para que quepa dentro del contenedor */
        background-position: top; /* Posiciona la imagen en la parte superior */
        height: 120vh; /* Asegura que el body cubra toda la ventana */
        margin: 0;
        
    }



  
    /*ingreso de sesion*/
    .main {
        padding: 10px; /* Reduce el padding para pantallas más pequeñas */
        min-height: 150vh; /* Ajusta la altura mínima en pantallas pequeñas */
    }

    .titulo_clasificacion_aranclaria h1 {
        font-size: 1.8em; /* Reduce el tamaño del título */
        padding: 10px;
        text-align: left; /* Centrar el texto en pantallas pequeñas */
    }

    .contenido_clasificacion {
        display: block; /* Cambiar a bloque en lugar de flex para que los elementos se apilen */
        margin: 10px;
    }

    .clasificacion_tarifa {
        margin-right: 0; /* Elimina el margen ya que no hay necesidad de separación */
        margin-bottom: 20px; /* Añade un margen inferior para espaciar las secciones */
    }

    .clasificacion_tarifa h2 {
        font-size: 16px; /* Reducir el tamaño de los subtítulos */
        margin: 5px;
        top: 15px;
    }

    .linea_decorativa {
        width: 50%; /* Hacer la línea decorativa del ancho completo */
        height: 5px; /* Ajustar el grosor */
        margin: 10px 9px; /* Centrar la línea */
    }

    .parrafos {
        padding: 15px;
        margin-top: 15px;
        font-size: 0.85em; /* Reducir el tamaño del texto */
    }

    .parrafo_busqueda p {
        font-size: 1.1em; /* Ajustar el tamaño del texto */
        margin-top: 57px; /* Ajusta el margen superior para pantallas más pequeñas */
        margin-left: 25%; /* Elimina el margen para centrar mejor el texto */
        margin-right: 0; /* Alinear correctamente en móviles */
    }

   
    /**Loggin*/
    .loggin_principal {
        flex-direction: column; /* Cambia la orientación a columna para pantallas pequeñas */
        width: 60%; /* Reduce el ancho para que ocupe casi todo el ancho de la pantalla */
        height: auto; /* Deja que el contenido determine la altura */
        margin: 80px auto; /* Centra el contenedor horizontalmente */
    }

    .izquierda {
        width: 100%; /* Ocupa el 100% del ancho disponible */
        padding: 10px; /* Reduce el padding en pantallas pequeñas */
    }

    .logo-hacienda, .logo-aduanas {
        width: 200px; /* Reduce el tamaño de los logotipos */
    }

    .derecha {
        width: 100%; /* Ocupa el 100% del ancho disponible */
        padding: 20px; /* Reduce el padding para pantallas pequeñas */
    }

    .derecha h1 {
        font-size: 1.5em; /* Ajusta el tamaño del texto del encabezado */
    }

    .derecha input {
        padding: 5px; /* Reduce el padding de los campos de input */
    }

    .derecha button {
        width: 80%; /* Aumenta el ancho de los botones en pantallas pequeñas */
        padding: 8px 3px; /* Reduce el padding de los botones */
    }

    .olvido-contrasena {
        font-size: 0.8em; /* Ajusta el tamaño del texto */
    }
    /*PANTALLA INDEX*/
    .pantalla_principal {
        width: 100%; /* Ajustar el ancho al 100% en pantallas pequeñas */
        padding: 5px; /* Reducir el padding */
        height: auto; /* Permitir que la altura se ajuste al contenido */
        display: block; /* Cambiar el layout a bloque para mayor flexibilidad */
        align-items: flex-start;
    
    }

    .busqueda {
        display: flex;
        flex-direction: row; /* Cambia la dirección a horizontal */
        justify-content: center; /* Centra el contenido */
        margin-top: -100px; /* Ajusta el contenedor si es necesario */
    }

    .busqueda input[type="text"] {
        width: 70%; /* Ajusta el ancho del input en la media query */
        margin-bottom: 0;
        margin: 70px 3px; /* Elimina márgenes que no se necesitan */
        font-size: 0.6em;
    }

    .busqueda button {
        width: auto; /* Ajusta el ancho del botón */
        margin-left: 10px; /* Separa el botón del input */
        margin-top: 0; /* Elimina el margen superior para alinearlo */
    }

    .boton_detalle button, .boton_destalle_dos button {
        width: 35%; /* Hacer los botones más anchos */
        margin: 18px 145px; /* Centrar los botones */
        padding: 9px;
        margin-top: 8px;
    }

    .columnas {
        flex-basis: 80%; /* Cada columna toma el 100% del ancho */
        margin: 30px; /* Reducir el espacio entre las columnas */
        padding: 10px;
        margin-top: -5px;
    }
    
    .busqueda_rec table {
        width: 50%; /* Ajustar tablas al ancho completo */
        margin: 0px 109px; /* Centrar tabla */
        font-size: 0.6em;
        margin: 5px 133px;
    }
   
    .tabla_busquedas_recientes{
        font-size: 0.9em; /* Reducir el tamaño de fuente */
        width: 41%;
        margin: 5px 130px;
        margin-top: -60px;
    }
    .tipo-cambio-usd, .tabla_principal_inpc {
        font-size: 0.9em; /* Reducir el tamaño de fuente */
        width: 50%;
        margin: 5px auto;
        margin-top: -10px;
        
    }
    .titulo_uno, .titulo_dos, .titulo_tres, .titulo_cuatro {
        font-size: 0.5em; /* Reducir tamaño de los títulos */
        padding: 5px; /* Reducir el padding en los títulos */
        width: 100%;
        margin-top: -18px;
    }

    /* Pseudo-elemento para la punta triangular */
    .titulo_uno::after {
        border-width: 20px; /* Reducir el tamaño del triángulo */
        left: 50%;
        transform: translateX(-50%); /* Mantener el triángulo centrado */       
    }
    .titulo_dos::after {
        border-width: 20px; /* Reducir el tamaño del triángulo */
        left: 50%;
        transform: translateX(-160%); /* Mantener el triángulo centrado */       
    }
    .titulo_tres::after {
        border-width: 20px; /* Reducir el tamaño del triángulo */
        left: 50%;
        transform: translateX(75%); /* Mantener el triángulo centrado */       
    }
    .titulo_cuatro::after {
        border-width: 20px; /* Reducir el tamaño del triángulo */
        left: 50%;
        transform: translateX(310%); /* Mantener el triángulo centrado */       
    }
    .icono_uno {
        width: 95px; /* Reducir el tamaño de los iconos */
        height: 130px; /* Ajustar la altura de los iconos */
        margin: 5px auto; /* Centrar icono */
    }

    .principal_inpc, .tipo_cambio {
        width: 100%; /* Asegura que las tablas ocupen el 100% del ancho */
        font-size: 9px; /* Tamaño del texto de las tablas */
        margin-top: 0px;
    }

    .tipo_cambio table, .principal_inpc table {
        width: 50%; /* Ajustar tablas al ancho completo */
        font-size: 0.8em; /* Reducir el tamaño de fuente */
        margin: 10px 115px; /* Centrar tabla */
        
    }
    .tipo_cambio th, .tipo_cambio td, .principal_inpc th, .principal_inpc td {
        padding: 1px; /* Reducir padding en las celdas */
    }
    /** Busqueda por Descripcion de mercancia**/
   
    .contenido-scroll-fraccarancelaria {
        padding: 10px;
        height: calc(70vh - 10px);
    }

    .texto-busqueda-fraccion-arancelaria {
        margin: 10px;
    }

    .fraccion_arancelaria button {
        padding: 6px 15px;
        font-size: 12px;
    }

    .fraccion_arancelaria input {
        width: 100%;
        padding: 6px;
        margin-left: 0;
    }

    .datos_prin {
        padding: 15px;
        max-width: 100%;
        margin-left: 0;
    }

    .datos_prin h1 {
        font-size: 1.2rem;
    }

    .datos_prin p {
        font-size: 0.8em;
    }

    .botones-principales, .boton-principal-ti {
        gap: 5px;
    }

    .botones-principales button, .boton-principal-ti button {
        font-size: 9px;
        padding: 8px 15px;
    }

    .modal-content {
        padding: 5px;
        max-height: 75vh;
    }

    .modal-content table {
        font-size: 9px;
    }

    .close {
        font-size: 20px;
    }
    /**Fraccion Arancelaria**/
    .texto-busqueda-fraccion-arancelaria {
        display: flex;  
        text-size-adjust: 1.3em;
        align-items: center;
        margin: 20px; /* Reduce el margen */
        justify-content: center;
    }


    .cabecera_tabla_fraccion table {
        width: 40% 70%; /* Ajusta el ancho de la tabla al 100% */
        margin-bottom: 10px; /* Reduce el margen inferior */
        font-size: 0.6em; /* Reduce el tamaño de la fuente */
        padding: 20px;
        margin: 20px;
    }

    .th, td {
        padding: 8px; /* Reduce el padding de las celdas */
        text-align: center;
        border: 1px solid #ddd;
    }

    .tabla_capitulo {
        display: flex;
        gap: 15px; /* Reduce el espacio entre los selectores */
        justify-content: center;
        padding: -6px; /* Reduce el padding */
        margin: 10px 20px; /* Ajusta el margen superior e inferior */
    }

    .tabla_capitulo select {
        width: 80%; /* Reduce el ancho de los selectores */
        padding: 4px; /* Reduce el padding de los selectores */
        font-size: 0.6em;
    }

    .boton_buscar_dos button {
        padding: 5px 20px; /* Ajusta el padding del botón */
        margin: -2px 5px 5px 5px; /* Ajusta el margen */
    }
    /*BUSQUEDA POR SECCION ARANCELARIA*/
    
    .nav_bar a {
        font-size: 10px; /* Ajusta el tamaño de fuente de los enlaces */
    }
    
   
    /**Notas nacionales*/
    .menu_titulo {
        font-size: 1.5em; /* Reduce el tamaño del título del menú */
        margin: 10px 0; /* Reduce el margen superior e inferior */
    }

    .menu_secciones {
        max-width: 90%; /* Ajusta el ancho máximo al 100% */
        margin: 70px; /* Reduce el margen superior */
        padding: 15px; /* Ajusta el padding */
       
    }

    .secciones h2 {
        font-size: 1.0em; /* Reduce el tamaño de la fuente para h2 */
        margin-bottom: 30px; /* Reduce el margen inferior */
    
    }

    .capitulo {
        font-size: 1.0em; /* Ajusta el tamaño de la fuente de capítulos */
        margin: 30px;
    }

    .notas p {
        font-size: 0.8em; /* Reduce el tamaño de la fuente de las notas */

    }
    /**Indicadores*/
    .contenido-scroll-indicadores {
        margin-top: -20px; /* Ajusta espacio superior */
        margin-bottom: 0px; /* Espacio inferior reducido */
        padding: 10px; /* Reduce el padding */
        height: calc(100vh - 50px); /* Ajusta la altura para pantallas más pequeñas */
        overflow-y: auto; /* Activa el scroll */
    }
   

    .main {
        max-width: 100%; /* Ocupar todo el ancho disponible */
        margin: 20px auto; /* Ajusta el margen superior */
        padding: 10px; /* Reduce el padding */
        box-shadow: none; /* Elimina sombra para pantallas pequeñas */
        text-align: center;
    }

    .texto-indicadores h1 {
        font-size: 24px; /* Reduce el tamaño del título */
        margin-bottom: 10px; /* Reduce el margen inferior */
    }

    .menu_indicadores {
        flex-direction: column; /* Cambia el layout a columna para pantallas pequeñas */
        margin: 10px 20px; /* Ajusta el margen */
    }

    .tipo_de_cambio, .seccion_inpc {
        width: 100%; /* Ajusta las secciones al 100% del ancho */
        padding: 15px; /* Reduce el padding */
    }

    .tipo_de_cambio h2, .seccion_inpc h2 {
        font-size: 18px; /* Reduce el tamaño de los encabezados */
        padding: 8px; /* Reduce el padding */
    }

    .tipo_de_cambio_dos {
        flex-direction: column; /* Alinea los elementos verticalmente */
        margin-bottom: 10px;
    }

    .tipo_de_cambio_dos input {
        width: 100%; /* Ocupar el 100% del ancho disponible */
        margin-bottom: 10px; /* Espacio inferior */
    }

    .tipo_de_cambio_dos button {
        width: 100%; /* Botón ajustado al ancho completo */
        padding: 10px; /* Ajuste del padding */
    }

    .table_tp {
        width: 100%; /* Asegura que la tabla ocupe todo el ancho */
        font-size: 0.8em; /* Reduce el tamaño de la fuente */
    }

    .publicaciones_dof {
        width: 92%; /* Ajusta la sección al ancho completo */
        padding: 15px; /* Reduce el padding */
        margin: 10px auto; /* Ajusta el margen */
    }

    .publicaciones_dof h2 {
        font-size: 18px; /* Reduce el tamaño de los títulos */
        padding: 8px; /* Reduce el padding */
    }

    .publicaciones_dof table {
        font-size: 0.8em; /* Reduce el tamaño de la fuente en las tablas */
    }

    .button-buscar {
        width:60%; /* Botón ajustado al ancho completo */
        padding: 10px; /* Ajuste del padding */
        font-size: 14px; /* Reduce el tamaño de la fuente */
        margin-top: 10px; /* Ajuste del margen superior */
    }
    /**Busquedas Recienetes-2*/
    .busqueda_reciente_dos {
        padding: 20px; /* Reduce el padding */
        text-align: center;
    }

    .busqueda_reciente_dos h1 {
        font-size: 1.6em; /* Reduce el tamaño de la fuente del h1 */
        padding: 45px;
    }

    .busqueda_reciente_dos ul {
        margin: 10px; /* Reduce el margen lateral */
        padding: 30px; /* Asegúrate de que el padding sea cero para la lista */
        width: 90%;
    }

    .busqueda_reciente_dos li {
        font-size: 16px; /* Reduce el tamaño de la fuente de los elementos de la lista */
        padding: 15px; /* Reduce el padding de los elementos de la lista */
        margin: 8px 0; /* Reduce el margen entre los elementos de la lista */
    }


    .boton_descargar_publiciaciones_dof  {
        padding: 10px; /* Añade un padding para que el botón sea más fácil de hacer clic */
        font-size: 0.8em; /* Mantiene el tamaño de la fuente del botón */
        margin: 0px auto; /* Reduce el margen lateral y centra el botón horizontalmente */
        width: 40%; /* Ajusta el ancho del botón al 80% del contenedor */
        display: block; /* Cambia el botón a un bloque para que el margin auto funcione */
        
    }
    /**Detalle de Fraccion*/
    .contenido-scroll {
        margin-top: 0px; /* Ajusta el espacio superior */
        margin-bottom: 0px; /* Ajusta el espacio inferior */
        padding: 10px; /* Reduce el padding */
        height: calc(80vh - 50px); /* Ajusta la altura para pantallas más pequeñas */
    }

    .titulo_dettale_de_fraccion {
        font-size: 16px; /* Reduce el tamaño del texto */
        padding: 8px; /* Reduce el padding */
        margin: 30px 50px; /* Ajusta los márgenes laterales */
        max-height: 300px; /* Ajusta la altura máxima */
    }

    .contenedor_principal {
        width: 100%; /* Ajustar el ancho al 100% para ocupar todo el ancho disponible */
        margin: 10px; /* Eliminar el margen negativo que podría causar problemas */
        overflow-y: scroll; /* Añadir scroll vertical si es necesario */
    }
    
    .contenedor_principal table {
        font-size: 0.6em;
        margin: 0;
        padding: 5px; /* Ajustar el padding para separación */
        width: 50%;
    }
    
    .datos_tabla_principal td,
    .datos_tabla_principal th,
    .datos_tabla_principal tr {
        padding: 0px; /* Ajustar el padding en celdas */
    }
    
    .unidad,
    .nota {
        padding: 9px 0px;
        margin: -8px ;
        font-size: 0.6em;
    }
    .seccion_dos {
        width: 100%; /* Ajustar al 100% del ancho */
        padding: 10px; /* Reduce el padding */
        
    }

    .seccion_titulo {
        font-size: 16px; /* Reduce el tamaño de la fuente */
        padding: 8px; /* Reduce el padding */
        margin: 30px 50px; /* Ajusta los márgenes laterales */
    }

    .descripcion_datos_uno {
        margin: 15px auto; /* Ajustar el margen superior e inferior */
        padding: 25px; /* Ajustar el padding */
        font-size: 0.6em;
        width: 90%; /* Ajustar el ancho al 90% */
        text-align: center;
    }

    .datos_seccion_uno,  
    .datos_seccion_dos, 
    .datos_seccion_tres{
        margin: -15px 60px  0px  -55px; /* Ajustar el margen superior e inferior */
        padding: 30px; /* Ajustar el padding */
        font-size: 0.7em;
        width: 100%; /* Ajustar el ancho al 90% */
        text-align: center;
        display: inline-block; /* Incluir el padding dentro del ancho */
        height: 125x;

    }
    .seccion_tres_titulo {
        font-size: 16px; /* Reduce el tamaño del texto */
        padding: 8px; /* Reduce el padding */
        margin: 10px 50px; /* Ajusta márgenes laterales */
    }

    .tabla_seccion_tres {
        width: 100%; /* Asegura que la tabla ocupe el 100% del ancho */
        margin: 10px 20px; /* Ajusta los márgenes laterales */
        font-size: 0.8em; /* Reduce el tamaño de la fuente */
    }

    .descargar_boton_pdf {
        font-size: 14px; /* Reduce tamaño de la fuente */
        padding: 8px 16px; /* Ajusta padding */
        margin-bottom: 20px; /* Ajusta el margen inferior */
    }    

    /**Actualizacion de tarifa arancelaria*/
    .actualizacion_tarifa {
        margin-top: 50px; /* Ajustar el margen superior */
        margin: 20px; /* Reducir el margen general */
        flex-grow: 1;
    }

    .actualizacion_tarifa label {
        font-size: 0.9em; /* Reducir el tamaño de la fuente del label */
        margin-bottom: 20px; /* Ajustar el margen inferior */
        padding: 20px;
    }

    .actualizacion_tarifa input[type="text"] {
        width: 80% auto; /* Ajustar el ancho al 90% para que ocupe más espacio */
        padding: 9px; /* Reducir el padding */
        font-size: 0.7em; /* Reducir el tamaño de la fuente */
    }

    .actualizacion_tarifa button {
        padding: 7px 6px; /* Reducir el padding del botón */
        font-size: 0.9em; /* Reducir el tamaño de la fuente del botón */
    }

    .boton-actualizar button {
        padding: 8px 16px; /* Reducir el padding del botón de actualización */
        font-size: 0.9em; /* Reducir el tamaño de la fuente del botón de actualización */
        margin: 40px;
    }

 /*BUSQUEDA POR DESCRIPCION DE LA MAERCANCIA */
    .tabla_principal h1 {
        font-size: 1.3em; /* Reducir el tamaño de la fuente */
        margin-bottom: 9x; /* Reducir el margen inferior */
        text-align: center;
    }

    .texto_res h3 {
        font-size: 0.9em; /* Reducir el tamaño de la fuente */
        margin: 10px 20px; /* Ajustar el margen */
        padding: 25px 8px; /* Reducir el relleno */
    }

    .tabla_prinicipal_descrp_mercancia table {
        width: 90%; /* Ajustar el ancho al 100% */
        margin: 20px 22px; /* Reducir el margen */
    
    }

    .tabla_prinicipal_descrp_mercancia th, td {
        padding: 2.5px; /* Reducir el relleno de las celdas */
        font-size: 0.9em; /* Ajustar el tamaño de la fuente en celdas */
    }

    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(1),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(2),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(3),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(4),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(5) {
        font-size: 0.7em; /* Ajustar el tamaño de fuente de las columnas */
         /* Asegurar que el texto esté centrado */
    }
    /* PUBLICACIONES DOF*/
    .principal_publicaciones_dof {
        max-width: 90%; /* Ajusta el ancho para que ocupe todo el ancho disponible */
        margin: 2px auto; /* Centramos el contenedor y ajustamos el margen */
        padding: 10px; /* Mantener sin relleno adicional */
        border: 1px solid #ccc;
        border-radius: 9px;
    }

    .text_publicaciondes_dof h1 {
        font-size: 1.2em; /* Reducir el tamaño de la fuente */
        margin: 20px; /* Ajustar el margen */
        text-align: center;
        width: 90%;
    }

    .principal_publicaciones_dof input[type="date"], select {
        width: 53.5%; /* Hacer que los campos ocupen todo el ancho disponible */
        /* Reducir el padding */
        font-size: 12px; /* Reducir el tamaño de la fuente */
        margin-bottom: 0px; /* Añadir un pequeño margen inferior */
        margin: -7.7px;
    }

    .tabla_pulicaciones_dof table {
        width: 90%; /* Ajustar el ancho al 100% */
        margin: 40px auto; /* Centrar la tabla y reducir los márgenes */
        font-size: 0.78em; /* Reducir el tamaño de la fuente */
    }

    .tabla_pulicaciones_dof table th, .tabla_pulicaciones_dof table td {
        padding: 3px; /* Reducir el relleno de las celdas */
        font-size: 1.1em; /* Ajustar el tamaño de la fuente en celdas */
    }

    .boton_descargar_publiciaciones_dof {
        width: 40%; /* Hacer el botón más ancho en pantallas pequeñas */
        padding: 10px; /* Reducir el padding */
        font-size: 14px; /* Reducir el tamaño de la fuente */
        margin: 20px auto; /* Ajustar el margen para centrar el botón */
    }
}
@media (max-width: 1920px) and (min-height: 1080px) {
    body {
    overflow-y: scroll;
    background-size: contain auto;
    background-position: top;
    height: 120vh; /* Ajusta a 100vh para que no sobrepase la ventana en esta resolución */
    margin: 0;
    }
    

    .icon_dos {
        width: 20px;
        height: 22px;
        margin-right: 10px;
        top: 2px;
    }
 
    /*ingreso inicio de sesion*/
    .main {
        padding: 40px; /* Aumenta el padding para una distribución más equilibrada en pantallas grandes */
        max-width: 1200px; /* Define un ancho máximo para centrar el contenido */
        margin: 50px auto; /* Centra el contenido horizontalmente */
    }

    .titulo_clasificacion_aranclaria h1 {
        font-size: 4em; /* Aumenta el tamaño del texto para pantallas grandes */
        padding: 30px; /* Ajusta el padding */
        margin: 100px auto; /* Centra el título */
        top: 120px;
        position: relative;
    }

    .clasificacion_tarifa h2 {
        font-size: 2.1em; /* Aumenta el tamaño de fuente */
        margin: 15px auto; /* Centra el subtítulo */
        padding: 15px;
        top: 80px;
        position: relative;
    }

    .linea_decorativa {
        width: 850px; /* Aumenta el ancho de la línea decorativa */
        height: 15px;
        margin: 20px; /* Centra la línea */
        top: 40px;
        position: relative;
    }

    .parrafos p {
        padding: 20px; /* Aumenta el padding para distribuir el texto en pantallas grandes */
        font-size: 1.4em; /* Ajusta el tamaño de fuente */
        text-align: justify;
        margin: 15px auto;
        max-width: 900px; /* Establece un ancho máximo para mejorar la legibilidad */
        position: relative;
        top: 120px;
    }


    .parrafos p {
        padding: 0px;
        margin: 7px;
        font-size: 0.9em;
        padding: 8px;
        text-align: justify;   
    }
    /* Pantalla index */
    .pantalla_principal {
        width: 100%; /* Ajusta el ancho para mejor alineación en pantallas grandes */
        padding: 20px;
        min-height: 80vh; /* Aumenta la altura para que ocupe más espacio en pantallas grandes */
        height: auto;
        grid-template-columns: 1fr 1fr; /* Cambia a dos columnas para mejor distribución */
        gap: 15px;
    }

    .busqueda {
        margin-top: 50px;
    }

    .busqueda input[type="text"] {
        width: 70%; /* Aumenta el ancho del input */
        font-size: 1em; /* Ajusta el tamaño de la fuente */
    }

    .busqueda button {
        padding: 10px 20px;
        font-size: 1em;
    }

    .boton_detalle button {
        padding: 12px 25px;
        margin: 135px 60px;
        font-size: 1.1em;
        margin-top: 20px;
        margin-left: -20px;
    }

    .columnas {
        margin-bottom: 150px;
        height: 500px;
        width: 170%; /* Aumenta el ancho */
        margin-top: -50px; /* Ajusta el valor para que se suba ligeramente */
        margin-left: -30px;
    }

    .busqueda_rec {
        width: 100%; /* Ajuste al 100% del contenedor */
        margin: 0 auto; /* Centrado horizontal */
        font-size: 12px; /* Aumenta la fuente un poco */
        margin-left: -40px;
        margin-top: 70px;
    }

    .busqueda_rec table {
        width: 100%;
        font-size: 1.2em; /* Tamaño de fuente para mayor claridad en pantallas grandes */
        margin-left: -20px; /* Centra la tabla eliminando el margen negativo */
        margin-top: -50px; /* Ajusta según sea necesario */
        
    }

    .busqueda_rec th, .busqueda_rec td {
        padding: 12px 18px; /* Ajuste de padding */
        font-size: 1em; /* Ajuste de fuente en pantallas grandes */
        text-align: center;
    }

    .tabla_busquedas_recientes {
        font-size: 1.1em;
        margin-left: -55px; /* Elimina el margen negativo */
        padding: 10px; /* Espaciado adicional */
        width: 100%;
        position: relative;
    }

    .titulo_uno, .titulo_dos, .titulo_tres, .titulo_cuatro {
        font-size: 1.3em;
        padding: 20px;
        width: 100%; /* Aumenta el ancho */
        margin-left: -1%; /* Centra los títulos */
    }
    .titulo_uno::after {
        transform: translateX(-45%); /* Centra el triángulo horizontalmente */
    }
    .titulo_dos::after {
        transform: translateX(-260%); /* Centra el triángulo horizontalmente */
    } 
    .titulo_tres::after {
        transform: translateX(90%); /* Centra el triángulo horizontalmente */
    }   
    .titulo_cuatro::after {
        transform: translateX(445%); /* Centra el triángulo horizontalmente */
    }  
    
    .icono_uno {
        width: 280px; /* Aumenta el tamaño del ícono */
        height: 400px;
    }

    .principal_inpc table, .tipo_cambio table {
        width: 95%; /* Ocupa un poco más de espacio */
        font-size: 1.1em;
        margin-left: 30px;
    }

    .principal_inpc th, .principal_inpc td, .tipo_cambio th, .tipo_cambio td {
        padding: 12px; /* Aumenta el padding */
    }

    .tabla_principal_inpc {
        font-size: 1.1em;
        margin: 15px;
        margin-top: -15px;
        width: 95%;
        margin-left: 30px;
    }

    .tipo-cambio-usd {
        width: 95%;
        font-size: 1.1em;
        margin-top: 15px;
        margin-left: 30px;
    }

    .boton_destalle_dos button {
        padding: 12px 30px; /* Aumenta el padding del botón */
        margin: 70px 70px;
        font-size: 1.1em;
        margin-top: 20px;
        margin-left: 100px;
    }

    /* Tabla en la clase cabecera_tabla_fraccion */
    .cabecera_tabla_fraccion table {
        width: 80%; /* Ajusta el ancho de la tabla */
        font-size: 0.8em; /* Ajusta el tamaño de fuente */
        padding: 30px;
        margin: 20px auto; /* Centra y ajusta el margen */
    }

    /* Celdas de tabla */
    .th, td {
        padding: 10px; /* Ajusta el padding de las celdas */
        font-size: 0.8em; /* Ajusta el tamaño de fuente en celdas */
    }

    /* Selector de la clase tabla_capitulo */
    .tabla_capitulo select {
        width: 50%; /* Ajusta el ancho de los selectores */
        font-size: 0.7em; /* Aumenta el tamaño de fuente */
    }
    .tabla_capitulo {
        width: 50%;
        margin: 50px;
    }

    /* Botón de la clase boton_buscar_dos */
    .boton_buscar_dos button {
        padding: 10px 30px; /* Aumenta el padding del botón */
        margin: 20px; /* Ajusta el margen */
    }
    /* Busqueda por Seccion Arancelaria */
    .nav_bar a {
        font-size: 14px; /* Aumenta ligeramente el tamaño de fuente de los enlaces */
    }
    
     /* Notas Nacionales */
     .menu_titulo {
        font-size: 2.2em; /* Aumenta ligeramente el tamaño del título del menú */
        margin: 30px 0; /* Aumenta el margen superior e inferior */
    }

    .menu_secciones {
        max-width: 85%; /* Ajusta el ancho máximo al 85% */
        margin-left:140px; /* Aumenta el margen izquierdo */
        padding: 40px; /* Aumenta el padding */
    }

    .secciones h2 {
        font-size: 1.5em; /* Aumenta el tamaño de la fuente para h2 */
        margin-bottom: 40px; /* Aumenta el margen inferior */
        margin-right: 30px; /* Aumenta el margen derecho */
    }

    .capitulo {
        font-size: 1.4em; /* Aumenta el tamaño de la fuente de capítulos */
        margin: 25px; /* Aumenta el margen */
    }

    .notas {
        font-size: 1em; /* Aumenta el tamaño de la fuente de las notas */
        margin: 15px 40px; /* Aumenta el margen */
    }
    /** Indicadores */
    .contenido-scroll-indicadores {
        margin-top: 0px; /* Espacio superior */
        margin-bottom: 10px; /* Añade un poco de espacio inferior */
        padding: 20px; /* Aumenta el padding */
        height: calc(100vh - 100px); /* Ajusta la altura */
        overflow-y: auto; /* Mantiene el scroll */
    }

    .main {
        max-width: 90%; /* Reduce ligeramente el ancho para centrado */
        margin: 40px auto; /* Aumenta el margen superior */
        padding: 20px; /* Aumenta el padding */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Añade una sombra ligera */
        text-align: center;
    }

    .texto-indicadores h1 {
        font-size: 32px; /* Aumenta el tamaño del título */
        margin-bottom: 20px; /* Aumenta el margen inferior */
    }

    .menu_indicadores {
        flex-direction: row; /* Cambia el layout a fila */
        margin: 20px 40px; /* Aumenta el margen */
    }

    .tipo_de_cambio, .seccion_inpc {
        width: 48%; /* Ajusta las secciones al 48% del ancho */
        padding: 30px; /* Aumenta el padding */
    }
    .table{
        font-size: 1.2em;
    }
    .tipo_de_cambio h2, .seccion_inpc h2 {
        font-size: 22px; /* Aumenta el tamaño de los encabezados */
        padding: 12px; /* Aumenta el padding */
        text-align: center;
    }

    .tipo_de_cambio_dos {
        flex-direction: row; /* Alinea los elementos horizontalmente */
        margin-bottom: 20px;
        font-size: 12px;
    }

    .tipo_de_cambio_dos input {
        width: 48%; /* Ocupa el 48% del ancho disponible */
        margin-right: 10px; /* Espacio entre elementos */
    }

    .tipo_de_cambio_dos button {
        width: 48%; /* Botón ajustado a la mitad del ancho */
        padding: 15px; /* Ajuste del padding */
    }

    .table_tp {
        width: 100%; /* Mantiene la tabla ocupando todo el ancho */
        font-size: 1.2em; /* Aumenta el tamaño de la fuente */
    }

    .publicaciones_dof {
        width: 95%; /* Ajusta la sección al 95% del ancho */
        padding: 20px; /* Aumenta el padding */
        margin: 20px auto; /* Ajusta el margen */
    }

    .publicaciones_dof h2 {
        font-size: 22px; /* Aumenta el tamaño de los títulos */
        padding: 12px; /* Aumenta el padding */
        text-align: center;
    }

    .publicaciones_dof table {
        font-size: 1.2em; /* Aumenta el tamaño de la fuente en las tablas */
    }

    .button-buscar {
        width: 20%; /* Ajusta el ancho */
        padding: 16px; /* Aumenta el padding */
        font-size: 18px; /* Aumenta el tamaño de la fuente */
        margin-top: 30px; /* Aumenta el margen superior */
    }
     /* Busquedas recientes-2 */
     .busqueda_reciente_dos {
        padding: 25px; /* Aumenta el padding */
        text-align: center;
    }

    .busqueda_reciente_dos h1 {
        font-size: 2.5em; /* Aumenta el tamaño de la fuente del h1 */
        padding: 30px; /* Aumenta el padding del título */
    }

    .busqueda_reciente_dos ul {
        margin: 20px auto; /* Centra la lista y aumenta el margen */
        padding: 30px; /* Aumenta el padding de la lista */
        width: 85%; /* Ajusta el ancho al 85% */
    }

    .busqueda_reciente_dos li {
        font-size: 1.2em; /* Aumenta el tamaño de la fuente de los elementos de la lista */
        padding: 20px; /* Aumenta el padding de los elementos de la lista */
        margin: 15px 0; /* Aumenta el margen entre los elementos de la lista */
    }

    .boton_descargar_publiciaciones_dof {
        padding: 20px; /* Aumenta el padding para mayor comodidad */
        font-size: 1.3em; /* Aumenta el tamaño de la fuente del botón */
        margin: 25px auto; /* Centra el botón y ajusta el margen */
        width: 25%; /* Ajusta el ancho del botón al 40% del contenedor */
        display: block; /* Mantiene el botón como un bloque */
    }
    /* Detalle fracción */
     /* Contenido con scroll */
     .contenido-scroll {
        margin-top: -50px;
        margin-bottom: 0px; /* Aumenta el espacio para el footer */
        padding: 30px;
        height: calc(80vh - 0px); /* Ajusta la altura para pantallas grandes */
    }
    .titulo_dettale_de_fraccion {
        font-size: 28px; /* Aumenta el tamaño de la fuente */
        margin: 20px auto; /* Centra el título */
        padding: 25px; /* Aumenta el padding */
        width: 40%;
    }

    .contenedor_principal {
        width: 85%; /* Ajusta el ancho del contenedor */
        margin: 50px auto; /* Aumenta el margen superior */
        grid-template-columns: repeat(4, 1fr); /* Cambia a cuatro columnas */
        gap: 20px; /* Aumenta el espacio entre columnas */
        max-height: none; /* Elimina la altura máxima */
        overflow-y: visible; /* Desactiva el scroll vertical */
        font-size: 0.8em; /* Aumenta el tamaño de la fuente */
        align-items: center;
        margin-left: 20%;
    }

    .th, td {
        padding: 10px; /* Aumenta el padding de las celdas */
    }

    .unidad, .nota {
        padding: 16px; /* Aumenta el padding */
        font-size: 1.8em; /* Aumenta el tamaño de la fuente */
    }

    .seccion_titulo, .seccion_tres_titulo {
        font-size: 24px; /* Aumenta el tamaño de la fuente */
        margin: 30px auto; /* Centra el título */
        width: 40%;
        padding: 25px;
    }

    .descripcion_datos_uno {
        margin: 0px auto; /* Centra la sección */
        padding: 5px; /* Aumenta ligeramente el padding */
        font-size: 1.2em; /* Aumenta el tamaño de la fuente */
        justify-content: space-between; 
        width: 65%;
    }

    .datos_seccion_uno, .datos_seccion_dos, .datos_seccion_tres {
        display: inline-block;
        padding: 20px;
        margin: 0 90px;
        width: 28%;
        font-size: 1.2em;
    }

    .descripcion_datos {
        flex-direction: row; /* Mantiene el diseño en fila */
        padding: 10px; /* Aumenta el padding */
        margin: 0 auto; /* Centra la sección */
    }

    .datos_seccion {
        width: 100%; /* Ajusta el ancho */
    }

    .tabla_seccion_tres {
        width: 90%; /* Ajusta el ancho de la tabla */
        margin: 20px auto; /* Centra la tabla */
        padding: 10px; /* Aumenta el padding */
        font-size: 1em; /* Aumenta el tamaño de la fuente */
    }

    .descargar_boton_pdf {
        margin-top: -30px; /* Aumenta el margen superior */
        margin-bottom: 40px; /* Aumenta el margen inferior */
        padding: 15px 25px; /* Aumenta el padding */
        font-size: 16px; /* Aumenta el tamaño de la fuente */
        width: 20%; /* Ajusta el ancho */
    }
    /* Actualización de Tarifa Arancelaria */
    .actualizacion_tarifa {
        margin-top: 80px; /* Aumenta el margen superior */
        margin: 80px; /* Aumenta el margen general */
    }
    .titulo-actualizacion-tarifa h1{
        margin-top: 90px;
    }
    .actualizacion_tarifa label {
        font-size: 26px; /* Aumenta el tamaño de la fuente */
        margin-bottom: 100px; /* Ajusta el margen inferior */
        
    }

    .actualizacion_tarifa input[type="text"] {
        width: 550px; /* Aumenta el ancho del input */
        padding: 16px; /* Aumenta el padding */
        font-size: 18px; /* Aumenta el tamaño de la fuente */
    }

    .boton-buscar button {
        padding: 14px 24px; /* Aumenta el padding del botón */
        font-size: 18px; /* Aumenta el tamaño de la fuente del botón */
        margin-top: 16px; /* Aumenta el margen superior */
    }

    .boton-actualizar button {
        padding: 17px 50px; /* Aumenta el padding del botón de actualización */
        font-size: 18px; /* Aumenta el tamaño de la fuente del botón de actualización */
        margin-top: 60px; /* Aumenta el margen superior */
        width: 140%;
        
    }
    /* Búsqueda por descripción de la mercancía */
    .tabla_principal h1 {
        font-size: 2em; /* Aumenta el tamaño de la fuente */
        margin-bottom: 10px; /* Ajusta el margen inferior */
        text-align: center; /* Mantiene el centrado */
        margin-top: 60px;
        
    }

    .texto_res h3 {
        font-size: 1.5em; /* Aumenta el tamaño de la fuente */
        margin: 15px 30px; /* Ajusta el margen */
        padding: 25px; /* Aumenta el relleno */
        margin-top: 60px;
    }

    .tabla_prinicipal_descrp_mercancia table {
        width: 90%; /* Aumenta el ancho al 95% */
        margin: 20px auto; /* Centra y ajusta el margen */
    }

    .tabla_prinicipal_descrp_mercancia th,
    .tabla_prinicipal_descrp_mercancia td {
        padding: 12px; /* Aumenta el relleno de las celdas */
        font-size: 1.4em; /* Aumenta el tamaño de la fuente en celdas */
    }

    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(1),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(2),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(3),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(4),
    .tabla_prinicipal_descrp_mercancia tbody td:nth-child(5) {
        font-size: 1.1em; /* Aumenta el tamaño de fuente de las columnas */
        text-align: center; /* Mantiene el texto centrado */
    }
    /* Publicaciones Dof */
    .principal_publicaciones_dof {
        max-width: 60%; /* Aumenta el ancho para pantallas grandes */
        margin: 0 auto; /* Elimina márgenes superior e inferior, mantiene el centrado horizontal */
        padding: 15px; /* Ajusta el padding para menos espacio interno, puedes reducirlo más si es necesario */
        border: 1px solid #ccc;
        border-radius: 9px; /* Mantén un borde suave */
    }

    .text_publicaciondes_dof h1 {
        font-size: 2em; /* Aumenta el tamaño de la fuente */
        margin: 20px; /* Ajusta el margen para más espacio alrededor */
        text-align: center;
        width: 100%; /* Asegura que el h1 ocupe todo el ancho */
    }

    .principal_publicaciones_dof input[type="date"],
    .principal_publicaciones_dof select {
        width: 545.7px; /* Aumenta el ancho para campos más grandes */
        padding: 12px; /* Ajusta el padding para un mejor toque */
        font-size: 20px; /* Aumenta el tamaño de la fuente */
        margin-bottom: -15px; /* Aumenta el margen inferior */
        
    }

    .tabla_pulicaciones_dof table {
        width: 95%; /* Ajusta el ancho a un 95% para mayor comodidad */
        margin: 50px auto; /* Centra y ajusta los márgenes */
        font-size: 1em; /* Ajusta el tamaño de la fuente a un tamaño legible */
    }

    .tabla_pulicaciones_dof table th,
    .tabla_pulicaciones_dof table td {
        padding: 12px; /* Aumenta el relleno de las celdas */
        font-size: 1.2em; /* Aumenta ligeramente el tamaño de la fuente */
    }

    .boton_descargar_publiciaciones_dof {
        width: 20%; /* Ajusta el ancho del botón */
        padding: 15px; /* Ajusta el padding para más espacio */
        font-size: 16px; /* Aumenta el tamaño de la fuente */
        margin: 20px auto; /* Ajusta el margen para centrar el botón */
    }
}


#years, #months, #days {
    width: 100% !important;
    padding: 5px !important;
    font-size: 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: white !important;
}

.loader {
    display: none;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading {
    background-color: #ccc;
    pointer-events: none;
}