body {
	font-family: 'Poppins', sans-serif;
	background-color: var(--bg);
	color: var(--alexia-deep);
	line-height: 1.5;
	-webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════
	VISTAS — Animación de transición
══════════════════════════════════════ */

.view {
	/* display: none; */
	animation: fadeSlide .5s ease-out;
}

.view.active {
	display: block;
}

@keyframes fadeSlide {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ══════════════════════════════════════
	VISTA: LANDING (indexx.php)
══════════════════════════════════════ */
.landing-body {
	background-color: var(--alexia-deep);
	min-height: calc(100vh - 125px);
	/* min-height: 100vh; */
	display: flex;
	flex-direction: column;
}

.main-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 28px 20px 20px;
	text-align: center;
}

.brand-identity {
	margin-bottom: 32px;
}

.brand-logo {
	width: 130px;
	height: auto;
	margin-bottom: 14px;
}

.welcome-text h1 {
	color: var(--white);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1.3;
}

.welcome-text p {
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
	max-width: 280px;
	margin: 0 auto;
}

/* Tarjetas de opción */
.options-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	width: 100%;
	max-width: 360px;
}

.option-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	padding: 24px 16px 20px;
	cursor: pointer;
	transition: all 0.25s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	backdrop-filter: blur(8px);
}

.option-card:active {
	transform: scale(0.96);
	background: rgba(255, 255, 255, 0.1);
}

.option-icon {
	width: 52px;
	height: 52px;
	background: rgba(246, 213, 0, 0.12);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--alexia-yellow);
}

.option-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
	text-align: center;
	line-height: 1.3;
}

.option-desc {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	line-height: 1.4;
}

.footer-minimal {
	padding: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.3);
	font-size: 11px;
	background-color: var(--alexia-deep);
}

.footer-minimal strong {
	color: rgba(255, 255, 255, 0.5);
}

/* ══════════════════════════════════════
	VISTA: EMPRESA / BUSCADOR (comteco.php)
══════════════════════════════════════ */


/* ══════════════════════════════════════
	VISTA: EMPLEADO (empleado.php)
══════════════════════════════════════ */
.main-content {
	padding: 20px;
	max-width: 500px;
	margin: 0 auto;
}

.emp-card {
	background: var(--white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	margin-bottom: 20px;
}

.emp-card-headerCOMTECO {
	background: var(--red);
	color: var(--white);
	padding: 24px 20px;
	text-align: center;
	border-bottom: 4px solid var(--gray);
}

.emp-card-headerALEXIACOMPANY {
	background: #272335 !important;
	color: #ffffff !important;
	border-bottom: 4px solid #f6d500 !important;
	padding: 24px 20px;
	text-align: center;
}

.emp-card-headerELFEC {
	background: #1a448c !important;
	color: #ffffff !important;
	border-bottom: 4px solid #000 !important;
	padding: 24px 20px;
	text-align: center;
}

.emp-card-headerENTEL {
	background: #009adc !important;
	color: #ffffff !important;
	border-bottom: 4px solid #000 !important;
	padding: 24px 20px;
	text-align: center;
}

.emp-avatar {
	width: 200px;
	height: 200px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	margin: 0 auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--white);
	overflow: hidden;
}

.emp-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.status-badge {
	color: var(--red-dark);
	font-weight: 700;
	padding: 4px 0;
	border-radius: 10px;
	font-size: 12px;
}

.info-group {
	padding: 20px;
	border-bottom: 1px solid #eee;
}

.info-label {
	font-size: 11px;
	color: var(--gray);
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 4px;
}

.info-value {
	font-weight: 600;
	color: var(--red-dark);
}

.quick-verify-btnCOMTECO {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px;
	color: var(--red);
	border: 1px dashed var(--red);
	border-radius: 16px;
	text-decoration: none;
	font-weight: 700;
	margin-bottom: 15px;
	transition: all 0.2s;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
}

.quick-verify-btnCOMTECO:active {
	transform: scale(0.98);
}

.quick-verify-btnALEXIACOMPANY {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px;
	color: #272335;
	border: 1px dashed #272335;
	border-radius: 16px;
	text-decoration: none;
	font-weight: 700;
	margin-bottom: 15px;
	transition: all 0.2s;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
}

.quick-verify-btnALEXIACOMPANY:active {
	transform: scale(0.98);
}

.quick-verify-btnELFEC {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px;
	color: #1a448c;
	border: 1px dashed #272335;
	border-radius: 16px;
	text-decoration: none;
	font-weight: 700;
	margin-bottom: 15px;
	transition: all 0.2s;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
}

.quick-verify-btnENTEL {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px;
	color: #009adc;
	border: 1px dashed #272335;
	border-radius: 16px;
	text-decoration: none;
	font-weight: 700;
	margin-bottom: 15px;
	transition: all 0.2s;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
}

.quick-verify-btnELFEC:active {
	transform: scale(0.98);
}

.quick-verify-btnENTEL:active {
	transform: scale(0.98);
}

.btn-open-modal {
	/*background:var(--alexia-deep); color:var(--alexia-yellow);*/
	background: var(--alexia-yellow);
	color: var(--NBlack);
	width: 100%;
	padding: 18px;
	border-radius: var(--radius-md);
	font-weight: 700;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(1, 0, 0, 0.2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 18px;
	line-height: 1;
	font-family: inherit;
}

.btn-open-modal svg {
	flex-shrink: 0;
}

/* ── Modal ── */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(39, 35, 53, 0.85);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	backdrop-filter: blur(4px);

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.modal-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.modal-content {
	background: var(--white);
	width: 100%;
	border-radius: 24px 24px 0 0;
	padding: 32px 24px 40px;

	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
	transform: translateY(0);
}

@keyframes modalUp {
	from {
		transform: translateY(100%)
	}

	to {
		transform: translateY(0)
	}
}

.modal-header {
	text-align: center;
	margin-bottom: 24px;
}

.modal-header h3 {
	font-size: 20px;
	font-weight: 800;
	color: var(--alexia-deep);
}

.stars-row {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}

.star-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #ddd;
}

.star-icon {
	width: 44px;
	height: 44px;
	transition: all 0.2s;
	fill: #eee;
}

/*.star-icon.active { fill:var(--alexia-yellow); }*/

/* Colores por puntaje */
.star-icon.active.color-red {
	fill: #e53935;
}

/* 1-2 estrellas: Muy mala / Mala */
.star-icon.active.color-yellow {
	fill: #FFC107;
}

/* 3 estrellas:   Regular */
.star-icon.active.color-green {
	fill: #43A047;
}

/* 4-5 estrellas: Buena / Excelente */

/* Label también cambia de color */
#rating-label.color-red {
	color: #e53935;
}

#rating-label.color-yellow {
	color: #e6a800;
}

#rating-label.color-green {
	color: #43A047;
}

#rating-label {
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	height: 22px;
	margin-bottom: 24px;
	color: var(--alexia-deep);
}

.btn-confirm-send {
	background: var(--red);
	color: var(--white);
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: var(--radius-md);
	font-weight: 700;
	font-size: 16px;
	opacity: 0.5;
	pointer-events: none;
	font-family: inherit;
	cursor: pointer;
}

.btn-confirm-send.ready {
	opacity: 1;
	pointer-events: auto;
}

/* ══════════════════════════════════════
	VISTA: CONFIRMACION (confirmacion.php)
══════════════════════════════════════ */
.confirm-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 20px;
	text-align: center;
}

.check-circle {
	width: 80px;
	height: 80px;
	background: var(--gray);
	color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	box-shadow: 0 4px 20px rgba(195, 198, 199, 0.4);
}

.rating-summary {
	background: var(--white);
	margin: 0 20px 24px;
	border-radius: var(--radius-md);
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rating-stars {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 8px;
}

.star-mini {
	width: 20px;
	height: 20px;
	fill: var(--alexia-yellow);
}

.rating-text-big {
	font-size: 24px;
	font-weight: 800;
	color: var(--alexia-deep);
}

.thanks-block {
	padding: 0 20px;
	text-align: center;
	color: var(--gray);
	font-size: 14px;
}

.btn-primary {
	background: var(--red);
	color: var(--white);
	display: block;
	margin: 32px 20px;
	padding: 16px;
	border-radius: var(--radius-md);
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	font-family: inherit;
	font-size: 16px;
	cursor: pointer;
	border: none;
	width: calc(100% - 40px);
}

/* ══════════════════════════════════════
	TEMA: ALEXIA COMPANY
	Activo cuando body tiene clase .tema-ALEXIACOMPANY
══════════════════════════════════════ */

/* Header con color Alexia */
body.tema-ALEXIACOMPANY .app-header {
	background: #272335 !important;
}

/* Título H1 del buscador */
body.tema-ALEXIACOMPANY #view-buscador .hero-section h1 {
	color: #272335 !important;
}

/* Sub-texto del buscador */
body.tema-ALEXIACOMPANY #view-buscador .hero-section p {
	color: #272335 !important;
	font-weight: 700 !important;
}

/* Botón Continuar — amarillo Alexia */
body.tema-ALEXIACOMPANY .btn-submit {
	background: #f6d500 !important;
	color: #272335 !important;
	box-shadow: 0 4px 12px rgba(246, 213, 0, 0.35) !important;
}

body.tema-ALEXIACOMPANY .btn-submit:active {
	background: #e0c000 !important;
}

/* Input foco — borde Alexia */
body.tema-ALEXIACOMPANY .input-code:focus {
	border-color: #272335 !important;
	box-shadow: 0 0 0 4px rgba(39, 35, 53, 0.08) !important;
}

/* Select foco */
body.tema-ALEXIACOMPANY .custom-select:focus {
	border-color: #272335 !important;
}

/* Tarjeta empleado — header con color Alexia deep */
/* body.tema-ALEXIACOMPANY */
/* .emp-card-header {
	background: #272335 !important;
	color: #ffffff !important;
	border-bottom: 4px solid #f6d500 !important;
} */

/* Nombre y área del empleado en tarjeta */
/* body.tema-ALEXIACOMPANY .emp-card-header h2 {
	color: #ffffff !important;
} */

/* body.tema-ALEXIACOMPANY .emp-card-header p {
	color: rgba(255, 255, 255, 0.75) !important;
} */

/* Info values (Nro. Item y Estado) */
body.tema-ALEXIACOMPANY .info-value {
	color: #272335 !important;
	font-weight: 700 !important;
}

body.tema-ALEXIACOMPANY .status-badge {
	color: #272335 !important;
	font-weight: 700 !important;
}

/* Botón "Verificar otro trabajador" — borde y texto Alexia */
/* body.tema-ALEXIACOMPANY .quick-verify-btn {
	color: #272335 !important;
	border-color: #272335 !important;
} */

/* Botón QR borde Alexia */
body.tema-ALEXIACOMPANY .qr-frame::before,
body.tema-ALEXIACOMPANY .qr-frame::after,
body.tema-ALEXIACOMPANY .qr-frame span::before,
body.tema-ALEXIACOMPANY .qr-frame span::after {
	border-color: #f6d500 !important;
}

body.tema-ALEXIACOMPANY .scan-line {
	background: #f6d500 !important;
	box-shadow: 0 0 15px #f6d500 !important;
}

/* Modal estrellas — label color Alexia */
body.tema-ALEXIACOMPANY .modal-header h3 {
	color: #272335 !important;
}

body.tema-ALEXIACOMPANY .btn-confirm-send {
	background: #272335 !important;
}

body.tema-ALEXIACOMPANY .btn-confirm-send.ready {
	background: #272335 !important;
	opacity: 1 !important;
}

/* Confirmación — título */
body.tema-ALEXIACOMPANY .confirm-hero h2 {
	color: #272335 !important;
}

body.tema-ALEXIACOMPANY .rating-text-big {
	color: #272335 !important;
}

body.tema-ALEXIACOMPANY .star-mini {
	fill: #f6d500 !important;
}

body.tema-ALEXIACOMPANY .btn-primary {
	background: #272335 !important;
	color: #f6d500 !important;
}

body.tema-ALEXIACOMPANY .btn-primary:active {
	background: #1a1726 !important;
}

/* Etiqueta EMPRESA en label */
body.tema-ALEXIACOMPANY .empresa-label {
	color: #272335 !important;
}

/* Volver a buscar */
body.tema-ALEXIACOMPANY .btn-back-light {
	color: #272335 !important;
}

/* ══════════════════════════════════════
	BACK BUTTON
══════════════════════════════════════ */
.btn-back {
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 4px;
	transition: color 0.2s;
}

.btn-back:hover {
	color: var(--white);
}

.btn-back-light {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--gray);
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 14px 20px 0;
	transition: color 0.2s;
}

.legal-container {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
}

.legal-title {
  background-color: #FFD100;
  color: #2a2c3d;
  text-align: left;
  padding-left: 10px;
}

.legal-section {
  margin-bottom: 30px;
  text-align: left;
	color:#fff;
}

.text-white {
	color: #fff;;
}

p {
	padding-top: 10px;
	padding-bottom: 5px;
	/* text-indent: 20px; */
}

/* comteco */
body.tema-COMTECO .btn-submit {
	background: var(--red) !important;
	color: var(--white) !important;
	box-shadow: 0 4px 12px rgba(246, 213, 0, 0.35) !important;
}

body.tema-COMTECO .btn-submit:active {
	background: var(--red-dark) !important;
}

body.tema-ELFEC .btn-submit {
	background: #1a448c !important;
	color: var(--white) !important;
	box-shadow: 0 4px 12px rgba(246, 213, 0, 0.35) !important;
}

body.tema-ELFEC .btn-submit:active {
	background: #143672 !important;
}

body.tema-ENTEL .btn-submit {
	background: #009adc !important;
	color: var(--white) !important;
	box-shadow: 0 4px 12px rgba(246, 213, 0, 0.35) !important;
}

body.tema-ENTEL .btn-submit:active {
	background: #02638c !important;
}

.qr-modal {
	display: none;
	position: fixed;
	z-index: 9999;
	inset: 0;
	background: rgba(0,0,0,0.7);
	justify-content: center;
	align-items: center;
}

.qr-modal.active {
	display: flex;
}

.qr-modal-content {
	background: #000;
	padding: 15px;
	border-radius: 10px;
	position: relative;
}

.qr-close {
	position: absolute;
	top: -10px;
	right: -10px;
	background: red;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.qr-reader-wrapper {
	position: relative;
	width: 300px;
	/* height: 300px; */
}

#reader {
	width: 100%;
	height: 100%;
}

.qr-loading {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.8);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	z-index: 10;
}

.alert-danger {
	background-color: var(--red-dark);
	text-align: center;
	color: #fff;
}

.p-1 {
	padding: 1rem;
}

/* loaging */
#loadingScreen{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;

	display:flex;
	justify-content:center;
	align-items:center;

	background:rgba(0,0,0,0.65);
	z-index:99999;
}

.scene{
	width:260px;
	height:260px;
	perspective:800px;
}

.cube{
	width:100%;
	height:100%;
	position:relative;
	transform-style:preserve-3d;
	animation:spin 2s linear infinite;
}

.face{
	position:absolute;
	width:260px;
	height:260px;

	display:flex;
	justify-content:center;
	align-items:center;

	background:#ffffff;
	border-radius:12px;

	backface-visibility:hidden;
	box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

.front{
	transform:rotateY(0deg);
}

.back{
	transform:rotateY(180deg);
}

.face img{
	width:160px;
}

@keyframes spin{
	0%{
		transform:rotateY(0deg);
	}

	100%{
		transform:rotateY(360deg);
	}
}

.loader-container{
	display:flex;
	flex-direction:column;
	align-items:center;
}

.loading-text{
	margin-top:20px;
	color:#ffffff;
	font-size:18px;
	font-weight:600;
	letter-spacing:2px;
	font-family:Arial, Helvetica, sans-serif;
}
/* end loading */

/* refresh */
#refreshIndicator {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	width: 40px;
	height: 40px;
	background-color: #007bff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 24px;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 100 !important;
}

.spinning-icon {
	animation: girar 1s linear infinite;
}

@keyframes girar {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}

.icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	margin: 0;
}

.icon svg {
	width: 40px;
	height: 40px;
}
/* end refresh */

.legal-section > ul {
	margin-left: 30px;
}

.dropdown-contact {
	position: relative;
	display: inline-block;
}

.dropdown-contact > a {
	color: var(--gray);
	text-decoration: none;
	cursor: pointer;
}

.dropdown-content {
	display: none;
	position: absolute;
	bottom: 100%;
	/* left: 0; */
	right: 0;

	background: #f6f6f6;
	min-width: 260px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	border-radius: 8px;
	padding: 8px 0;
	z-index: 999;
	margin-bottom: 8px;
}

.dropdown-content a {
	display: block;
	padding: 10px 15px;
	color: #333;
	text-decoration: none;
}

.dropdown-content a:hover {
	background: #eee;
}

.dropdown-contact.open .dropdown-content {
	display: block;
}