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-actions {
    display: flex;
    align-items: center;
    gap: 40px; /* separación entre ayuda y usuario */
    position: relative;
}

#btn-ayuda {
    cursor: pointer;
    z-index: 1; /* debajo del dropdown */
}

 .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 {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    background-color: #fff;
    min-width: 160px;
    z-index: 20; /* por encima de todo */
}

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

#btn-ayuda img {
    height: 30px;
    width: 30px;
    display: block; /* evita el desajuste vertical de inline-img */
}

 .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;
 }

 .delete-btn {
 	background-color: transparent;
 	border: none;
 	padding: 8px;
 	cursor: pointer;
 	border-radius: 4px;
 	transition: background-color 0.3s ease;
 	color: #4A4A4A;
 }


 .delete-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;
 }

 /*Botones up & down de tablas*/
 .sort-btn {
 	border: none;
 	background: transparent;
 	cursor: pointer;
 	/* Para indicar que es un elemento en el que se puede hacer clic */
 	padding: 0;
 	/* Elimina cualquier relleno que pueda afectar el tamaño */
 	font-size: 1em;
 	/* O el tamaño que prefieras */
 	color: inherit;
 	/* O un color específico para los iconos, por ejemplo, #333 */
 }

 /* --- PAGINACIÓN --- */
 .pagination-container {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	gap: 6px;
 	flex-wrap: wrap;
 	margin-top: 20px;
 }

 .page-btn {
 	padding: 6px 12px;
 	border: 1px solid #ddd;
 	background: #f9f9f9;
 	color: #333;
 	border-radius: 3px;
 	cursor: pointer;
 	transition: all 0.2s ease;
 	font-size: 14px;
 }

 .page-btn:hover:not(:disabled) {
 	background: #00BFEF;
 	color: white;
 	border-color: #00A5D4;
 }

 .page-btn:disabled {
 	background: #e9ecef;
 	color: #999;
 	cursor: not-allowed;
 }

 .page-btn.active {
 	background: #00BFEF;
 	color: white;
 	font-weight: bold;
 	border-color: #00A5D4;
 }

 .page-dots {
 	padding: 6px 10px;
 	color: #666;
 	font-size: 14px;
 }

 .buscador
 {
	height: 20px;
 }