body {
            font-family: Roboto, sans-serif !important; 
            background: #f2f2f2;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
			
        }
        

         
        body {
            margin: 0;
            font-family: Roboto, sans-serif !important; 
            display: flex;
			font-size: 1rem; 
        }
        nav {
				/*padding-top: 1.11vh !important; */
				position: fixed;
				top: 66px;
				left: 0;
				width: 70px;
				height: 100vh;
				background-color: #242424;
				color: white;
				/*padding-top: 20px;*/
				box-sizing: border-box;
				border-top: solid gray 1px !important;
				
						
			}
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav ul li {
            padding: 0;
			justify-content: center;  /* centra el <a> horizontalmente */
			
        }
        nav ul li a {
		display: flex;
		align-items: center;
		width: 100%;
		height: 48px; 
		padding: 0 16px;
		box-sizing: border-box;
		text-decoration: none;
		color: white;
		transition: background-color 0.3s ease;	
        }
		
		nav ul li a.active,
        nav ul li a:hover {
		  background-color: #4A4A4A;
		}
        .dashboard-box {
            flex-grow: 1;
            padding: 30px;
            background-color: #ecf0f1;
            min-height: 100vh;
			margin-left: 70px; 
			height: 100%;
			width: 100%; 
			
        }
        .logout-link {
            position: absolute;
            bottom: 20px;
            left: 20px;
        }
		
		table {
            width: 100%;
            margin: 30px auto;
            border-collapse: separate;
			border-spacing: 0;               
			border-radius: 6px;
			overflow: hidden; 
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);		
        }
        th, td {
            padding: 12px;
            border: none;
			border-bottom: 1px solid #ccc;
            text-align: left;
        }
        th {
            background-color: #E3E3E3;
            color: #4A4A4A;
			
        }
		
		tr
		{
			color: #242424;
			background-color: white;
			
		}
		
		
			thead tr:first-child th:first-child {
			  border-top-left-radius: 6px;
			}
			thead tr:first-child th:last-child {
			  border-top-right-radius: 6px;
			}
			tbody tr:last-child td:first-child {
			  border-bottom-left-radius: 6px;
			}
			tbody tr:last-child td:last-child {
			  border-bottom-right-radius: 6px;
			}
		
		.modal {
		  display: none; 
		  position: fixed; /* fijo en pantalla */
		  z-index: 1000; /* por encima de todo */
		  left: 0;
		  top: 0;
		  width: 100%; 
		  height: 100%; 
		  overflow: auto; 
		  background-color: rgba(0,0,0,0.5); 
		 
		}
		
		

		/* Contenido del modal */
		.modal-content {
		  background-color: white;
		  margin: 5% auto; 
		  padding: 30px;
		  border: 1px solid #888;
		  width: 700px;
		  border-radius: 6px;
		  position: relative;
		}
		
		.modal-content form {
		  display: flex;
		  flex-direction: column;
		}

		.modal-content label,
		.modal-content input:not([type="radio"]):not([type="checkbox"]),
		.modal-content select,
		.modal-content button {
		  width: 100%;
		  margin-top: 10px;
		  box-sizing: border-box;
		
		}


		/* Botón de cerrar */
		.close {
		  color: #4A4A4A;
		  position: absolute;
		  top: 10px;
		  right: 15px;
		  font-size: 24px;
		  cursor: pointer;
		  transition: all 0.3s ease;
		  
		}

		.close:hover,
		.close:focus {
		  color: #e3e3e3;
		  	
		}
		
	
		/* Barra superior fija */
		.topbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 66px;
            background-color: #242424;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 1000;
        }

        .topbar .logo {
            font-size: 20px;
            font-weight: bold;
        }

		/* Menú de opciones */
		.topbar .nav-options {
			display: flex;
			gap: 20px;
		}

		.topbar .nav-options a {
			color: white;
			text-decoration: none;
			font-weight: 500;
		}

		.topbar .nav-options a:hover {
			text-decoration: underline;
		}
		body {
			margin-top: 60px;
		}
		
		.user-menu {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
        }

        .user-initials {
            width: 40px;
            height: 40px;
            background-color: #00BFEF;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 16px;
        }

        .user-menu:hover .user-initials {
            background-color: #38CCF2;
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            top: 55px;
            right: 0;
			left:30;
            background-color: #fff;
            color: #333;
            min-width: 160px;
            overflow: hidden;
            z-index: 1001;
        }

        .user-menu:hover .dropdown-menu {
            display: block;
        }

      .dropdown-menu a {
    display: block;
    padding: 10px 15px;
    color: white;
    font-weight: 500;
    background-color: #242424;
    position: relative;
    text-decoration: none;
    overflow: hidden;
}

.dropdown-menu a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 15px;
    height: 2px;
    width: 0;
    background-color: white;
    transition: width 0.3s ease;
}

.dropdown-menu a:hover::after {
    width: calc(100% - 30px); /* Respeta padding horizontal */
}


		
		/* Clases Customizadas*/
		.titulos-pag
		{
			color: #242424 !important;
			margin-top:30px;
		}
		
		.open-modal-form{
			background-color:#00BFEF;
			font-family: Roboto, sans-serif !important; 
			border-radius:3px;
			width:40px;
			height:33px;
			font-size: 1rem;
			border: none;
			transition: background-color 0.3s ease;
			cursor: pointer;
			margin-top: 30px;
			color: #fff;
			display: inline-flex;   /*en vez de inline-block */
			align-items: center;        
			justify-content: center;    
		}

		.padding_button {
			padding: 25px 45px;
		}

		.open-modal-form i {
			color: white;
		}

		.open-modal-form:hover {
			 background-color: #5ADEFF;
		}
		
		
		.header-actions {
			display: flex;
			justify-content: space-between;
			align-items: center;   
			
			}

			.edit-btn {
			  background-color: transparent;
			  border: none;
			  padding: 8px;
			  cursor: pointer;
			  border-radius: 4px;
			  transition: background-color 0.3s ease;
			  color: #4A4A4A;
			}
			
		
			.edit-btn:hover {
			  background-color: #e3e3e3;
			}
			
			.icon-menu{
			width: 20px;
			height: 20px;
			vertical-align: middle;
			}
			
			.menu-link {
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  text-decoration: none;
			  color: inherit;
			  
			  border-radius: 6px;
			  margin-top: 8px;
			  
			  width: 40px;
			  height: 38px;
			  
			  margin-inline: 15px;
			 
			  
			  
			}
			
				.acciones-columna {
				width: auto; /* dejar que se ajuste al contenido */
				text-align: right; /* alinea todo a la derecha */
				white-space: nowrap; /* evita que los botones se rompan a otra línea */
				padding: 4px 8px;
			}

			.acciones-btns {
				display: flex;
				gap: 8px; /* espacio entre botones */
				justify-content: flex-end; /* asegurar que estén a la derecha */
				align-items: center;
			}


			.sub-titulos-form
			{
				color: #242424;
				font-weight: bold;
				font-family: Roboto, sans-serif !important; 
			}
			
			
			/* ESTILOS FORMULARIOS */
			.form-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
				margin-bottom: 20px;
			}

			.form-group {
				display: flex;
				flex-direction: column;
			}
			
			.form-grid-5 {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 20px;
				margin-bottom: 20px;
			}
			
			.form-grid-1 {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				gap: 20px;
				margin-bottom: 20px;
			}
			
			.form-grid-2 {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
				margin-bottom: 20px;
			}

			input, select {
				padding: 8px;
				border: 1px solid #ccc;
				border-radius: 3px;
			}
			
			input::placeholder {
			  color: #bbb;
			  font-family: Roboto, sans-serif !important; 
			}
			
			
			textarea {
				  width: 100%;
				  padding: 8px;
				  font-size: 14px;
				  color: #bbb;
				  border: 1px solid #ccc;
				  border-radius: 3px;
				  resize: vertical;
				  font-family: inherit;
				  box-sizing: border-box;
				}
			
			
			
			
			
			/* ESTILOS PÁGINA DE LOGIN */
		
				.full-container {
				  display: flex;
				  flex-direction: row;
				  height: 100vh; 
				  width: 100vw;
				}

				/* Columna izquierda */
				.left-section {
				  display: flex;
				  flex-direction: column; 
				  align-items: center;    
				  justify-content: center;
				  height: 100%;
				  width: 60%;
				  background-color: #242424;
				}

				/* Logo centrado */
				.logo {
				  max-width: 60%;
				  height: auto;
				}

				/* Columna derecha */
				.right-section {
				  width: 40%;
				  height: 100%;
				  background-color: #ecf0f1;
				  display: flex;
				  align-items: center;
				  justify-content: center;

				}

				/* Caja de login */
				.login-box {
				  background-color: transparent;
				  padding: 40px;
				  border-radius: 8px;
				  width: 100%;
				  max-width: 400px;
				  /*box-shadow: 0px 0px 15px rgba(0,0,0,0.1);*/
				  
				}

				.login-box h2 {
				  text-align: center;
				  margin-bottom: 20px;
				  font-family: Roboto, sans-serif !important; 
				}

				.login-box label {
				  display: block;
				  margin-top: 15px;
				  font-family: Roboto, sans-serif !important; 
				 
				}

				.login-box input {
				  width: 100%;
				  padding: 10px;
				  margin-top: 5px;
				  border: 1px solid #ccc;
				  border-radius: 3px;
				}

				.login-box button {
				  width: 100%;
				  padding: 10px;
				  margin-top: 20px;
				  background-color: #00BFEF;
				  color: #fff;
				  border: none;
				  border-radius: 3px;
				  cursor: pointer;
				  
				}

				.login-box .error {
				  background-color: #e74c3c;
				  color: white;
				  padding: 10px;
				  border-radius: 3px;
				  margin-top: 10px;  
				  margin-bottom: 15px;
				  text-align: center;
				  min-height: 40px; 
				}

			
			/* ESTILOS TOAST SUCCESS */
				.toast-overlay {
				position: fixed;
				bottom: 40px;
				left: 100px;
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				pointer-events: none;
				z-index: 99999;
				width: auto;
				height: auto;
			}

			.toast-message {
				background-color: #00BFEF26;
				border: 2px solid #00BFEF;
				color: #242424;
				padding: 12px 20px;
				border-radius: 10px;
				font-size: 16px;
				opacity: 0;
				transform: translateX(-20px);
				transition: all 0.5s ease-in-out;
				pointer-events: auto;
				box-shadow: none;
				max-width: 300px;
				margin-bottom: 8px;
			}

			.toast-message.show {
				opacity: 1;
				transform: translateX(0);
			}

			.toast-message.hide {
				opacity: 0;
				transform: translateX(-100%);
			}
			

		
		
         .detalle-layout {
			display: flex;
			gap: 40px;              
			flex-wrap: wrap;       
			width: 100%;
			background-color: white;
			box-shadow: 0 0 5px rgba(0,0,0,0.1);
			border-radius: 10px;

		}

		.columna-izquierda,
		.columna-derecha {
			flex: 1;                
			min-width: 300px;       
		}

		.detalle-box {
			background-color: #fff;
			padding: 15px;
			border-radius: 5px;
			overflow: hidden;      
		}

		.detalle-calibracion {
			width: 100%;
			border-collapse: collapse;
		}

		.detalle-calibracion th {
			text-align: left;
			width: 40%;
			padding: 5px 10px;
		}

		.detalle-calibracion td {
			padding: 5px 10px;
		}


       .columna-izquierda {
			flex: 0 0 50%; 
		}

		.columna-derecha {
			flex: 0 0 45%; 
		}

        .detalle-box {
            background-color: white;
            padding: 10px 30px;
        }

		.shadow {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}

        .detalle-box table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: none !important;
            font-weight: normal !important; 
        }

        .detalle-box th, .detalle-box td {
            padding: 8px;
            text-align: left;
            font-weight: normal !important;
        }

        .detalle-box th {
            width: 20%;
        }

        .volver-link {
            display: inline-block;
            margin-top: 30px;
            background-color: #3498db;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
        }

        .volver-link:hover {
            background-color: #2980b9;
        }

        .detalle-calibracion {
            width: 100%;
            margin: 10px auto;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 6px;
            overflow: hidden; 
        }

        .detalle-calibracion th,
        .detalle-calibracion td {
            padding: 12px;
            border: none;
            text-align: left;
        }

        .detalle-calibracion th {
            background-color: white;
            color: #7B7B7B;
        }

        .detalle-calibracion tr {
            color: #242424;
            background-color: white;
        }

        /* Redondear solo las esquinas */
        .detalle-calibracion thead tr:first-child th:first-child {
            border-top-left-radius: 6px;
        }
        .detalle-calibracion thead tr:first-child th:last-child {
            border-top-right-radius: 6px;
        }
        .detalle-calibracion tbody tr:last-child td:first-child {
            border-bottom-left-radius: 6px;
        }
        .detalle-calibracion tbody tr:last-child td:last-child {
            border-bottom-right-radius: 6px;
        }
		
		
		.site-footer {
				text-align: center;
				padding: 20px 15px;
				margin-top: 40px;
				font-size: 14px;
			}

	
		
		.boton-atras {
			display: inline-block;
			margin-bottom: 8px;
			font-size: 16px;
			text-decoration: none;
			color: #242424; /* o el color que prefieras */
		}

		.boton-atras:hover {
			color: #00BFEF; /* azul al pasar el cursor */
		}


		/* ESTILOS APARTADOS: DETALLE EMPRESA, CALIBRACION Y EQUIPO*/
		        .tabs {
            display: flex;
            border-bottom: 2px solid #ccc;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin-right: 5px;
            background-color: #fff;
        }
        .tab.active {
            background-color: #fff;
            border: 2px solid #ccc;
            border-bottom: none;
            color: #00BFEF;
            font-weight: bold;
        }
        .tab-content {
            border: 2px solid #ccc;
            display: none;
			background-color: #fff;
        }
        .tab-content.active {
            display: block;
        }


		/* ESTILOS DATA TABLES*/

					/* Estilos para todas las tablas principales */
			#tablasMetrinet.dataTable,
			#tablaCatalogos.dataTable,
			#tablaAsignaciones.dataTable,
			#tablaContratos.dataTable 			{
				background-color: white !important;
			}

			/* Contenedor del filtro */
			#tablasMetrinet_wrapper .dataTables_filter,
			#tablasContratos_wrapper .dataTables_filter,
			#tablasAsignaciones_wrapper .dataTables_filter,
			#tablaCatalogos_wrapper .dataTables_filter {
				display: flex;
				flex-direction: column;
			}

			/* Input de búsqueda */
			#tablasMetrinet_filter,
			#tablaContratos_filter,
			#tablaAsignaciones_filter,
			#tablaCatalogos_filter {
				width: fit-content;
				float: right;
				margin: 20px 0;
			}

			/* Selector de cantidad de filas */
			#tablasMetrinet_length,
			#tablaContratos_length,
			#tablaAsignaciones_length,
			#tablaCatalogos_length {
				width: fit-content;
				float: left;
				margin: 20px 0;
			}


		/*  ESTILOS TABLAS */
		.dataTables_wrapper .dataTables_paginate .paginate_button {
			background-color: #fff !important;    
			border: 1px solid #00BFEF !important; 
			border-radius: 4px !important;        
			padding: 6px 12px;
			margin: 0 2px;
			cursor: pointer;
			color: #00BFEF !important;            
			font-size: 14px;
			min-width: 32px;                      
			text-align: center;
			transition: all 0.2s ease;
		}

		.dataTables_wrapper .dataTables_paginate .paginate_button.current {
			background-color: #00BFEF !important; 
			color: #fff !important;               
			border: 1px solid #00BFEF !important;
		}


		div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button:hover:not(.disabled),
		div.dataTables_wrapper div.dataTables_paginate ul.pagination .paginate_button.current:hover {
			background-color: #00BFEF !important;
			border: 1px solid #00BFEF !important;
			color: #fff !important;
		}



		.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
		.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled {
			background-color: #f8f8f8 !important;
			border: 1px solid #ccc !important;
			color: #ccc !important;
			cursor: not-allowed;
		}

		/* Estilos Home/Dashboard/Inicio */
		.row-4, .row-2 {
            display: flex;
            gap: 20px; /* espacio entre cajas */
        }

        /* Fila superior: 4 cajas */
       .row-4 .box {
			display: flex;                 
			justify-content: space-between; 
			align-items: center;            
			text-align: left;              
			padding: 20px;
			background-color: white;
			border-radius: 6px;
			box-shadow: 0px 3px 26px #0000001A;
			width: 100%;
			height: 110px;
		}

        /* Espacio entre filas */
        .row-4 {
            margin-bottom: 30px;
        }

        /* Fila inferior: 2 cajas grandes */
        .row-2 .box {
            flex: 1;
            background-color: white;
			padding-top: 5px !important;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0px 3px 26px #0000001A;
			width: 100%;
        }

        /* Subcajas dentro de cada caja */
        .sub-box {
            background-color: #F4F4F4;
			height: 80px;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 6px;
           
        }
		

    /* Caja tipo estadística */
    
		.box-content {
			display: flex;
			flex-direction: column;
		}

		.box-text {
		
			font-size: 18px;
			color: #7B7B7B;
			font-weight: bold;
			margin-bottom: 5px;
			text-align: left;
		
		}

		.box-number {
			font-size: 48px;
			font-weight: bold;
			color: #212121;
			text-align: left;
			padding-top:10px;
		}

		
		
		.box-icon .rounded-box {
			width: 50px;
			height: 50px;
			background-color: #E3F9FF;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 6px;
			font-weight: bold;
			font-size: 16px;
		}
		
		
		
		
		
		
		
		.item-box {
			
			background-color: #F4F4F4;
			height: 60px;
           /*padding: 15px;*/
            margin-bottom: 10px;
            border-radius: 6px;
			display: flex;
			align-items: center;
			padding: 12px 15px;
				
			}

			/* Cajita a la izquierda */
			.item-icon {
				width: 50px;
				height: 50px;
				background-color: white;
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 6px;
				font-weight: bold;
				font-size: 14px;
				margin-right: 15px; 
			
			}

			/* Contenedor de los textos */
			.item-texts {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: left;
				
			}

			/* Texto principal */
			.item-title {
				font-size: 14px;
				font-weight: bold;
				color: #212121;
				margin-bottom:3px;
			}

			/* Texto secundario */
			.item-subtitle {
				font-size: 13px;
				color: #7B7B7B;
			}

			.pill-green {
			  display: inline-block;
			  width: 90px;  /* longitud de la pastilla */
			  height: 20px;     /* altura de la pastilla */
			  background-color: #BCF2C9; /* verde */
			  border-radius: 20px; /* bordes redondeados */
			  margin-left: 10px;  /* espacio entre el texto y la pastilla */
			  height:25px;
			  text-align: center !important; 
			  align-content: center;
			  font-size: 12px !important;
			  font-weight: normal !important;
			}
			
			
			.titulo-y-empresa {
				display: flex;
				flex-direction: column;
				margin-bottom: 12px;
			}

			.empresa-usuario {
				margin: 0;
				font-size: 14px;
				color: #666;
			}
			
			
.form-checkbox-container label {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el checkbox y el texto */
    cursor: pointer;
}

.form-checkbox-container {
   width: 500px;
}



#modal .tab-content {
    display: none;
    background-color: #fff;
}
#modal .tab-content.active {
    display: block;
}

#modal .tabs {
    display: flex;
    border-bottom: 2px solid #ccc;
}
#modal .tab {
    padding: 10px 20px;
    cursor: pointer;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 5px;
    background-color: #fff;
}
#modal .tab.active {
    background-color: #fff;
    border: 2px solid #ccc;
    border-bottom: none;
    color: #00BFEF;
    font-weight: bold;
}