html > body #content {
          margin-left: 3%;
		  overflow: auto;
        }
        html > body #aside {
          margin-right: 5px;
        }
        
        .container {
            width: 100%;
            overflow: hidden;
        }
        
        #main {
            min-width: 100%;
            width: 100%;
            overflow: hidden;

        }
        .ui-button {
            /*padding: 8px 16px 8px 16px;*/
            margin: 0.1em;
            font-size: 1.0em;
        }

		fieldset {
			max-width:100%;
            /*width: 100%; /* Ancho fijo para el fieldset */
            overflow: auto; /* Agrega barras deslizantes cuando el contenido no cabe */
        }


        .grid-container-2024 {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
          /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  */   /*asegura que cada columna tenga un ancho mínimo de 150px y se expanda hasta llenar el espacio disponible.*/
          gap: 10px; /*Añade un espacio de 10px entre los elementos de la cuadrícula.*/
        }

        .itemgrd2024 {
/*          background-color: #ccc;*/
          background-color: #cccccc12;
          padding: 10px;
          text-align: left;
        }
	    .grid-container-150 {
          display: grid;
		 /* grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));*/
          grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));     /*asegura que cada columna tenga un ancho mínimo de 150px y se expanda hasta llenar el espacio disponible.*/
          gap: 2px; /*Añade un espacio de 10px entre los elementos de la cuadrícula.*/
        }
	    .itemgrd150 {
 		  border-left: 5px solid #0085cc6b;
		  background-color: #cccccc12;
          /*background-color:#F5F5F5;*/
          padding: 10px;
          text-align: left;
        }
		.grid-container-Chk {
          display: grid;
/*          grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));*/
          grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));     /*asegura que cada columna tenga un ancho mínimo de 150px y se expanda hasta llenar el espacio disponible.*/
          gap: 2px; /*Añade un espacio de 10px entre los elementos de la cuadrícula.*/
        }
	    .itemgrdChk  {
          border-left: 5px solid #0085cc6b;
		  margin-bottom: 3px;
          background-color: #cccccc12;
          padding: 10px;
          /*text-align: left;*/
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .text-container {
          display: flex;
          flex-direction: column;
            width:80%;
        }

        .lblcheckboxRightChk{
            max-width: 5em;
            width: 15%;
            margin-left: 0.2em;
        }
        .checkboxRightChk {
		  /* width: 5%;*/
          width: 10px;
          height: 10px;
          background-color: #e3f2f9;
          border: 1px solid #88c6e7;
          border-radius: 3px;
          appearance: none; /* Elimina el estilo predeterminado del checkbox */
          -webkit-appearance: none; /* Para navegadores WebKit */
          cursor: pointer;
          display: inline-block;
          position: relative;
		  padding: 8px;
          margin-left: auto; /* Asegura que el checkbox se alinee a la derecha */	
        }

        .checkboxRightChk:checked {
          /*background-color: #0085d5;*/
        }

        .checkboxRightChk:checked::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 10px;
          height: 10px;
          background-color: #35cd69;
          border-radius: 2px;
          transform: translate(-50%, -50%);
        }
        .checkboxRightChk:disabled {
          background-color: #d3d3d3; /* Color de fondo para el checkbox deshabilitado */
          border: 1px solid #a9a9a9; /* Color del borde para el checkbox deshabilitado */
          cursor: not-allowed; /* Cambia el cursor para indicar que está deshabilitado */
        }

        .checkboxRightChk:disabled:checked::after {
          background-color: #a9a9a9; /* Color del check para el checkbox deshabilitado */
        }

		.grid-container-ChkCurGrpo {
          display: grid;
/*          grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));*/
          grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));     /*asegura que cada columna tenga un ancho mínimo de 150px y se expanda hasta llenar el espacio disponible.*/
          gap: 2px; /*Añade un espacio de 10px entre los elementos de la cuadrícula.*/
        }
	    .itemgrdChkCurGrpo  {
		  border-left: 5px solid #0085cc6b;
		  margin-bottom: 3px;
          background-color: #cccccc12;
          padding: 7px;
          /*text-align: left;*/
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .text-containerCurGrpo {
          display: flex;
          flex-direction: column;
            width:80%;
        }
/*
        .checkboxRightChkCurGrpo {
          width: 5%;
          margin-left: auto;  Asegura que el checkbox se alinee a la derecha 
        }
*/
		.lblcheckboxRightChkCurGrpo{
            max-width: 5em;
            width: 15%;
            margin-left: 0.2em;
        }
        .checkboxRightChkCurGrpo {
		  /*width: 5%;*/
          width: 10px;
          height: 10px;
          background-color: #e3f2f9;
          border: 1px solid #88c6e7;
          border-radius: 3px;
          appearance: none; /* Elimina el estilo predeterminado del checkbox */
          -webkit-appearance: none; /* Para navegadores WebKit */
          cursor: pointer;
          display: inline-block;
          position: relative;
		  padding: 8px;
          margin-left: auto; /* Asegura que el checkbox se alinee a la derecha */	
        }

        .checkboxRightChkCurGrpo:checked {
          /*background-color: #0085d5;*/
        }

        .checkboxRightChkCurGrpo:checked::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 10px;
          height: 10px;
          background-color: #35cd69;
          border-radius: 2px;
          transform: translate(-50%, -50%);
        }
        .checkboxRightChkCurGrpo:disabled {
          background-color: #d3d3d3; /* Color de fondo para el checkbox deshabilitado */
          border: 1px solid #a9a9a9; /* Color del borde para el checkbox deshabilitado */
          cursor: not-allowed; /* Cambia el cursor para indicar que está deshabilitado */
        }

        .checkboxRightChkCurGrpo:disabled:checked::after {
          background-color: #a9a9a9; /* Color del check para el checkbox deshabilitado */
        }

		/* BOTONES MODERNOS 2025*/
		 .button-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* Forzar 5 columnas */
            gap: 5px; /* Reducir el espacio entre los botones */
            padding: 10px; /* Reducir el padding del contenedor */
            width: 100%;
            box-sizing: border-box;
        }
<!--
        fieldset {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            margin: 0; /* Eliminar el margen del fieldset */
        }
-->

        /* Estilos para Badges */
		.badge {
		  display: inline-block;
		  padding: 0.35em 0.5em; /* Aumentado el padding */
		  font-size: 75%;
		  font-weight: 500;
		  line-height: 1;
		  color: #fff;
		  text-align: center;
		  white-space: nowrap;
		  vertical-align: baseline;
		  border-radius: 0.25rem;
		}

		.badge-danger {
		  background-color: #dc3545;
		}

		.badge-success {
		  background-color: #28a745;
		}

		.badge-primary {
		  background-color: #007bff;
		}

		.badge-warning {
		  background-color: #ffc107;
		}

		/* Opcional: Ajustes de color para accesibilidad */
		.badge-danger {
		  background-color: #dc3545;
		  color: #fff;
		}

		.badge-danger:hover {
		  background-color: #c82333;
		}

		.badge-success {
		  background-color: #28a745;
		  color: #fff;
		}

		.badge-success:hover {
		  background-color: #218838;
		}

		.badge-primary {
		  background-color: #007bff;
		  color: #fff;
		}

		.badge-primary:hover {
		  background-color: #0056b3;
		}

		.badge-warning {
		  background-color: #ffc107;
		  color: #212529;
		}

		.badge-warning:hover {
		  background-color: #e0a800;
		}

        /* Nuevo badge orange */
		.badge-orange {
		  background-color: #fd7e14;
		  color: #fff;
		}

		.badge-orange:hover {
		  background-color: #e8590c;
		}


        .modern-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px; /* Reducir el padding del botón */
            font-size: 14.5px; /* Texto ajustado a 14px */
            background-color: #7aad07; /* Nuevo color de fondo */
            color: #FFF;
            text-decoration: none;
            border-radius: 8;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			border:1px solid #7aad07;
            transition: background-color 0.3s, transform 0.3s; /* Especificar solo las propiedades a las que aplicar la transición */
            width: 100%;
            box-sizing: border-box;
        }
        .modern-button i {
            margin-right: 5px; /* Reducir el margen del icono */
            font-size: 18px; /* Tamaño del icono ajustado */
            color: #FFF; /* Color del icono */
        }
        .modern-button:hover {
            background-color: #7aad07; /* Nuevo color de hover */
            color: #FFF; /* Mantener el color del texto en blanco */
            transform: scale(1.02); /* Crecimiento reducido al 2% */
        }
        .modern-button:hover i {
            color: #FFF; /* Mantener el color del icono en blanco */
        }
        @media (max-width: 1200px) {
            .button-container {
                grid-template-columns: repeat(3, 1fr); /* Ajustar a 3 columnas para pantallas medianas */
            }
        }
        @media (max-width: 768px) {
            .button-container {
                grid-template-columns: repeat(2, 1fr); /* Ajustar a 2 columnas para tablets */
            }
        }
        @media (max-width: 480px) {
            .button-container {
                grid-template-columns: repeat(1, 1fr); /* Ajustar a 1 columna para teléfonos móviles */
            }
            .modern-button {
                font-size: 12px; /* Reducir el tamaño del texto en teléfonos móviles */
                padding: 8px; /* Reducir el padding en teléfonos móviles */
            }
        }
        


        .float-div-l {
            width: 74%;
            float: left;
            margin: 0.5%;
/*            background-color: #f0f0f0;*/
            padding: 0px;
            box-sizing: border-box;
        }
        .float-div-r {
            width: 24%;
            float: left;
            margin: 0.5%;
/*            background-color: #f0f0f0;*/
            padding: 0px;
            box-sizing: border-box;
        }
        img {
/*            max-width: 100%;*/
            max-width:1200px;
            height: auto;
        }


        table {
            width: 100%; /* Asegura que la tabla ocupe todo el ancho del contenedor */
            border-collapse: collapse; /* Opcional: para un mejor estilo */
        }
        .table-container-responsive {
            width: 100%;  /*Ajusta el ancho según sea necesario */
/*            height: 300px;  Ajusta la altura según sea necesario */
            overflow-x: auto;  /*Desplazamiento horizontal */
            overflow-y: hidden; /* Oculta el desbordamiento vertical */
        }
        #tray p.f-left {
          width: 80%;
        }

        form {
    /*        max-width: 600px;*/
    /*
            margin: 20px auto;
            padding: 20px;
    */
    /*        border: 1px solid #ccc;*/
            border-radius: 5px;
    /*        background-color: #f9f9f9;*/
        }

        .form-group {
            display: flex;
            flex-direction: row;
            margin-bottom: 2px;
        }

        label {
            margin-bottom: 2px;
        }

        input {
            padding: 10px;
			margin: 0.1em;
            border: 1px solid #ccc;
            border-radius: 4px;
            text-align: left; /* Alinea el texto a la izquierda */
        }
		textarea {
            padding: 10px;
			margin: 0.1em;
            border: 1px solid #ccc;
            border-radius: 4px;
            text-align: left; /* Alinea el texto a la izquierda */
        }
        select {
          /*width: 100%;*/
          height: 31px;
          padding: 3px;
        }

        button {
            padding: 10px 15px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
        .responsive-textarea {
            width: 80%;
            padding: 10px;
            /*font: 100%/1.5 "arial", sans-serif;*/
            background-color: #e3f2f9;
            border: 1px solid #88c6e7;
            border-radius: 3px;
            box-sizing: border-box;
            resize: vertical; /* Permite cambiar el tamaño verticalmente */
        }
    

        /* Ajusta el editor TinyMCE para que ocupe el 100% del contenedor */
        .mceEditor {
            width: 80% !important;
            height: 100% !important;
        }

        /* Asegúrate de que el área de contenido del editor sea responsive */
        .mce-edit-area {
            width: 100% !important;
            height: calc(100% - 40px) !important; /* Ajusta según la altura de la barra de herramientas */
        }

        /* Ajusta la barra de herramientas para que sea responsive */
        .mce-toolbar {
            width: 100% !important;
        }

        /* Ajusta el iframe del contenido del editor */
        .mceIframeContainer iframe {
            width: 100% !important;
            height: 100% !important;
            box-sizing: border-box;
            
        }
        /* Ajusta la barra de estado para que sea responsive */
        .mceStatusbar {
            width: 97% !important;
        }
		
		.input-text {
			padding: 3px;
			font: 100%/1.5 "arial", sans-serif;
			/*background-color: #e3f2f9;*/
			/*border: 1px solid #88c6e7;*/
			border-radius: 3px;
			
			box-sizing: border-box;
		}

		/* Estado hover */
		.input-text:hover {
			/*background-color: #d1ecf5;*/
			/*border-color: #88c6e7;*/
		}

		/* Estado disabled */
		.input-text:disabled {
			background-color: #f5f5f5;
			border-color: #88c6e7;
			color: #999999;
			cursor: not-allowed;
		}

		/* Estado readonly */

		/*.input-text[readonly] {
			background-color: #f5f5f5;
			border-color: #cccccc;
			color: #666666;
		}*/

		.input-container-cal {
			position: relative;
			/*width: 100%;*/
		}
		.input-container-cal img {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
		}

        .right-align {
            position: relative;
            top: 10px; /* Ajusta según sea necesario */
        }

        .DvCabecontainer {
          display: flex;
          flex-wrap: wrap; /* Permite que los divs se ajusten en pantallas pequeñas */
        }

        .DvCabeleft, .DvCabecenter, .DvCaberight {
          padding: 2px;
          box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
        }

        .DvCabeleft {
          flex: 1 1 10%;
        /*  background-color: #f8b400;*/
        }

        .DvCabecenter {
          flex: 1 1 75%;
        /*  background-color: #4caf50;*/
            padding-top: 6px;
        }

        .DvCaberight {
          flex: 1 1 10%;
        /*  background-color: #2196f3;*/

        }
		.avisos {
		  text-align: right;
		  padding-left: 1em;
		  padding-right: 0.1em;
		}
		/* BOTONES VERDES Y ROJOS */
		.BotonVerde {
			background-color: #7aad07;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
			border: 1px solid #7aad07;
			display: inline-block;
			cursor: pointer;
			color: #ffffff;
			font-family: arial;
			font-size: 12px;
			font-weight: bold;
			padding: 6px 24px;
			text-decoration: none;
			text-shadow: 0px 0px 0px #528009;
		}
		.BotonVerde:hover {
			background-color: #7aad07;
			color: #ffffff;
		}
		.BotonVerde:active {
			position: relative;
			top: 1px;
			color: #ffffff;
		}
		.BotonVerde:disabled {
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
			background: -moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
			background: -webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
			background: -o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
			background: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
			background: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed', GradientType=0);
			background-color: #dfdfdf;
			cursor: default;
			text-shadow: 0px 0px 0px #ffff;
			color: #cccccc;
			border: 1px solid #fff;
		}

		.BotonRojo {
			-moz-box-shadow: inset 0px 0px 0px 0px #f5978e;
			-webkit-box-shadow: inset 0px 0px 0px 0px #f5978e;
			box-shadow: inset 0px 0px 0px 0px #f5978e;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
			background: -moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
			background: -webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
			background: -o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
			background: -ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
			background: linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f', GradientType=0);
			background-color: #f24537;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			border-radius: 6px;
			border: 1px solid #d02718;
			display: inline-block;
			cursor: pointer;
			color: #ffffff;
			font-family: arial;
			font-size: 12px;
			font-weight: bold;
			padding: 6px 24px;
			text-decoration: none;
			text-shadow: 0px 0px 0px #810e05;
		}
		.BotonRojo:hover {
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
			background: -moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
			background: -webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
			background: -o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
			background: -ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
			background: linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537', GradientType=0);
			background-color: #c62d1f;
			color: #FFF;
		}
		.BotonRojo:active {
			position: relative;
			top: 1px;
			color: #FFF;
		}
         .containerOpBut {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 20px;
        }
        .radio-groupOpBut {
            display: flex;
            gap: 20px;
        }
        .radio-labelOpBut {
            display: flex;
            align-items: center;
            padding: 3px;
            /*font: 100%/1.5 "arial", sans-serif;*/
            /*background-color: #e3f2f9;*/
            /*border: 1px solid #88c6e7;*/
            border-radius: 3px;
            box-sizing: border-box;
        }
        .radio-inputOpBut {
            margin-right: 10px;
            accent-color: #88c6e7; /* Cambia el color del botón de opción */
        }
        .general-labelOpBut {
            /* font: 100%/1.5 "arial", sans-serif; */
        }


        /* ZONA RESPONSIVE */
        
        /* Estilos para pantallas de hasta 600px de ancho - MOVILES */
        @media (max-width: 600px) {
            .containerOpBut {
                flex-direction: column;
                align-items: flex-start;
            }
            .radio-groupOpBut {
                flex-direction: column;
                gap: 10px;
            }    
            .form-group {
                display: flex;
                flex-direction: column;
                margin-bottom: 0.4em;
				min-height: 65px;
            }
            input {
                width: 100%;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
                text-align: left; /* Alinea el texto al la izda */
            }
			textarea {
                width: 98%;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
                text-align: left; /* Alinea el texto a la izquierda */
            }
			select {
              width: 100%;
			 /* padding: 0.4em;*/
			}
            #content {
                  margin-left: 3%;
                  padding: 0.9em;
				  overflow-x: auto; /* Barra deslizante horizontal */
					
            }
            #aside{
                display: none;
            }
            .float-div-l {
                width: 100%;
                float: none;
                margin: 10px 0;
            }
            .float-div-r {
                width: 100%;
                float: none;
                margin: 10px 0;
            }
            .f-left box {
                width: 100%;
                float: none;
                margin: 10px 0;
            }
            .f-right {
                width: 100%;
                margin: 15px 0;
            }
            #main {
                margin-top: 50px; /* Añade un margen superior para evitar que el contenido se superponga con el div fijo */
overflow: auto;
								  	
            }
            body {
                font-size: 0.875rem; /* Ajusta el tamaño del texto para pantallas pequeñas */
            }
/*
            .contentCabez {
                margin: 0px;
                padding: 0px;
            }
*/
             #tray{
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
            /*
              background-color: #333;
              color: #fff;
              text-align: center;
            */
              padding: 10px;
              z-index: 1000; /* Asegura que el div esté por encima de otros elementos */
            }

            .ui-button {
                width: 80%;
                 /*padding: 8px 16px 8px 16px;*/
                /*padding: 0.1em 0.6em 0.1em 0.1em;*/
                margin: 0.1em;
                font-size: 1.1em;
            }
			.input-text {
			  /* padding: 0.4em;*/ 
			}
	
			.BotonVerde, .BotonRojo {
				font-size: 13px;
				padding: 8px 20px;
				text-align: center;
			}

			.responsive-textarea {
				width: 100%;
				padding: 10px;
				/*font: 100%/1.5 "arial", sans-serif;*/
				background-color: #e3f2f9;
				border: 1px solid #88c6e7;
				border-radius: 3px;
				box-sizing: border-box;
				resize: vertical; /* Permite cambiar el tamaño verticalmente */
			}


			/* Ajusta el editor TinyMCE para que ocupe el 100% del contenedor */
			.mceEditor {
				width: 100% !important;
				height: 100% !important;
			}


    
            
        }
        /* Estilos para pantallas entre 601px y 768px de ancho - TABLETAS MODO RETRATO */
        @media (min-width: 601px) and (max-width: 768px) {


            #aside{
                display: none;
            }
            label {
                width: 10em;
                margin-bottom: 2px;
            }
            .float-div-l {
                width: 100%;
                float: none;
                margin: 10px 0;
            }
            .float-div-r {
                width: 100%;
                float: none;
                margin: 10px 0;
            } 

        }
			
        /* Estilos para pantallas entre 769px y 1024px de ancho  - TABLETAS MODO PAISAJE */
        @media (min-width: 769px) and (max-width: 1024px) {
            #aside{
                display: none;
            }

            label {
                width: 14em;
                margin-bottom: 2px;
            }

        }
        /* Estilos para pantallas entre 1025px y 1200px de ancho - ESCRITORIO PEQUEÑAS Y PORTATILES  */
        @media (min-width: 1025px) and (max-width: 1200px) {
            label {
                width: 14em;
                margin-bottom: 2px;
            }
            
        }
        /* Estilos para pantallas de más de 1200px de ancho - ESCRITORIO GRANDES  */
        @media (min-width: 1201px) {
            label {
                width: 14em;
                margin-bottom: 2px;
            }
            
        }
         /* ORIENTACION - Estilos para pantallas en modo retrato */
        @media (orientation: portrait) {
           
        }
        /* ORIENTACION -  Estilos para pantallas en modo paisaje */
        @media (orientation: landscape) {
            
        }