/* Retos Colchón Natural — estilos de marca (verde musgo / tierra / crema) */

/* Este CSS solo se carga en la página que tiene el shortcode, así que estas
   reglas "globales" (cabecera/pie del tema) no afectan al resto del sitio.
   Hacen que el plugin ocupe toda la pantalla, escapando del ancho/margen
   del contenedor del tema. La barra de administración de WordPress
   (#wpadminbar) NO se toca, para que sigas teniendo acceso a ella. */
body.cn-retos-fullscreen {
	margin: 0 !important;
	overflow-x: hidden;
}

body.cn-retos-fullscreen .site-header,
body.cn-retos-fullscreen header.site-header,
body.cn-retos-fullscreen #masthead,
body.cn-retos-fullscreen .site-footer,
body.cn-retos-fullscreen footer.site-footer,
body.cn-retos-fullscreen #colophon,
body.cn-retos-fullscreen .entry-hero,
body.cn-retos-fullscreen .page-hero-section,
body.cn-retos-fullscreen .entry-title,
body.cn-retos-fullscreen .page-title {
	display: none !important;
}

body.cn-retos-fullscreen #content,
body.cn-retos-fullscreen .site-content,
body.cn-retos-fullscreen .content-area,
body.cn-retos-fullscreen main.site-main,
body.cn-retos-fullscreen #primary,
body.cn-retos-fullscreen .entry-content,
body.cn-retos-fullscreen .entry-content-wrap,
body.cn-retos-fullscreen .single-content,
body.cn-retos-fullscreen article.entry,
body.cn-retos-fullscreen .content-bg,
body.cn-retos-fullscreen .content-wrap {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
}

#cn-retos-app {
	--cn-verde: #4a6741;
	--cn-verde-oscuro: #33472e;
	--cn-verde-claro: #e7efe1;
	--cn-tierra: #a9744f;
	--cn-tierra-oscuro: #7c5334;
	--cn-crema: #f7f2e9;
	--cn-crema-oscuro: #efe6d4;
	--cn-texto: #2f2a22;
	--cn-texto-suave: #6b6354;
	--cn-blanco: #ffffff;
	--cn-error: #b3452c;
	--cn-radio: 14px;
	--cn-sombra: 0 4px 16px rgba(51, 40, 20, 0.08);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--cn-texto);
	background: var(--cn-crema);
	padding: 0 !important;
	box-sizing: border-box;
	/* Fallback aproximado por si JS no llega a cargar; app.js corrige esto
	   con la posición real medida en píxeles (fitFullscreen()). */
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#cn-retos-app * {
	box-sizing: border-box;
}

#cn-retos-app a {
	color: var(--cn-verde-oscuro);
}

.cn-retos-loading {
	padding: 60px 20px;
	text-align: center;
	color: var(--cn-texto-suave);
}

/* Header / navegación */
.cn-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--cn-verde);
	color: var(--cn-blanco);
	padding: 18px 32px;
	flex-shrink: 0;
}

.cn-header__brand {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--cn-blanco);
}

.cn-header__brand span {
	color: var(--cn-crema-oscuro);
	font-weight: 400;
}

.cn-nav {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.cn-nav button,
#cn-retos-app .cn-nav a {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--cn-blanco);
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.9rem;
	text-decoration: none;
	display: inline-block;
	transition: background 0.15s ease;
}

.cn-nav button:hover,
.cn-nav button.is-active,
#cn-retos-app .cn-nav a:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--cn-blanco);
}

.cn-nav button.cn-nav__admin {
	border-color: var(--cn-tierra);
	background: var(--cn-tierra);
}

.cn-body {
	flex: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 32px 48px;
}

/* Botones */
.cn-btn {
	display: inline-block;
	background: var(--cn-verde);
	color: var(--cn-blanco);
	border: none;
	padding: 11px 20px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 600;
	transition: transform 0.1s ease, background 0.15s ease;
}

.cn-btn:hover {
	background: var(--cn-verde-oscuro);
}

.cn-btn:active {
	transform: scale(0.98);
}

.cn-btn--secondary {
	background: transparent;
	color: var(--cn-verde-oscuro);
	border: 1px solid var(--cn-verde);
}

.cn-btn--secondary:hover {
	background: var(--cn-verde-claro);
}

.cn-btn--danger {
	background: var(--cn-error);
}

.cn-btn--danger:hover {
	background: #8f331f;
}

.cn-btn--block {
	width: 100%;
	text-align: center;
}

.cn-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cn-btn--upload {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
}

/* Popup para subir evidencia */
.cn-modal-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(47, 42, 34, 0.55);
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 1000;
}

.cn-modal-backdrop.is-open {
	display: flex;
}

.cn-modal {
	position: relative;
	background: var(--cn-blanco);
	border-radius: var(--cn-radio);
	padding: 28px;
	max-width: 460px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 12px 32px rgba(51, 40, 20, 0.25);
}

.cn-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--cn-texto-suave);
}

.cn-modal__close:hover {
	color: var(--cn-texto);
}

/* Selector de foto personalizado */
.cn-file-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 2px dashed var(--cn-crema-oscuro);
	border-radius: 10px;
	padding: 14px;
	cursor: pointer;
	background: var(--cn-crema);
	color: var(--cn-texto-suave);
	font-size: 0.9rem;
	transition: border-color 0.15s ease;
}

.cn-file-trigger:hover {
	border-color: var(--cn-verde);
}

.cn-file-trigger svg {
	flex-shrink: 0;
	color: var(--cn-verde);
}

.cn-file-input-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Campo honeypot anti-bot: oculto para personas, visible para bots que
   rellenan todos los campos de un formulario automáticamente. */
.cn-hp-field {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Formularios */
.cn-form {
	max-width: 420px;
	margin: 0 auto;
	background: var(--cn-blanco);
	padding: 28px;
	border-radius: var(--cn-radio);
	box-shadow: var(--cn-sombra);
}

.cn-form--wide {
	max-width: 640px;
}

.cn-form h2 {
	margin-top: 0;
	color: var(--cn-verde-oscuro);
}

.cn-field {
	margin-bottom: 16px;
}

.cn-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cn-texto-suave);
}

.cn-field input[type="text"],
.cn-field input[type="email"],
.cn-field input[type="password"],
.cn-field input[type="file"],
.cn-field select,
.cn-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cn-crema-oscuro);
	border-radius: 8px;
	font-size: 1rem;
	background: var(--cn-crema);
	color: var(--cn-texto);
}

.cn-field textarea {
	min-height: 100px;
	resize: vertical;
	font-family: inherit;
}

.cn-form__switch {
	text-align: center;
	margin-top: 14px;
	font-size: 0.9rem;
	color: var(--cn-texto-suave);
}

.cn-form__switch a {
	cursor: pointer;
	font-weight: 600;
}

.cn-alert {
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 0.9rem;
}

.cn-alert--error {
	background: #fbe4dd;
	color: var(--cn-error);
}

.cn-alert--success {
	background: var(--cn-verde-claro);
	color: var(--cn-verde-oscuro);
}

/* Hero / bienvenida */
.cn-hero {
	background: linear-gradient(135deg, var(--cn-verde) 0%, var(--cn-verde-oscuro) 100%);
	color: var(--cn-blanco);
	border-radius: var(--cn-radio);
	padding: 32px 24px;
	margin-bottom: 24px;
}

.cn-hero h1 {
	margin: 0 0 8px;
	font-size: 1.6rem;
}

.cn-hero p {
	margin: 0;
	opacity: 0.9;
}

/* Grid de retos */
.cn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.cn-card {
	background: var(--cn-blanco);
	border-radius: var(--cn-radio);
	overflow: hidden;
	box-shadow: var(--cn-sombra);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	display: flex;
	flex-direction: column;
}

.cn-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(51, 40, 20, 0.14);
}

.cn-card__img {
	height: 160px;
	background: var(--cn-crema-oscuro) center/cover no-repeat;
}

.cn-card__body {
	padding: 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.cn-card__body h3 {
	margin: 0 0 8px;
	color: var(--cn-verde-oscuro);
}

.cn-tags {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.cn-tag {
	font-size: 0.75rem;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cn-verde-claro);
	color: var(--cn-verde-oscuro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cn-tag--tierra {
	background: #f1e3d5;
	color: var(--cn-tierra-oscuro);
}

.cn-card__meta {
	margin-top: auto;
	font-size: 0.8rem;
	color: var(--cn-texto-suave);
}

.cn-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--cn-texto-suave);
}

/* Detalle de reto */
.cn-detail__img {
	width: 100%;
	height: 260px;
	background: var(--cn-crema-oscuro) center/cover no-repeat;
	border-radius: var(--cn-radio);
	margin-bottom: 20px;
}

.cn-detail__content {
	background: var(--cn-blanco);
	padding: 20px;
	border-radius: var(--cn-radio);
	box-shadow: var(--cn-sombra);
	margin-bottom: 20px;
	line-height: 1.6;
}

.cn-section-title {
	color: var(--cn-verde-oscuro);
	margin: 28px 0 14px;
}

/* Feed de check-ins */
.cn-feed {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cn-feed-item {
	display: flex;
	gap: 14px;
	background: var(--cn-blanco);
	border-radius: var(--cn-radio);
	padding: 14px;
	box-shadow: var(--cn-sombra);
}

.cn-feed-item__img {
	width: 90px;
	height: 90px;
	border-radius: 10px;
	background: var(--cn-crema-oscuro) center/cover no-repeat;
	flex-shrink: 0;
}

.cn-feed-item__body strong {
	color: var(--cn-verde-oscuro);
}

.cn-feed-item__meta {
	font-size: 0.78rem;
	color: var(--cn-texto-suave);
	margin-top: 4px;
}

/* Perfil */
.cn-profile-card {
	background: var(--cn-blanco);
	border-radius: var(--cn-radio);
	padding: 20px;
	box-shadow: var(--cn-sombra);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.cn-profile-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--cn-verde);
	color: var(--cn-blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	font-weight: 700;
	flex-shrink: 0;
}

/* Admin */
.cn-admin-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.cn-admin-row {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--cn-blanco);
	border-radius: 10px;
	padding: 12px 14px;
	box-shadow: var(--cn-sombra);
}

.cn-admin-row__img {
	width: 54px;
	height: 54px;
	border-radius: 8px;
	background: var(--cn-crema-oscuro) center/cover no-repeat;
	flex-shrink: 0;
}

.cn-admin-row__body {
	flex: 1;
}

.cn-admin-row__actions {
	display: flex;
	gap: 8px;
}

.cn-btn--sm {
	padding: 6px 12px;
	font-size: 0.82rem;
}

@media (max-width: 640px) {
	.cn-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.cn-body {
		padding: 16px;
	}

	.cn-form {
		padding: 20px;
	}

	.cn-admin-row {
		flex-wrap: wrap;
	}
}