@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800&display=swap');

.moveall,
.removeall {
	display: none;
}

#fotoFilePreview {
	object-fit: cover;
	width: 150px !important;
	height: 165px !important;
	border: 1px solid #f8f9fa;
	background-image: url('../../../upload/public/avatar-prev.jpg');
}

#fotoMarcacion {
	object-fit: cover;
	width: 100px !important;
	height: 110px !important;
	border: 1px solid #f8f9fa;
	background-image: url('../../../upload/public/avatar-prev.jpg');
	background-size: cover;
}

.register-laboral {
	width: 460px !important;
}

.layout-top-nav .wrapper .main-header .brand-image {
	height: 55px !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
	font-family: 'Montserrat', sans-serif;
}

.card {
	box-shadow: 0 0 67px rgba(0, 0, 0, .125), 0 1px 54px rgba(0, 0, 0, .2) !important;
	border-radius: 10px !important;
}

.control-label,
label {
	font-weight: 600 !important;
}

.content-wrapper {
	background: #f9f9f9 !important;
}

#fieldGroupClone {
	border-top: 2px dotted #dbdbdb;
}

[class*="sidebar-dark-"] {
	background-color: #0b2b7f !important;
}

button.multiselect-option.dropdown-item {
	pointer-events: none;
}

span.form-check input,
span.form-check label {
	pointer-events: all;
}

/* ================================= Module ================================= */
.image-container {
	margin: 0 auto 1em;
}

.variable-size {
	width: 220px;
	height: 220px;
}

.canvas-image {
	background-color: #33444d;
}

.canvas-overlay {
	background-color: #030303;
	background-color: rgba(3, 3, 3, 0.1);
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.canvas-overlay:active {
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
	cursor: grabbing;
}

.drop-zone {
	background-color: #138496;
	border: 2px dashed white;
	border-radius: 4px;
	padding: 0;
	color: white;
	font-size: 80%;
	text-align: center;
	overflow: hidden;
}

#file-select p {
	margin: auto 0;
	font-size: 80%;
	display: inline;
}

/* ================================= Layout ================================= */
.l-centered {
	width: 320px;
	margin: 0 auto;
}

.l-position-absolute {
	position: absolute;
}

/* ================================= State ================================== */
.__hide {
	display: none;
}

.__warning {
	color: #ff3633;
}

@media only screen and (max-width: 1024px) {
	.content {
		max-width: 100% !important;
	}
}

.cc_tercero {
	clear: both;
	display: block;
	font-size: 0.7rem;
}

.tabla-aval figure,
.patrocinios figure {
	text-align: center;
	padding: 0 !important;
	margin: 0 auto !important;
	width: 100px;
}

.tabla-aval .cc_tercero,
.patrocinios .cc_tercero {
	color: #121212;
	background: #fafafa;
	box-shadow: 0px 2px 4px #E1E1E1;
	border-radius: 0 0 5px 5px;
}

.fecha {
	clear: both;
	display: block;
	color: #b0b0b0;
	line-height: 0.5;
	padding: 0;
}

.gruporadio {
	float: inline-block;
}

.informe figure img {
	border: 2px solid #fafaf9;
	border-radius: 4px;
	box-shadow: 0px 8px 14px #dbdbdb;
	float: left;
	margin: 0 30px 0 0;
}

.custom-control-input-green:focus~.custom-control-label::before {
	border-color: #28a745 !important;
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.custom-control-input-green:checked~.custom-control-label::before {
	border-color: #28a745 !important;
	background-color: #28a745 !important;
}

.custom-control-input-green:focus:not(:checked)~.custom-control-label::before {
	border-color: #5bd778 !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
	background-color: #d6f5dd !important;
	border-color: #d6f5dd !important;
}

.custom-control-input-red:focus~.custom-control-label::before {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 0.2rem #a7312840 !important;
}

.custom-control-input-red:checked~.custom-control-label::before {
	border-color: #dc3545 !important;
	background-color: #dc3545 !important;
}

.custom-control-input-red:focus:not(:checked)~.custom-control-label::before {
	border-color: #be2c3b !important;
}

.custom-control-input-red:not(:disabled):active~.custom-control-label::before {
	background-color: #d6f5dd !important;
	border-color: #d6f5dd !important;
}

.custom-control-input-yellow:focus~.custom-control-label::before {
	border-color: #ffc107 !important;
	box-shadow: 0 0 0 0.2rem #a7312840 !important;
}

.custom-control-input-yellow:checked~.custom-control-label::before {
	border-color: #ffc107 !important;
	background-color: #ffc107 !important;
}

.custom-control-input-yellow:focus:not(:checked)~.custom-control-label::before {
	border-color: #ce9c08 !important;
}

.custom-control-input-yellow:not(:disabled):active~.custom-control-label::before {
	background-color: #d6f5dd !important;
	border-color: #d6f5dd !important;
}

/* zoom fotos */
.zoom {
	transition: transform .2s;
	transform-origin: bottom left;
}

.zoom:hover {
	-ms-transform: scale(4.5);
	/* IE 9 */
	-webkit-transform: scale(4.5);
	/* Safari 3-8 */
	transform: scale(4.5);
	z-index: 9999;
}

.zoomTercero {
	transition: transform .2s;
	background: #f4f4f4;
}

.zoomTercero:hover {
	-ms-transform: scale(1.5);
	/* IE 9 */
	-webkit-transform: scale(1.5);
	/* Safari 3-8 */
	transform: scale(1.5);
}

.soportejira {
	border-width: 3px;
	background-color: #89cff0;
	border-style: solid;
	position: fixed;
	padding: 7px;
	bottom: 40px;
	right: 0;
	max-width: 450px;
	z-index: 999;
	color: #f9f9f9;
	border-radius: 10px 0 0 10px;
}

.soportejira a .soportejira a:hover {
	color: #0000ff !important;
}

/* ----------------- */

.record_nombre.tipo0 {
	font-size: 55px;
	top: 66px;
	position: absolute;
	left: 900px;
	width: 621px;
	padding: 0 20px;
}

.record_nombre.tipo4 {
	top: 1590px;
	position: absolute;
	font-size: 63px;
	left: 38px;
}

.record_nombre.tipo5 {
	top: 197px;
	position: absolute;
	font-size: 34px;
	left: 0;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 500;
	width: 100%;
	text-align: center;
	text-transform: capitalize;
}

.record_id.tipo5 {
	top: 255px;
	position: absolute;
	width: 100%;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 31px;
	font-weight: 500;
}

.record_id.tipo5::before {
	content: 'C.C.';
}

.record_titulo.tipo5 {
	top: 346px;
	position: absolute;
	font-size: 30px;
	width: 100%;
	text-align: center;
	padding: 0px 136px;
	line-height: 1;
	font-weight: 500;
	text-transform: uppercase;
}

.record_descripcion.tipo5 {
	top: 486px;
	position: absolute;
	text-align: center;
	width: 100%;
	padding: 0 219px;
	font-size: 17px;
	line-height: 1.5;
}

.hiddenRow {
	padding: 0 !important;
}

.record_nombre {
	font-family: 'Dancing Script', cursive;
	font-weight: 400;
}

.record_nombre.mas {
	color: #009122;
}

.record_nombre.fem {
	color: #FF535F;
}

.clock {
	width: 360px;
	height: 120px;
	font-family: 'Orbitron', sans-serif !important;
}

.date {
	width: 100%;
	text-align: center;
	font-size: 2rem;
}

.date,
.hr,
.min,
.sec,
.colon {
	color: var(--text);
	text-shadow: 0 0 10px var(--shadow-1), 0 0 15px var(--shadow-2), 0 0 20px var(--shadow-2);
}

.hr,
.min,
.sec,
.colon {
	width: 20%;
	float: left;
	text-align: center;
	font-size: 3.5rem;
	color: #ff3633 !important;
}

.dnone {
	display: none !important;
}

.declara {
	text-align: left;
	font-weight: 400;
	line-height: 1.3;
	font-size: 15px;
}

.login-page,
.register-page {
	justify-content: inherit !important;
	background: none !important;
}


.estado {
	text-align: center;
}

.estado span {
	font-size: 1.2em;
}

.estado h3 {
	font-size: 1.2em;
	font-weight: 700;
}

::placeholder {
	font-size: 1.4em;
	font-weight: bold;
}

.descripcion {
	text-align: left !important;
	line-height: 1;
}

.descripcion p,
.descripcion ul li {
	padding: 0;
	margin: 0;
}

.descripcion ul {
	margin: 0;
	padding: 6px 0 0 13px;
	line-height: 1.2;
}

.login-box,
.register-box {
	width: 380px !important;
}

.flotante {
	position: fixed;
	bottom: 20px;
	right: 40px;
}


.floating-btn {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100;
	/* background-color: #dadada; */
	color: #0e2a8b;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	cursor: pointer;
	transition: all 0.3s ease;

	border-radius: 15px;
	background: linear-gradient(145deg, #e6e6e6, #ffffff);
	box-shadow: 9px 9px 24px #c7c7c7,
		-9px -9px 24px #ffffff;
}


.emoji,
.tooltip-total {
	position: absolute;
}

.emoji {
	display: block;
}



.tooltip-total {
	display: none;
	width: fit-content;
	font-size: 12px;
	text-align: center;
	line-height: 0.8;
}

.floating-btn:hover .emoji {
	display: none;
}

.floating-btn:hover .tooltip-total {
	display: block;
}

#asistencia_processing {
	z-index: 200 !important;
	top: 90px;
}

/* Optimización de tablas con muchos registros */
table,
tr {
	content-visibility: auto;
	contain: layout paint;
}



/* Lazy loading de imágenes para mejorar el rendimiento */
img {
	content-visibility: auto;
	/* Evita la carga inicial si la imagen está fuera del viewport */

}


.camera-preview {
	position: relative;
	width: 100%;
	/* height: 460px; */
	padding-top: 56.25%;
	background: #fff;
	/* display: block; */
}


.camera-stream {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}


#fotoPerfil {
	cursor: zoom-in;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Estado “agrandado” */
#fotoPerfil.enlarged {
	position: fixed;
	top: 1%;
	left: 1%;
	/* Ajusta el factor de escala a tu gusto */
	/* transform: translate(-50%, -50%) scale(2.5); */
	z-index: 9999;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	cursor: zoom-out;
	/* Opcional: para que no desborde la pantalla */
	width: 99%;
	height: auto;
	max-height: 100% !important;
}



/* Fondo alternado por bloque */
.bloque-fondo-1 {
	background-color: #f8f9fa;
	/* Gris Bootstrap */
}

.bloque-fondo-2 {
	background-color: #e9ecef;
	/* Un poco más oscuro */
}

/* Borde lateral para separación de bloque */
.bloque-borde {
	border-left: 2px solid #dee2e6;
	padding-left: 8px;
}

/* Opcional: que el borde no se vea en la primera columna de bloque */
.bloque-borde:first-child {
	border-left: none;
}





/* Fix ios scrolling issue with Bootstrap modal */

/* Solo el modal documentModal */
#documentModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 100vh; /* base para Safari */
}
#documentModal .modal-header,
#documentModal .modal-footer {
  flex: 0 0 auto;
}
#documentModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum */
}

/* Lock del fondo que ya usas */
html.documentModal-lock,
body.documentModal-lock {
  overflow: hidden;
  height: 100%;
}
body.documentModal-lock {
  position: fixed;
  width: 100%;
}