/* styles.css */  

/* Establecer fondo oscuro para el cuerpo */ 
	body {
		background-color: #121212; /* Fondo oscuro */
		color: #E0E0E0; /* Texto claro */
		font-family: Arial, sans-serif;
	}

	/* Estilo para los encabezados */
	h2 {
		color: #FFFFFF; /* Color brillante para el texto */
		text-align: center;
		padding: 10px 0; /* Reducir el padding vertical */
		font-weight: bold;
		font-size: 20px;
		margin: 0; /* Elimina los márgenes predeterminados */
	}

	/* Estilo de la tabla */
	table {
		width: 100%;
		margin: 20px auto;
		border-collapse: collapse;
		color: #E0E0E0;
		background-color: #121212; /* Fondo oscuro de la tabla */
		border-radius: 5px; /* Bordes redondeados */
	}

	/* Centrado de las celdas de la tabla */
	table th, table td {
		padding: 12px;
		text-align: center; /* Alinea el texto al centro */
		border: 1px solid #444; /* Bordes suaves de color gris oscuro */
		font-size: 15px; /* Ajusta el tamaño de la fuente según lo necesites */
	}

	/* Encabezados de tabla con un gris sutil */
	table th {
		background-color: #2a2a2a; /* Fondo gris oscuro sutil para los encabezados */
		color: #FFFFFF; /* Texto blanco */
		font-weight: bold;
		font-size: 15px;
		text-align: center; /*   texto de los encabezados esté centrado */
	}

	/* Celdas de la tabla */
	table td {
		background-color: #121212; /* Fondo igual que la pantalla para las celdas */
		color: #FFFFFF; /* Texto blanco */
	}

	/* Estilo para las filas de la tabla */
	tr:nth-child(even) {
		background-color: #121212; /* Fondo oscuro para las filas pares */
	}

	tr:nth-child(odd) {
		background-color: #121212; /* Fondo oscuro para las filas impares */
	}

	tr:hover {
		background-color: #555; /* Resalta el fondo cuando el mouse pasa sobre la fila */
	}
	
	/* Centrar los nombres de las columnas en el encabezado de la tabla */
	#patientsTable th {
        text-align: center;
	}


	/* Estilo para los botones */
	button {
		font-size: 0.8rem; /* Tamaño del texto de los botones */
		background-color: #007bff; /* Fondo azul */
		color: white; /* Texto blanco */
		padding: 5px 10px; /* Padding del botón */
		border: 1px solid #444; /* Sin borde */
		cursor: pointer; /* Cambio de cursor al pasar el mouse */
		border-radius: 5px; /* Bordes redondeados */
		font-weight: bold; /* Negrita */
		transition: background-color 0.3s ease; /* Transición suave */
		margin-bottom: 20px;
		margin-left: 5px
	}

	/* Efecto hover de los botones */
	button:hover {
		background-color: #0056b3; /* Fondo azul oscuro cuando el mouse pasa por encima */
	}


/* Modal (fondo y contenedor principal) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
    padding: 0;  /* Eliminar cualquier padding */
    overflow: hidden;
}

/* Contenido del modal sin marco */
.modal-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;  /* Sin márgenes */
    padding: 0;  /* Sin relleno */
    width: 100%;
    height: 100%;
    background-color: transparent;  /* Fondo transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;  /* Eliminar cualquier sombra */
}

/* Iframe dentro del modal (se ajusta al 100% del espacio) */
.modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;  /* Eliminar márgenes */
}

/* Estilo para el modal cuando se cierra */
.modal-content .close-icon {
    display: none; /* Ocultar la X */
}

/* Estilo general para la tabla */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

/* Icono de ojo */
.fa-eye {
    color: #007bff;
    font-size: 24px;
    cursor: pointer;
}

.fa-eye:hover {
    color: #0056b3;
}

/* Icono de info */
.fa-info-circle {
    color: #007bff;
    font-size: 24px;
    cursor: pointer;
}

.fa-info-circle:hover {
    color: #0056b3;
}


/* CSS para ocultar las columnas */
.hidden-column {
    display: none;
}

/* Estilo para el botón de cierre */
.modal-close {
    background-color: transparent;
    color: #E0E0E0;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 5px 10px;
    border-radius: 5px;
}

.modal-close:hover {
    background-color: #FF5733; /* Fondo suave en hover */
    color: white; /* Texto blanco */
	
}

	/* Estilo para la búsqueda */
	.dataTables_filter input {
		padding: 12px;
		font-size: 13px;
		border-radius: 5px;
		background-color: #333;  /* Fondo oscuro */
		color: #FFFFFF;  /* Texto blanco */
		border: 1px solid #444;  /* Borde gris claro */
		font-weight: bold;
	}

	/* Estilo para la información de la tabla (mostrando 1 a 10 de X entradas) */
	#patientsTable_wrapper .dataTables_info {
		font-weight: bold;
		font-size: 15px;
		background-color: #121212; /* Fondo oscuro detrás del texto */
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 10px;
		color: #007bff;
	}

	/* Estilo para la paginación */
	.dataTables_paginate .paginate_button {
		color: #1F2D3D !important; /* Texto oscuro sobre superficie clara */
		background-color: transparent !important; /* Fondo transparente */
		font-size: 14px; /* Aumenta el tamaño de la fuente */
		padding: 10px 15px;
		margin: 0 5px;
		border: 1px solid #444; /* Borde gris oscuro */
		border-radius: 5px;
		cursor: pointer;
		font-weight: bold;
		transition: background-color 0.3s ease, transform 0.2s ease; /* Efecto de transición */
	}

	/*  los botones de paginación siempre tengan el texto blanco */
	.dataTables_paginate .paginate_button span {
		color: #1F2D3D !important; /* Texto oscuro sobre superficie clara */
	}

	/* Efecto cuando el mouse pasa por encima de los botones de paginación */
	.dataTables_paginate .paginate_button:hover {
		background-color: #EAF2F8; /* Hover clínico suave */
		color: #1F2D3D !important; /* Texto oscuro */
		transform: scale(1.05); /* Efecto de "escala" al pasar el mouse */
	}

	/* Efecto cuando el botón de paginación es presionado (activo) */
	.dataTables_paginate .paginate_button:active {
		background-color: #007bff; /* Fondo azul para el botón activo */
		color: #FFFFFF !important; /* Texto blanco */
		border: none; /* Sin borde */
	}

	/* Estilo de los botones 'Primero', 'Anterior', 'Siguiente', 'Último' */
	.dataTables_paginate .paginate_button.previous, 
	.dataTables_paginate .paginate_button.next,
	.dataTables_paginate .paginate_button.first, 
	.dataTables_paginate .paginate_button.last {
		font-weight: bold;
		font-size: 14px; /* Aumenta el tamaño de la fuente */
		padding: 12px 20px; /* Ajuste del padding */
		color: #1F2D3D !important; /* Texto oscuro en navegación */
	}

	/*   botones de paginación siempre sean legibles */
	.dataTables_paginate {
		color: #1F2D3D !important; /* Texto oscuro en paginación */
		font-weight: bold;
	}

	/* Enfoque (focus) en los botones de paginación */
	.dataTables_paginate .paginate_button:focus {
		outline: none; /* Sin contorno */
		box-shadow: 0 0 10px #FFFFFF; /* Resaltado blanco al recibir foco */
	}

	/* Campos de texto de búsqueda y paginación en los controles */
	.dataTables_length select, .dataTables_filter input {
		background-color: #333; /* Fondo oscuro */
		color: #FFFFFF; /* Texto blanco */
		border: 1px solid #444;  /* Borde gris */
	}

	/* Estilo adicional para los textos en las secciones 'Mostrar resultados por página' y 'Buscar' */
	#pageLengthControl label, .dataTables_filter label {
		color: #FFFFFF; /* Texto blanco en los controles */
		font-weight: bold;
		margin-top: 10px;
	}

	/*   contenedor del select también tenga el fondo adecuado */
	#pageLengthControl, .dataTables_length {
		background-color: #1e1e1e; /* Fondo oscuro */
		color: #FFFFFF; /* Texto blanco */
		font-weight: bold; /* Negrita */
	}
	

	
		/* Estilos generales para la longitud de página */
.dataTables_length {
    color: #FFFFFF; /* Texto blanco */
    font-weight: bold; /* Negrita */
    text-align: center; /* Centrado del texto */
    margin-top: 10px;
}

/* Estilo para el texto 'Mostrar' y 'entradas' en el control de longitud */
.dataTables_length label {
    color: #FFFFFF; /* Texto blanco */
    font-weight: bold; /* Negrita */
    margin: 0 10px; /* Espaciado */
}

/* Opciones dentro del select (cantidad de entradas por página) */
.dataTables_length select option {
    background-color: #1e1e1e; /* Fondo oscuro */
    color: #FFFFFF; /* Texto blanco */
    font-weight: bold; /* Negrita */
}

/* Estilo para el select dentro de 'Mostrar X entradas' */
.dataTables_length select {
    background-color: #1e1e1e; /* Fondo oscuro */
    color: #FFFFFF; /* Texto blanco */
    border: 1px solid #282828; /* Borde más oscuro */
	font-weight: bold; /* Negrita */
	padding: 8px; /* Ajuste de padding */
	font-size: 13px; /* Tamaño de la fuente */
	border: 1px solid;
}

/* Cambios al pasar el mouse sobre las opciones */
.dataTables_length select option:hover {
    background-color: #282828; /* Fondo más claro al pasar el mouse */
    color: #FFFFFF; /* Texto blanco */
}

/* Estilo para el modal Study */
#studyModal {
    display: none; /*   los modales estén ocultos por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 98%; /* Ocupa todo el ancho de la pantalla */
    height: 100%; /* Ocupa toda la altura de la pantalla */
    background: #121212;
    padding: 10px;
    border: 1px solid #444;
     /* modal esté sobre el overlay z-index: 1001;*/
    color: #333;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.8);
    overflow-y: auto; /* Permite el desplazamiento si el contenido excede la altura */
    display: flex;
    flex-direction: column;
}

/* Contenedor para la tabla y el contenido del modal */
#studyModal .modal-content {
    background-color:#121212; /* Fondo oscuro para la sección del contenido */
    flex: 1; /* Esto hará que el contenedor ocupe el resto del espacio disponible */
    overflow-y: auto; /* Permite desplazarse si el contenido es muy largo */
}

/* Estilo para el botón de cerrar */
#studyModal .modal-close {
    background-color: #121212; /* Fondo oscuro */
	position: absolute;
    top: 1px;
    right: 1px;
    border: 3px solid #E0E0E0; /* Bordes de color */
    font-size: 20px;
    color: white;
    cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	/*width: 30px;  Aumenta el ancho */
	/*height: 32px;  Aumenta el alto */
    z-index: 1000; /*   botón esté encima del contenido del modal */

}

/* Efecto hover en el botón de cerrar */
#studyModal .modal-close:hover {
    background-color: #FF5733; /* Fondo suave en hover */
    color: white;
}



/* Estilo para la tabla dentro del modal */
#studyModal table {
    width: 100%; /*   tabla ocupe todo el ancho del modal */
    max-height: 80vh; /* Limita la altura de la tabla para evitar que ocupe toda la ventana */
    overflow-y: auto; /* Permite que la tabla se desplace si hay más registros */
    border-collapse: collapse; /* Elimina los espacios entre las celdas de la tabla */
    margin-top: 20px; /* Añade un margen superior para separarla del título */
}

/* Estilo para las celdas de la tabla */
#studyModal table th, #studyModal table td {
    border: 1px solid #444;
    padding: 10px;
    text-align: left;
    color: #E0E0E0;
}

/* Estilo para las filas alternas */
#studyModal table tr:nth-child(even) {
    background-color: #555; /* Fondo gris más oscuro para filas alternas */
}

#studyModal {
    z-index: 1001; /* Modal de estudio con valor de z-index más bajo */
}

#viewerModal {
    z-index: 1050; /* Valor de z-index más alto para el visor */
}

/* Overlay del estudio */
#studyModalOverlay {
    z-index: 1000; /* Asegúrate de que esté debajo del modal de estudio */
}

/* Overlay del visor */
#viewerModalOverlay {
    z-index: 1049; /* Asegúrate de que esté debajo del modal del visor */
}

.hidden-column {
	display: none;
  }

/* Estilo para el botón de cierre */
.close-btn {
    background-color: #121212; /* Fondo oscuro */
	position: absolute;
    top: 1px;
    right: 1px;
    border: 3px solid #E0E0E0; /* Bordes de color */
    font-size: 20px;
    color: white;
    cursor: pointer;
	/*transition: background-color 0.3s ease, color 0.3s ease; */
	/*width: 30px;  Aumenta el ancho */
	/*height: 32px;  Aumenta el alto */
    z-index: 1000; /*   botón esté encima del contenido del modal */
}

.close-btn:hover {
    background-color: #FF5733; /* Fondo suave en hover */
    color: white;
}


/* Contenido del modal con marco */
#studyModal .modal-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: solid #333;
    border: 5px solid #333;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white; /* Este es el color de las fuentes (puedes cambiarlo a cualquier color que desees) */
}

/* VISUAL-REFRESH-01B: color, contraste e identidad sin cambiar geometría funcional. */
:root {
    --sgm-background: #0F4C75;
    --sgm-surface: #FFFFFF;
    --sgm-header: #0F4C75;
    --sgm-primary: #0B6FC2;
    --sgm-primary-hover: #095A9D;
    --sgm-border: #B7CBDD;
    --sgm-text: #1F2D3D;
    --sgm-table-hover: #EAF2F8;
}

html body {
    background-color: var(--sgm-background);
    color: #FFFFFF;
}

html body .login-container {
    background-color: var(--sgm-surface);
    color: var(--sgm-text);
    border: 1px solid var(--sgm-border);
    box-shadow: 0 4px 10px rgba(15, 76, 117, 0.12);
}

html body .login-container h2 {
    color: var(--sgm-header);
}

html body > h2 {
    color: #FFFFFF;
}

html body .login-container label {
    color: var(--sgm-text);
}

html body .login-container input[type="text"],
html body .login-container input[type="password"] {
    background-color: var(--sgm-surface);
    color: var(--sgm-text);
    border-color: var(--sgm-border);
}

html body .login-container input[type="text"]:focus,
html body .login-container input[type="password"]:focus {
    border-color: var(--sgm-primary);
    outline-color: var(--sgm-primary);
}

html body .login-container input[type="submit"] {
    background-color: var(--sgm-primary);
    color: #FFFFFF;
}

html body .login-container input[type="submit"]:hover {
    background-color: var(--sgm-primary-hover);
}

html body .login-container a,
html body > form a {
    color: var(--sgm-primary);
}

html body .login-container a:hover,
html body > form a:hover {
    color: var(--sgm-header);
}

html body button {
    background-color: var(--sgm-primary);
    color: #FFFFFF;
    border-color: var(--sgm-primary);
}

html body button:hover {
    background-color: var(--sgm-primary-hover);
}

html body table {
    background-color: var(--sgm-surface);
    color: var(--sgm-text);
}

html body table th,
html body table.dataTable thead th {
    background-color: var(--sgm-header);
    color: #FFFFFF;
    border-color: var(--sgm-border);
}

html body table td,
html body table.dataTable tbody td {
    background-color: var(--sgm-surface);
    color: var(--sgm-text);
    border-color: var(--sgm-border);
}

html body table tbody tr:hover td {
    background-color: var(--sgm-table-hover);
}

html body .dataTables_filter,
html body .dataTables_length,
html body .dataTables_info,
html body .dataTables_paginate,
html body #pageLengthControl {
    background-color: transparent;
    color: #FFFFFF;
}

html body .dataTables_filter label,
html body .dataTables_length label,
html body #pageLengthControl label {
    color: #FFFFFF;
}

html body .dataTables_wrapper .dataTables_paginate .paginate_button,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #FFFFFF !important;
}

html body .dataTables_filter input,
html body .dataTables_length select,
html body .dataTables_length select option {
    background-color: var(--sgm-surface);
    color: var(--sgm-text);
    border-color: var(--sgm-border);
}

html body #patientsTable_wrapper .dataTables_info {
    background-color: transparent;
    color: #FFFFFF;
}

html body #studyModal,
html body #studyModal .modal-content {
    background-color: var(--sgm-background);
    color: #FFFFFF;
    border-color: var(--sgm-border);
}

html body #studyModalTitle {
    color: #FFFFFF;
}

html body #studyModal table {
    background-color: var(--sgm-surface);
    color: var(--sgm-text);
}

html body #studyModal table th {
    background-color: var(--sgm-header);
    color: #FFFFFF;
}

html body #studyModal table td {
    background-color: var(--sgm-surface);
    color: var(--sgm-text);
    border-color: var(--sgm-border);
}

/* PHASE-16: identidad transparente y una sola instancia visible. */
html body > img.sgm-canonical-logo[src="imgs/LOGO1NS.png"][width="200"][height="100"] {
    width: 200px;
    height: auto;
    filter: brightness(0) invert(1);
}

html body > img.sgm-redundant-logo[src="imgs/LOGO1NS.png"][width="200"][height="100"] {
    visibility: hidden;
}

@media (max-width: 576px) {
    html body > img.sgm-redundant-logo[src="imgs/LOGO1NS.png"][width="200"][height="100"] {
        height: 135.81px;
    }
}