/* (El CSS se mantiene igual que en la última versión, ya que es correcto) */
        
       /* .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }*/

     .tab-nav-container {
	    display:flex;
		justify-content: center;
	margin-bottom: 20px;
	margin-top: 30px;
        }

     .tab-button {
	background-color: #004191;
	/* border: 1px solid #070707; */
	border-bottom: none;
	cursor: pointer;
	border-radius: 10px;
	transition: background-color 0.3s;
	margin-right: 5px;
	font-weight: 400;
	margin-left: 5px;
	display: block;
	padding: 15px;
	text-align: -webkit-match-parent;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 30px;
}
       
   
   .tab-button:hover:not(.active) {
	background-color: #000;	
	color: #FFF;
        }

        .tab-button.active {
      background-color: #000;
	color: #FFF;
	
        }
        
        .tab-content {
            position: relative; 
            transition: height 0.4s ease-in-out; /* Opcional: añade transición a la altura */
        }

        .tab-pane {
           /* padding: 20px;
            border: 1px solid #dee2e6;
            border-radius: 0 0 .25rem .25rem;*/            
            position: absolute; 
            top: 0;
            left: 0;
            width: 100%;            
            opacity: 0;
            visibility: hidden;
            z-index: 1;
            transition: opacity 0.8s ease-in-out, visibility 0.8s;
        }

        .tab-pane.active {
            opacity: 1;
            visibility: visible;
            z-index: 2; 
        }

        /* Contenedor para la disposición en filas */
        .content-grid {
            display: flex; 
            flex-wrap: wrap; 
            gap: 15px; 
            justify-content: flex-start; 
        }
        
        /* Estilos para las tarjetas de contenido */
        .alert-info, .alert-success {
            flex: 1; 
           min-width: 465px; 
            max-width: calc(33.333% - 10px); 
            box-sizing: border-box; 
            padding: 15px; 
            border-radius: 5px; 
            text-align: center; 
        }

        .alert-info {
	background-color: #FFFFFF;
	color: #000000;
	border: 0px solid #eaeaea;
	border-right-width: 0px;
	border-right-style: solid;
	border-right-color: #CCC;
        }

        .alert-success {
	background-color: #FFFFFF;
	color: #000000;
	border: 0px solid #eaeaea;
	border-right-width: 0px;
	border-right-style: solid;
	border-right-color: #CCC;
        }

        @media (max-width: 479px) {
            .alert-info, .alert-success {
                max-width: 100%; 
            }
			
			.tab-nav-container {
					justify-content: center;
	    display: inline-block;
		 }
		  .alert-info, .alert-success {
            flex: 1; 
           min-width: 200px;            
       
	
        }
        }