:root {
	--em-cyan: #5acae4;
	--em-black: #000000;
	--em-white: #fefeff;
	--em-gold: #ffd15a;
	--em-gray: #6b7280;
}
.em-client-area,
.em-client-area *,
.em-client-area *::before,
.em-client-area *::after {
	box-sizing: border-box;
}
.em-client-area {
	--em-cyan: #5acae4;
	--em-black: #000000;
	--em-white: #fefeff;
	--em-gold: #ffd15a;
	--em-gray: #6b7280;

	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--em-black);
	overflow-x: hidden;
}
.em-client-area h1, .em-client-area h2, .em-client-area h3 { font-weight: 700; letter-spacing: -0.01em; }
.em-brand-header {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(90, 202, 228, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 12px 16px;
	border-radius: 12px;
	margin-bottom: 20px;
}
.em-brand-header img { height: 38px; width: 38px; object-fit: contain; }
.em-brand-header span { font-weight: 800; font-size: 16px; color: var(--em-black); letter-spacing: 0.02em; }
.em-logout-link {
	margin-left: auto;
	color: rgba(0,0,0,0.6);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}
.em-logout-link:hover { color: var(--em-black); }

.em-quick-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	padding: 24px 16px 40px;
	margin-top: 10px;
	border-top: 1px solid #eee;
}
.em-quick-nav a { font-size: 13px; font-weight: 600; color: var(--em-black); text-decoration: none; opacity: 0.75; }
.em-quick-nav a:hover { opacity: 1; text-decoration: underline; }
.em-login-notice { text-align: center; padding: 40px 20px; font-family: 'Poppins', sans-serif; }

.em-login-box {
	max-width: 380px;
	margin: 40px auto 60px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 16px;
	padding: 34px 30px;
	text-align: center;
}
.em-login-box h2 { margin: 0 0 6px; }
.em-login-sub { color: #666; font-size: 14px; margin-bottom: 22px; }
.em-login-box .em-form-row { text-align: left; margin-bottom: 16px; }
.em-login-box input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid #e2e2e6;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
}
.em-login-box input:focus { outline: none; border-color: var(--em-cyan); }
.em-login-box .em-btn { width: 100%; margin-top: 4px; }
.em-login-msg { color: #b32d2e; font-size: 13px; margin-top: 12px; min-height: 16px; }
.em-login-forgot { display: inline-block; margin-top: 16px; font-size: 13px; color: #666; text-decoration: none; }
.em-login-forgot:hover { color: var(--em-black); text-decoration: underline; }
.em-btn {
	display: inline-block;
	background: var(--em-gold);
	color: var(--em-black) !important;
	padding: 10px 20px;
	border-radius: 24px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
}
.em-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #eee;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.em-tab-btn {
	background: none;
	border: none;
	padding: 10px 18px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: #666;
	border-bottom: 3px solid transparent;
}
.em-tab-btn.active { color: var(--em-black); border-bottom-color: var(--em-cyan); }
.em-tab-panel { display: none; }
.em-tab-panel.active { display: block; }

.em-routine-day { margin-bottom: 24px; }
.em-table { width: 100%; border-collapse: collapse; }
.em-table th, .em-table td { border: 1px solid #eee; padding: 8px 10px; text-align: left; font-size: 14px; }
.em-table th { background: #f7f7f7; }

.em-log-toggle-btn {
	background: none;
	border: 1.5px solid var(--em-black);
	color: var(--em-black);
	border-radius: 14px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.em-log-panel { background: #f7fbfc; border: 1px solid #dceef3; border-radius: 6px; padding: 12px; }
.em-log-panel-header { margin-bottom: 10px; font-size: 13px; }
.em-log-panel-header input[type=date] { padding: 4px 6px; border: 1px solid #ddd; border-radius: 5px; }
.em-sets-container { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.em-set-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid #e2eef2; border-radius: 5px; padding: 6px 8px; }
.em-set-label { font-weight: 700; font-size: 13px; width: 60px; color: var(--em-black); }
.em-set-row input {
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 13px;
}
.em-set-reps, .em-set-weight { width: 90px; }
.em-set-notes { flex: 1; min-width: 140px; }
.em-save-set-btn {
	background: var(--em-gold);
	color: var(--em-black);
	border: none;
	border-radius: 14px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.em-set-status { font-size: 12px; min-width: 80px; }
.em-add-set-btn {
	background: none;
	border: 1.5px dashed var(--em-black);
	color: var(--em-black);
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.em-btn-small { padding: 6px 14px; font-size: 13px; }
.em-log-history-title { font-weight: 700; font-size: 13px; margin: 10px 0 4px; color: var(--em-black); }
.em-log-history-day { margin-bottom: 6px; }
.em-log-history ul { margin: 0; padding-left: 18px; font-size: 13px; }
.em-log-history li { margin-bottom: 2px; }

.em-form-row { margin-bottom: 14px; }
.em-form-row label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.em-form-row input, .em-form-row select {
	padding: 8px 10px;
	border: 1.5px solid #e2e2e6;
	border-radius: 8px;
	width: 100%;
	max-width: 320px;
	font-family: inherit;
}
.em-form-row input:focus, .em-form-row select:focus { outline: none; border-color: var(--em-cyan); }
.em-unit-label { margin-left: 8px; color: #666; font-size: 13px; }
.em-form-msg { margin-left: 10px; font-style: italic; font-size: 13px; }

.em-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; margin-top: 16px; }
.em-photo-group-title { margin-top: 20px; margin-bottom: 4px; color: var(--em-black); }
.em-photo-item { border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.em-photo-item img { width: 100%; height: 150px; object-fit: cover; display: block; }
.em-photo-meta { padding: 6px 8px; font-size: 12px; color: #666; }

.em-badge {
	background: #d63638;
	color: #fff;
	border-radius: 10px;
	padding: 1px 7px;
	font-size: 11px;
	margin-left: 4px;
}

.em-tag { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.em-tag-ok { background: #dff6ec; color: #0f7a4a; }
.em-tag-off { background: #f0f0f2; color: #6b7280; }

.em-pending-payments { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.em-pending-payment-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1.5px solid var(--em-cyan);
	border-radius: 10px;
	padding: 14px 16px;
	flex-wrap: wrap;
}
.em-pending-amount { color: #666; font-size: 13px; margin-top: 2px; }

.em-blocked-notice {
	max-width: 480px;
	margin: 60px auto;
	text-align: center;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 14px;
	padding: 32px 28px;
}
.em-blocked-notice h2 { margin-top: 0; }
.em-blocked-notice .em-pending-payments { text-align: left; }
.em-blocked-status { font-size: 13px; margin-top: 14px; }

.em-video-list { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.em-video-item { border: 1px solid #eee; border-radius: 10px; padding: 16px; background: #fff; }
.em-video-item-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.em-video-date { color: #888; font-size: 12px; margin-left: auto; }
.em-video-correction-label { font-weight: 600; font-size: 13px; margin: 6px 0; }
.em-video-player { width: 100%; max-width: 480px; border-radius: 8px; display: block; background: #000; }
.em-video-notes { font-size: 13px; color: #555; margin-top: 8px; }

.em-push-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff6dd;
	border: 1px solid #ffe4a3;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	font-size: 13px;
	flex-wrap: wrap;
}
.em-btn-small { padding: 6px 14px; font-size: 13px; }
.em-push-dismiss {
	margin-left: auto;
	background: none;
	border: none;
	color: #888;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
}
.em-push-toast {
	position: fixed;
	top: 16px;
	right: 16px;
	background: var(--em-black);
	color: #fff;
	padding: 12px 16px;
	border-radius: 10px;
	max-width: 320px;
	z-index: 100001;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	font-size: 14px;
}
.em-push-toast strong { display: block; margin-bottom: 3px; color: var(--em-gold); }

.em-video-btn {
	display: inline-block;
	margin-left: 8px;
	background: #f4fafc;
	border: 1.5px solid var(--em-black);
	color: var(--em-black);
	border-radius: 12px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.em-video-btn:hover { background: var(--em-black); color: #fff; }
.em-video-btn-sub { border-color: var(--em-cyan); color: #227; }
.em-video-btn-sub:hover { background: var(--em-cyan); color: var(--em-black); }

.em-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.9);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 16px;
}
.em-modal-close {
	position: absolute;
	top: 16px;
	right: 20px;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	line-height: 1;
}
.em-video-modal-body { width: 100%; max-width: 900px; }
.em-video-frame-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* proporción 16:9 */
}
.em-video-frame-wrap iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border-radius: 6px;
}

.em-chat-locked {
	max-width: 420px;
	margin: 40px auto;
	text-align: center;
	background: #fafbfc;
	border: 1px solid #eee;
	border-radius: 14px;
	padding: 30px 26px;
}
.em-chat-locked-icon { font-size: 32px; display: block; margin-bottom: 10px; }
.em-chat-locked h3 { margin: 0 0 10px; }
.em-chat-locked p { font-size: 14px; color: #555; margin-bottom: 20px; }

.em-chat-window {
	display: flex;
	flex-direction: column;
	height: 480px;
	min-height: 0;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
}
.em-chat-messages { flex: 1; overflow-y: auto; padding: 16px; background: #fafafa; min-height: 0; }
.em-chat-bubble { max-width: 75%; padding: 8px 12px; border-radius: 14px; margin-bottom: 8px; font-size: 14px; clear: both; }
.em-chat-bubble.mine { background: var(--em-black); color: #fff; float: right; border-bottom-right-radius: 4px; }
.em-chat-bubble.theirs { background: #fff; border: 1px solid #ddd; float: left; border-bottom-left-radius: 4px; }
.em-chat-time { display: block; font-size: 10px; opacity: 0.7; margin-top: 3px; }
#em-chat-form { display: flex; width: 100%; border-top: 1px solid #eee; }
#em-chat-input { flex: 1 1 auto; min-width: 0; border: none; padding: 12px; outline: none; font-family: inherit; }
#em-chat-form .em-btn { flex: 0 0 auto; border-radius: 0; }

/* ============================================================
   OPTIMIZACIÓN MÓVIL
   ============================================================ */
@media (max-width: 782px) {
	.em-client-area { padding: 0 4px; }

	/* Pestañas: scroll horizontal en vez de apretujarse o saltar de línea */
	.em-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}
	.em-tab-btn {
		flex: 0 0 auto;
		padding: 10px 14px;
		font-size: 14px;
	}

	/* Tabla de rutina -> tarjetas apiladas, mucho más fácil de leer con el pulgar */
	.em-table thead { display: none; }
	.em-table, .em-table tbody, .em-table tr, .em-table td { display: block; width: 100%; }
	.em-table tr.em-exercise-row {
		border: 1px solid #eee;
		border-radius: 8px;
		margin-bottom: 10px;
		background: #fff;
		overflow: hidden;
	}
	.em-table tr.em-exercise-row td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px 10px;
		padding: 8px 12px;
		border: none;
		border-bottom: 1px solid #f3f3f3;
		text-align: right;
		font-size: 14px;
		word-break: break-word;
	}
	.em-table tr.em-exercise-row td:last-child { border-bottom: none; }
	.em-table tr.em-exercise-row td::before {
		content: attr(data-label);
		font-weight: 600;
		color: #666;
		text-align: left;
		flex: 0 0 auto;
	}
	.em-video-btn { font-size: 11px; padding: 3px 8px; margin-left: 0; }
	/* La fila del panel de registro no es una tarjeta de datos, así que no lleva etiquetas */
	.em-table tr.em-log-row td {
		display: block;
		text-align: left;
		padding: 10px 4px;
	}
	.em-table tr.em-log-row td::before { content: none; }

	/* Formularios más cómodos al tacto, solo dentro del área de cliente */
	.em-form-row input, .em-form-row select { max-width: 100%; }
	.em-client-area .em-btn,
	.em-client-area button,
	.em-client-area input,
	.em-client-area select { min-height: 40px; }

	/* Series individuales: apiladas en vez de en fila */
	.em-set-row { flex-direction: column; align-items: stretch; }
	.em-set-row input { width: 100% !important; }
	.em-set-label { width: auto; margin-bottom: 2px; }

	/* Chat: aprovechar mejor el alto de pantalla */
	.em-chat-window { height: 65vh; min-height: 380px; }

	/* Fotos: dos columnas en vez de forzar demasiadas miniaturas pequeñas */
	.em-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Guía de nutrición (vista cliente) ---------- */
.em-nutrition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.em-nutrition-card { background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; }
.em-nutrition-card-img { width: 100%; max-height: 220px; object-fit: contain; display: block; background: #f7f8fa; padding: 12px 0; }
.em-nutrition-card-body { padding: 16px; }
.em-nutrition-card-icon { font-size: 26px; display: block; margin-bottom: 8px; }
.em-nutrition-card h3 { margin: 0 0 8px; font-size: 16px; }
.em-nutrition-card p { font-size: 14px; color: #555; margin: 0; white-space: pre-line; }

/* ---------- Auto-login tras pagar ---------- */
.em-autologin-spinner {
	width: 34px; height: 34px; margin: 10px auto 0;
	border: 3px solid #eee; border-top-color: var(--em-cyan);
	border-radius: 50%;
	animation: em-spin 0.8s linear infinite;
}
@keyframes em-spin { to { transform: rotate(360deg); } }