/* Contador de visitas - Frontend */
.clvf-view-counter {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin-left: auto;
	margin-right: 0;
	padding: 6px 12px;
	margin-top: 12px;
	margin-bottom: 12px;
	background: var(--clvf-theme-bg, #fffdf5);
	border: 2px solid var(--clvf-theme-border, #111);
	border-radius: 8px;
	box-shadow: 3px 3px 0 var(--clvf-theme-border, #111);
	font-size: var(--clvf-font-size, 14px);
	font-family: var(--clvf-font-family, inherit);
	line-height: 1.4;
	box-sizing: border-box;
}

.clvf-view-counter .clvf-label {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	line-height: 1;
	color: inherit;
}

.clvf-view-counter .clvf-label .clvf-eye-icon {
	display: block;
}

.clvf-view-counter .clvf-label-text {
	font-size: inherit;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.clvf-view-counter .clvf-count {
	display: inline-block;
	min-width: 42px;
	text-align: center;
	white-space: nowrap;
	font-weight: 700;
	background: var(--clvf-count-bg, #ffd93d);
	border: 2px solid var(--clvf-theme-border, #111);
	border-radius: 6px;
	padding: 1px 10px;
	color: #111;
	transition: min-width 0.2s ease, padding 0.2s ease;
}

/* ===== Diseños ===== */

/* Moderno: tarjeta minimalista con borde fino y radio grande */
.clvf-view-counter.clvf-style-modern {
	background: #ffffff;
	border: 1px solid #e4e7ec;
	border-radius: 14px;
	padding: 10px 16px;
}
.clvf-view-counter.clvf-style-modern .clvf-count {
	background: var(--clvf-count-bg, #f0f4ff);
	border: 1px solid #d6e0ff;
	border-radius: 999px;
	padding: 3px 14px;
	font-weight: 600;
	color: #1d2327;
}
.clvf-view-counter.clvf-style-modern .clvf-label {
	color: #667085;
}

/* Tecnológico: fondo oscuro, números en neón, esquinas rectas */
.clvf-view-counter.clvf-style-tech {
	background: #0f172a;
	border: 1px solid #1e293b;
	border-radius: 8px;
	padding: 10px 16px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.clvf-view-counter.clvf-style-tech .clvf-count {
	background: #020617;
	border: 1px solid #22d3ee;
	border-radius: 4px;
	box-shadow: 0 0 12px rgba(34, 211, 238, 0.35), inset 0 0 8px rgba(34, 211, 238, 0.15);
	color: #22d3ee;
	text-shadow: 0 0 6px rgba(34, 211, 238, 0.6);
	font-weight: 500;
}
.clvf-view-counter.clvf-style-tech .clvf-label {
	color: #64748b;
}
.clvf-view-counter.clvf-style-tech .clvf-eye-icon {
	opacity: 0.7;
}

/* Plano: sin sombra, esquinas ligeras, sin borde marcado */
.clvf-view-counter.clvf-style-flat {
	background: var(--clvf-theme-bg, #f5f7fb);
	border: 0;
	border-radius: 8px;
	padding: 8px 14px;
}
.clvf-view-counter.clvf-style-flat .clvf-count {
	background: var(--clvf-count-bg, #eef2ff);
	border: 0;
	border-radius: 6px;
	padding: 2px 12px;
	color: var(--clvf-theme-border, #2457f5);
	font-weight: 700;
}
.clvf-view-counter.clvf-style-flat .clvf-label {
	color: #667085;
}

/* Colorido: degradado vibrante */
.clvf-view-counter.clvf-style-colorful {
	background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
	border: 0;
	border-radius: 16px;
	padding: 10px 16px;
	box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25);
}
.clvf-view-counter.clvf-style-colorful .clvf-count {
	background: var(--clvf-count-bg, rgba(255, 255, 255, 0.92));
	border: 0;
	border-radius: 999px;
	padding: 3px 14px;
	color: #111;
}
.clvf-view-counter.clvf-style-colorful .clvf-label {
	color: #fff;
}

/* Especial: píldora con gradiente dorado */
.clvf-view-counter.clvf-style-special {
	background: linear-gradient(135deg, #ffd93d 0%, #ffb020 100%);
	border: 2px solid #fff;
	border-radius: 999px;
	padding: 8px 18px;
	box-shadow: 0 6px 20px rgba(255, 176, 32, 0.35);
}
.clvf-view-counter.clvf-style-special .clvf-count {
	background: var(--clvf-count-bg, #fff);
	border: 2px solid #ffb020;
	border-radius: 999px;
	padding: 2px 14px;
	color: #2457f5;
}
.clvf-view-counter.clvf-style-special .clvf-label {
	color: #7c5a00;
}

/* Nativo del tema: usa los tokens CSS del tema ClasiFly (--cf-*) */
.clvf-view-counter.clvf-style-native {
	background: var(--cf-surface, #ffffff);
	border: 1px solid var(--cf-line, #e7eaf1);
	border-radius: var(--cf-radius-sm, 10px);
	box-shadow: var(--cf-shadow-sm, 0 6px 18px rgba(20, 33, 61, 0.07));
	padding: 9px 14px;
	font-family: var(--cf-font, Inter, ui-sans-serif, system-ui, sans-serif);
}
.clvf-view-counter.clvf-style-native .clvf-count {
	background: var(--cf-soft, #f5f7fb);
	border: 1px solid var(--cf-line, #e7eaf1);
	border-radius: 8px;
	padding: 3px 12px;
	color: var(--cf-primary, #2457f5);
	font-weight: 700;
}
.clvf-view-counter.clvf-style-native .clvf-label {
	color: var(--cf-muted, #667085);
}

/* ===== Tipos de sombra ===== */

/* Chunky: brutalista */
.clvf-view-counter[data-clvf-shadow="chunky"] {
	box-shadow: 3px 3px 0 var(--clvf-theme-border, #111) !important;
}
.clvf-view-counter[data-clvf-shadow="chunky"].clvf-style-tech {
	box-shadow: 4px 4px 0 #22d3ee !important;
}
.clvf-view-counter[data-clvf-shadow="chunky"].clvf-style-colorful {
	box-shadow: 4px 4px 0 rgba(99, 102, 241, 0.8) !important;
}
.clvf-view-counter[data-clvf-shadow="chunky"].clvf-style-special {
	box-shadow: 4px 4px 0 #fff, 6px 6px 0 #ffb020 !important;
}
.clvf-view-counter[data-clvf-shadow="chunky"].clvf-style-native {
	box-shadow: 2px 2px 0 var(--cf-primary, #2457f5) !important;
}

/* Suave: difuminada ligera */
.clvf-view-counter[data-clvf-shadow="soft"] {
	box-shadow: 0 6px 18px rgba(20, 33, 61, 0.08) !important;
}
.clvf-view-counter[data-clvf-shadow="soft"].clvf-style-tech {
	box-shadow: 0 6px 18px rgba(34, 211, 238, 0.12) !important;
}
.clvf-view-counter[data-clvf-shadow="soft"].clvf-style-colorful {
	box-shadow: 0 8px 24px rgba(236, 72, 153, 0.2) !important;
}

/* Resplandor: halo luminoso */
.clvf-view-counter[data-clvf-shadow="glow"] {
	box-shadow: 0 0 0 1px #fff, 0 0 14px rgba(17, 17, 17, 0.35) !important;
}
.clvf-view-counter[data-clvf-shadow="glow"].clvf-style-modern {
	box-shadow: 0 0 0 1px #fff, 0 0 14px rgba(36, 87, 245, 0.25) !important;
}
.clvf-view-counter[data-clvf-shadow="glow"].clvf-style-tech {
	box-shadow: 0 0 16px rgba(34, 211, 238, 0.55) !important;
}
.clvf-view-counter[data-clvf-shadow="glow"].clvf-style-colorful {
	box-shadow: 0 0 18px rgba(236, 72, 153, 0.5) !important;
}
.clvf-view-counter[data-clvf-shadow="glow"].clvf-style-native {
	box-shadow: 0 0 14px rgba(36, 87, 245, 0.2) !important;
}

/* Colorida: sombra multicolor */
.clvf-view-counter[data-clvf-shadow="colorful"] {
	box-shadow: 4px 4px 0 #ff6b6b, -3px 3px 0 #4ecdc4, 3px -3px 0 #ffe66d !important;
}
.clvf-view-counter[data-clvf-shadow="colorful"].clvf-style-native {
	box-shadow: 4px 4px 0 rgba(255, 176, 32, 0.4), -3px 3px 0 rgba(18, 184, 134, 0.3) !important;
}

/* Nativa del tema: refuerza --cf-shadow del tema ClasiFly */
.clvf-view-counter[data-clvf-shadow="native"] {
	box-shadow: var(--cf-shadow, 0 16px 42px rgba(20, 33, 61, 0.11)) !important;
}
.clvf-view-counter[data-clvf-shadow="native"].clvf-style-tech {
	box-shadow: 0 16px 42px rgba(15, 23, 42, 0.4) !important;
}
.clvf-view-counter[data-clvf-shadow="native"].clvf-style-flat {
	box-shadow: 0 6px 18px rgba(20, 33, 61, 0.07) !important;
}

/* Sin sombra */
.clvf-view-counter[data-clvf-shadow="none"] {
	box-shadow: none !important;
}