/* ═══════════════════════════════════════════════════════════════════
   WPENS — Estilos del frontend
   ═══════════════════════════════════════════════════════════════════
   PERSONALIZACIÓN MARCA BLANCA
   Edita SOLO el bloque :root de abajo para adaptar el plugin a un cliente.
   El resto del archivo lee desde estas variables.

   GUÍA RÁPIDA para cliente nuevo:
   1. Cambia --wpens-color-primary (color principal de la marca)
   2. Cambia --wpens-color-primary-hover (versión más oscura del anterior)
   3. Cambia --wpens-ticket-image y --wpens-ticket-image-special (URLs de imágenes)
   4. Ajusta --wpens-ticket-aspect-ratio si la imagen se ve aplastada
   5. Cambia --wpens-ticket-number-color si los números no se leen
   ═══════════════════════════════════════════════════════════════════ */

:root {
	/* ── COLORES PRINCIPALES (botones, selectores, headers) ────────── */
	--wpens-color-primary:        #bf1e2e;
	--wpens-color-primary-hover:  #8d1e29;
	--wpens-color-secondary:      #534AB7;
	--wpens-color-success:        #0F6E56;
	--wpens-color-danger:         #A32D2D;
	--wpens-color-warning:        #854F0B;
	--wpens-color-warning-bg:     #FFF8E7;

	/* ── TEXTO Y FONDOS ─────────────────────────────────────────────── */
	--wpens-color-text:           #1A1A1A;
	--wpens-color-text-muted:     #666666;
	--wpens-color-bg:             #FFFFFF;
	--wpens-color-bg-soft:        #F7F8FA;
	--wpens-color-border:         #DDDDDD;

	/* ── TICKETS DE FONDO ───────────────────────────────────────────── */
	/* Cambia las URLs por las del cliente */
	--wpens-ticket-image:         url('https://surticarnicosroman.com/wp-content/uploads/2026/04/ticket.png');
	--wpens-ticket-image-special: url('https://surticarnicosroman.com/wp-content/uploads/2026/04/ticketDorado.png');

	/* PROPORCIÓN del ticket. Prueba valores hasta que no se vea aplastado:
	   Horizontal: 16/9, 3/2, 2/1
	   Cuadrado:   4/3, 1/1
	   Vertical:   3/4, 2/3, 9/16 */
	--wpens-ticket-aspect-ratio:  9 / 16;

	/* ── COLOR DE LOS NÚMEROS DENTRO DEL TICKET ─────────────────────── */
	/* Independiente del color principal — puedes tener marca roja con números negros */
	--wpens-ticket-number-color:           #000000;   /* ticket normal */
	--wpens-ticket-number-special-color:   #6B4A00;   /* ticket dorado */
	--wpens-ticket-number-selected-color:  #bf1e2e;   /* cuando el número está seleccionado */

	/* ── ID ÚNICO INLINE [wpens_user_id] ────────────────────────────── */
	/* También controlable con atributos del shortcode: [wpens_user_id color="#FF0000" size="2rem"] */
	--wpens-userid-color: var(--wpens-color-primary);
	--wpens-userid-size:  1rem;

	/* ── DISEÑO ─────────────────────────────────────────────────────── */
	--wpens-radius:               8px;
	--wpens-radius-sm:            4px;
	--wpens-font:                 inherit;
	--wpens-shadow:               0 2px 8px rgba(0,0,0,0.08);
	--wpens-shadow-hover:         0 6px 20px rgba(0,0,0,0.14);

	/* ── ANCHOS DE COMPONENTES ──────────────────────────────────────── */
	--wpens-max-width-selector:     960px;
	--wpens-max-width-generator:    520px;
	--wpens-max-width-lookup:       560px;
	--wpens-max-width-confirmation: 70%;
	--wpens-max-width-dashboard:    1100px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESET BASE WPENS
   ═══════════════════════════════════════════════════════════════════ */
.wpens-selector,
.wpens-generator,
.wpens-lookup,
.wpens-progress,
.wpens-special-list-wrap,
.wpens-seller-dashboard,
.wpens-pos-dashboard,
.wpens-confirmation,
.wpens-alert,
.wpens-dashboard {
	font-family: var(--wpens-font) !important;
	color: var(--wpens-color-text) !important;
	box-sizing: border-box !important;
}

.wpens-selector *,
.wpens-generator *,
.wpens-lookup *,
.wpens-confirmation *,
.wpens-dashboard * {
	box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SELECTOR DE NÚMEROS (cuadrícula manual)
   ═══════════════════════════════════════════════════════════════════ */
.wpens-selector {
	max-width: var(--wpens-max-width-selector) !important;
	margin: 0 auto 30px !important;
	background: var(--wpens-color-bg) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius) !important;
	padding: 28px !important;
	box-shadow: var(--wpens-shadow) !important;
}

.wpens-selector__title {
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	margin: 0 0 20px !important;
	color: var(--wpens-color-text) !important;
}

.wpens-numbers-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) !important;
	gap: 12px !important;
	max-height: 520px !important;
	overflow-y: auto !important;
	padding: 8px 4px 8px 0 !important;
}

.wpens-numbers-grid::-webkit-scrollbar { width: 8px !important; }
.wpens-numbers-grid::-webkit-scrollbar-track {
	background: var(--wpens-color-bg-soft) !important;
	border-radius: 4px !important;
}
.wpens-numbers-grid::-webkit-scrollbar-thumb {
	background: var(--wpens-color-border) !important;
	border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES DE NÚMEROS — fondo TICKET (contain, sin distorsión)
   ═══════════════════════════════════════════════════════════════════ */
.wpens-number-btn {
	background-image: var(--wpens-ticket-image) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--wpens-ticket-number-color) !important;
	font-family: var(--wpens-font) !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	padding: 0 !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	aspect-ratio: var(--wpens-ticket-aspect-ratio) !important;
	min-height: 56px !important;
	line-height: 1 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	letter-spacing: 1px !important;
	text-transform: none !important;
	outline: none !important;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
}

.wpens-number-btn:hover:not(:disabled) {
	transform: translateY(-3px) scale(1.04) !important;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18)) !important;
	color: var(--wpens-ticket-number-color) !important;
	background-color: transparent !important;
	text-decoration: none !important;
}

/* SELECCIONADO — color vivo, sin velo */
.wpens-number-btn.is-selected {
	transform: scale(1.07) !important;
	color: var(--wpens-ticket-number-selected-color) !important;
	filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)) !important;
	font-weight: 900 !important;
}

.wpens-number-btn.is-selected:hover:not(:disabled) {
	color: var(--wpens-ticket-number-selected-color) !important;
	transform: scale(1.08) translateY(-2px) !important;
}

.wpens-number-btn.is-selected::before {
	display: none !important;
	content: none !important;
}

.wpens-number-btn.wpens-hidden {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ESTADOS ESPECIALES DEL BOTÓN DE NÚMERO
   ═══════════════════════════════════════════════════════════════════ */

/* En carrito del usuario actual */
.wpens-number-btn.is-in-cart {
	cursor: not-allowed !important;
	opacity: 0.78 !important;
	transform: none !important;
	color: var(--wpens-color-success) !important;
	position: relative !important;
}

.wpens-number-btn.is-in-cart::after {
	content: "✓" !important;
	position: absolute !important;
	top: 4px !important;
	right: 6px !important;
	background: var(--wpens-color-success) !important;
	color: #fff !important;
	border-radius: 50% !important;
	width: 18px !important;
	height: 18px !important;
	font-size: 11px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2 !important;
}

/* Reservado por otro usuario */
.wpens-number-btn.is-reserved-other {
	cursor: not-allowed !important;
	opacity: 0.4 !important;
	transform: none !important;
	color: var(--wpens-color-text-muted) !important;
	filter: grayscale(0.8) !important;
	text-decoration: line-through !important;
}

.wpens-number-btn.is-reserved-other:hover {
	transform: none !important;
	opacity: 0.4 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NÚMERO ESPECIAL EN CUADRÍCULA — fondo TICKET DORADO
   ═══════════════════════════════════════════════════════════════════ */
.wpens-number-btn.is-special-number {
	background-image: var(--wpens-ticket-image-special) !important;
	color: var(--wpens-ticket-number-special-color) !important;
}

.wpens-number-btn.is-special-number:hover:not(:disabled) {
	color: var(--wpens-ticket-number-special-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   VER MÁS / VER MENOS
   ═══════════════════════════════════════════════════════════════════ */
.wpens-ver-mas-btn {
	background: var(--wpens-color-bg-soft) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius-sm) !important;
	color: var(--wpens-color-text-muted) !important;
	padding: 8px 20px !important;
	cursor: pointer !important;
	font-family: var(--wpens-font) !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	transition: all 0.2s !important;
	margin: 4px !important;
	display: inline-block !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.wpens-ver-mas-btn:hover {
	border-color: var(--wpens-color-primary) !important;
	color: var(--wpens-color-primary) !important;
	background: var(--wpens-color-bg) !important;
}

.wpens-ver-mas-wrap {
	text-align: center !important;
	margin: 16px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INFO DE SELECCIÓN
   ═══════════════════════════════════════════════════════════════════ */
.wpens-selector__info {
	background: var(--wpens-color-bg-soft) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius-sm) !important;
	padding: 14px 18px !important;
	margin-top: 18px !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.wpens-selector__count {
	font-size: 1rem !important;
	font-weight: 600 !important;
}

.wpens-selector__count span {
	color: var(--wpens-color-primary) !important;
	font-size: 1.4rem !important;
}

.wpens-selector__numbers {
	font-size: 0.85rem !important;
	color: var(--wpens-color-text-muted) !important;
	max-width: 500px !important;
	word-break: break-word !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTÓN PRINCIPAL DE COMPRA
   ═══════════════════════════════════════════════════════════════════ */
.wpens-btn-buy {
	display: block !important;
	width: 100% !important;
	margin-top: 18px !important;
	padding: 16px !important;
	background: var(--wpens-color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--wpens-radius) !important;
	font-family: var(--wpens-font) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	box-shadow: none !important;
	text-decoration: none !important;
	outline: none !important;
	line-height: 1.4 !important;
}

.wpens-btn-buy:hover:not(:disabled) {
	background: var(--wpens-color-primary-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--wpens-shadow-hover) !important;
	color: #fff !important;
	text-decoration: none !important;
}

.wpens-btn-buy:disabled {
	background: var(--wpens-color-border) !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
	color: var(--wpens-color-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GENERADOR ALEATORIO
   ═══════════════════════════════════════════════════════════════════ */
.wpens-generator {
	max-width: var(--wpens-max-width-generator) !important;
	margin: 0 auto 30px !important;
	background: var(--wpens-color-bg) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius) !important;
	padding: 28px !important;
	text-align: center !important;
	box-shadow: var(--wpens-shadow) !important;
}

.wpens-generator__title {
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
	color: var(--wpens-color-text) !important;
}

.wpens-generator__subtitle {
	color: var(--wpens-color-text-muted) !important;
	margin: 0 0 24px !important;
	font-size: 0.95rem !important;
}

.wpens-generator__controls {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	margin-bottom: 20px !important;
}

.wpens-generator__controls label {
	font-weight: 600 !important;
}

.wpens-generator__controls input[type="number"] {
	width: 90px !important;
	padding: 10px !important;
	border: 2px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius-sm) !important;
	font-size: 1rem !important;
	text-align: center !important;
	font-family: var(--wpens-font) !important;
	background: var(--wpens-color-bg) !important;
	color: var(--wpens-color-text) !important;
	outline: none !important;
	box-shadow: none !important;
}

.wpens-generator__controls input[type="number"]:focus {
	border-color: var(--wpens-color-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CONSULTADOR DE NÚMEROS
   ═══════════════════════════════════════════════════════════════════ */
.wpens-lookup {
	max-width: var(--wpens-max-width-lookup) !important;
	margin: 0 auto 30px !important;
	background: var(--wpens-color-bg) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius) !important;
	padding: 28px !important;
	box-shadow: var(--wpens-shadow) !important;
}

.wpens-lookup__title {
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
}

.wpens-lookup__subtitle {
	color: var(--wpens-color-text-muted) !important;
	font-size: 0.9rem !important;
	margin: 0 0 20px !important;
}

.wpens-lookup__form {
	display: flex !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.wpens-lookup__input {
	flex: 1 !important;
	min-width: 200px !important;
	padding: 12px 16px !important;
	border: 2px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius-sm) !important;
	font-size: 1rem !important;
	font-family: var(--wpens-font) !important;
	background: var(--wpens-color-bg) !important;
	color: var(--wpens-color-text) !important;
	outline: none !important;
	box-shadow: none !important;
}

.wpens-lookup__input:focus {
	border-color: var(--wpens-color-primary) !important;
}

.wpens-lookup__btn {
	padding: 12px 22px !important;
	background: var(--wpens-color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--wpens-radius-sm) !important;
	font-family: var(--wpens-font) !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	font-size: 1rem !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important;
}

.wpens-lookup__btn:hover {
	background: var(--wpens-color-primary-hover) !important;
	color: #fff !important;
}

.wpens-lookup__results {
	margin-top: 20px !important;
}

.wpens-lookup__message {
	padding: 12px 16px !important;
	border-radius: var(--wpens-radius-sm) !important;
	font-size: 0.95rem !important;
}

.wpens-lookup__message.is-error {
	background: #fde8e8 !important;
	color: var(--wpens-color-danger) !important;
	border: 1px solid #f8c0c0 !important;
}

.wpens-lookup__message.is-loading {
	background: var(--wpens-color-bg-soft) !important;
	color: var(--wpens-color-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GRID DE RESULTADOS DEL CONSULTADOR — TICKETS DE FONDO
   ═══════════════════════════════════════════════════════════════════ */
.wpens-result-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important;
	gap: 12px !important;
	margin-top: 16px !important;
}

.wpens-result-number {
	background-image: var(--wpens-ticket-image) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--wpens-ticket-number-color) !important;
	font-weight: 800 !important;
	font-size: 1.1rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: var(--wpens-ticket-aspect-ratio) !important;
	min-height: 60px !important;
	letter-spacing: 1px !important;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
}

.wpens-result-number.is-special {
	background-image: var(--wpens-ticket-image-special) !important;
	color: var(--wpens-ticket-number-special-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BARRA DE PROGRESO
   ═══════════════════════════════════════════════════════════════════ */
.wpens-progress {
	margin: 16px 0 !important;
}

.wpens-progress__label {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
}

.wpens-progress__bar {
	height: 10px !important;
	background: var(--wpens-color-bg-soft) !important;
	border-radius: 5px !important;
	overflow: hidden !important;
	border: 1px solid var(--wpens-color-border) !important;
}

.wpens-progress__fill {
	height: 100% !important;
	background: var(--wpens-color-primary) !important;
	border-radius: 5px !important;
	transition: width 0.4s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NÚMEROS ESPECIALES — TICKETS DORADOS EN PÁGINA DE PRODUCTO
   ═══════════════════════════════════════════════════════════════════ */
.wpens-special-list-wrap {
	background: linear-gradient(135deg, #FFF8E7 0%, #FFEDC5 100%) !important;
	border: 1px solid var(--wpens-color-warning) !important;
	border-radius: var(--wpens-radius) !important;
	padding: 20px 22px !important;
	margin: 20px 0 !important;
	box-shadow: var(--wpens-shadow) !important;
}

.wpens-special-list-wrap__title {
	font-weight: 800 !important;
	color: var(--wpens-color-warning) !important;
	margin: 0 0 14px !important;
	font-size: 1.05rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.wpens-special-numbers-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wpens-special-numbers-list li {
	background-image: var(--wpens-ticket-image-special) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: var(--wpens-ticket-number-special-color) !important;
	font-weight: 800 !important;
	font-size: 1.1rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: var(--wpens-ticket-aspect-ratio) !important;
	min-height: 60px !important;
	letter-spacing: 1px !important;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)) !important;
	list-style: none !important;
	position: relative !important;
}

/* Especial YA VENDIDO — tachado con badge */
.wpens-special-numbers-list li.is-taken {
	opacity: 0.55 !important;
	filter: grayscale(0.6) drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
	color: var(--wpens-color-text-muted) !important;
}

.wpens-special-numbers-list li.is-taken::before {
	content: "" !important;
	position: absolute !important;
	left: 12% !important;
	right: 12% !important;
	top: 50% !important;
	height: 3px !important;
	background: var(--wpens-color-danger) !important;
	transform: rotate(-12deg) !important;
	border-radius: 2px !important;
	z-index: 2 !important;
}

.wpens-special-numbers-list li.is-taken::after {
	content: "VENDIDO" !important;
	position: absolute !important;
	bottom: 6% !important;
	right: 8% !important;
	background: var(--wpens-color-danger) !important;
	color: #fff !important;
	font-size: 0.55em !important;
	font-weight: 700 !important;
	padding: 1px 6px !important;
	border-radius: 3px !important;
	letter-spacing: 0.5px !important;
	z-index: 3 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINA DE CONFIRMACIÓN (THANK-YOU)
   ═══════════════════════════════════════════════════════════════════ */
.wpens-confirmation {
	max-width: var(--wpens-max-width-confirmation) !important;
	width: 100% !important;
	margin: 32px auto !important;
	padding: 36px 40px !important;
	background: var(--wpens-color-bg) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-top: 4px solid var(--wpens-color-primary) !important;
	border-radius: var(--wpens-radius) !important;
	box-shadow: var(--wpens-shadow) !important;
}

.wpens-confirmation__title {
	color: var(--wpens-color-primary) !important;
	font-size: 1.7rem !important;
	font-weight: 800 !important;
	margin: 0 0 24px !important;
	text-align: center !important;
}

.wpens-confirmation__uid {
	background: linear-gradient(135deg, var(--wpens-color-bg-soft) 0%, #fff 100%) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-left: 4px solid var(--wpens-color-primary) !important;
	border-radius: var(--wpens-radius-sm) !important;
	padding: 18px 22px !important;
	margin-bottom: 24px !important;
	font-size: 0.95rem !important;
}

.wpens-confirmation__uid strong {
	font-size: 1.6rem !important;
	color: var(--wpens-color-primary) !important;
	display: inline-block !important;
	margin-top: 6px !important;
	letter-spacing: 2px !important;
	font-family: monospace !important;
}

.wpens-confirmation h4 {
	color: var(--wpens-color-text) !important;
	margin-top: 24px !important;
	margin-bottom: 12px !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* Grid de números — TICKETS GRANDES */
.wpens-confirmation__numbers-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
	gap: 14px !important;
	margin: 18px 0 !important;
}

.wpens-confirmation-number {
	background-image: var(--wpens-ticket-image) !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--wpens-ticket-number-color) !important;
	font-weight: 800 !important;
	font-size: 1.4rem !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: var(--wpens-ticket-aspect-ratio) !important;
	min-height: 78px !important;
	padding: 0 !important;
	text-align: center !important;
	letter-spacing: 1px !important;
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.12)) !important;
}

.wpens-confirmation-number.is-special {
	background-image: var(--wpens-ticket-image-special) !important;
	color: var(--wpens-ticket-number-special-color) !important;
}

.wpens-confirmation-number small {
	font-size: 0.65rem !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	margin-top: 2px !important;
	opacity: 0.85 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CREDENCIALES — diseño de tarjetas horizontales
   ═══════════════════════════════════════════════════════════════════ */
.wpens-confirmation__credentials {
	margin-top: 28px !important;
	padding: 0 !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius) !important;
	overflow: hidden !important;
	background: #fff !important;
	box-shadow: var(--wpens-shadow) !important;
}

.wpens-confirmation__credentials h4 {
	margin: 0 !important;
	padding: 16px 22px !important;
	background: linear-gradient(135deg, var(--wpens-color-primary) 0%, var(--wpens-color-primary-hover) 100%) !important;
	color: #fff !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* Tip de la foto destacado */
.wpens-creds-photo-tip {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 18px 22px !important;
	background: linear-gradient(135deg, #FFF8E7 0%, #FFEDC5 100%) !important;
	border-bottom: 1px solid #e5c97a !important;
	color: var(--wpens-color-warning) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
}

.wpens-creds-photo-tip__icon {
	font-size: 2rem !important;
	flex-shrink: 0 !important;
	line-height: 1 !important;
}

.wpens-creds-photo-tip__text {
	flex: 1 !important;
	line-height: 1.4 !important;
}

/* Cards horizontales Usuario / Contraseña */
.wpens-creds-cards {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 !important;
}

.wpens-creds-card {
	padding: 22px !important;
	background: #fff !important;
	border-right: 1px solid var(--wpens-color-border) !important;
	border-bottom: 1px solid var(--wpens-color-border) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.wpens-creds-card:last-child {
	border-right: none !important;
}

.wpens-creds-card__label {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	color: var(--wpens-color-primary) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}

.wpens-creds-card__value {
	font-family: monospace !important;
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	color: var(--wpens-color-text) !important;
	background: var(--wpens-color-bg-soft) !important;
	padding: 10px 14px !important;
	border-radius: var(--wpens-radius-sm) !important;
	border: 1px dashed var(--wpens-color-border) !important;
	word-break: break-all !important;
	letter-spacing: 0.5px !important;
}

/* Botón iniciar sesión */
.wpens-creds-login-btn-wrap {
	padding: 18px 22px !important;
	background: var(--wpens-color-bg-soft) !important;
}

.wpens-creds-login-btn {
	display: block !important;
	width: 100% !important;
	padding: 14px 22px !important;
	background: var(--wpens-color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--wpens-radius) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-align: center !important;
	font-size: 1rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	transition: all 0.2s !important;
	cursor: pointer !important;
	font-family: var(--wpens-font) !important;
}

.wpens-creds-login-btn:hover {
	background: var(--wpens-color-primary-hover) !important;
	color: #fff !important;
	text-decoration: none !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--wpens-shadow-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ALERTA / NOTICE
   ═══════════════════════════════════════════════════════════════════ */
.wpens-alert {
	padding: 14px 18px !important;
	background: #fde8e8 !important;
	color: var(--wpens-color-danger) !important;
	border: 1px solid #f8c0c0 !important;
	border-radius: var(--wpens-radius-sm) !important;
	margin: 16px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ID ÚNICO INLINE [wpens_user_id]
   Sin fondo — color y tamaño configurables desde variables o atributos del shortcode
   ═══════════════════════════════════════════════════════════════════ */
.wpens-user-id {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	font-family: monospace !important;
	font-weight: 700 !important;
	color: var(--wpens-userid-color) !important;
	font-size: var(--wpens-userid-size) !important;
	letter-spacing: 1px !important;
	display: inline !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NOTIFICACIÓN AGREGAR AL CARRITO
   ═══════════════════════════════════════════════════════════════════ */
.wpens-add-notice {
	padding: 14px 18px !important;
	border-radius: var(--wpens-radius) !important;
	margin: 0 0 20px !important;
	font-family: var(--wpens-font) !important;
}

.wpens-add-notice.is-success {
	background: #edfbf3 !important;
	border: 1px solid #9be4b8 !important;
	color: var(--wpens-color-success) !important;
}

.wpens-add-notice.is-error {
	background: #fde8e8 !important;
	border: 1px solid #f8c0c0 !important;
	color: var(--wpens-color-danger) !important;
}

.wpens-add-notice p {
	margin: 0 0 10px !important;
	font-weight: 600 !important;
}

.wpens-add-notice__actions {
	display: flex !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.wpens-add-notice__btn {
	display: inline-block !important;
	padding: 8px 18px !important;
	border-radius: var(--wpens-radius-sm) !important;
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	text-decoration: none !important;
	background: var(--wpens-color-bg-soft) !important;
	border: 1px solid var(--wpens-color-border) !important;
	color: var(--wpens-color-text) !important;
	transition: all 0.2s !important;
}

.wpens-add-notice__btn:hover {
	background: var(--wpens-color-bg) !important;
	border-color: var(--wpens-color-primary) !important;
	color: var(--wpens-color-primary) !important;
	text-decoration: none !important;
}

.wpens-add-notice__btn.is-primary {
	background: var(--wpens-color-primary) !important;
	border-color: var(--wpens-color-primary) !important;
	color: #fff !important;
}

.wpens-add-notice__btn.is-primary:hover {
	background: var(--wpens-color-primary-hover) !important;
	border-color: var(--wpens-color-primary-hover) !important;
	color: #fff !important;
}

/* "Ya tienes en tu carrito" */
.wpens-incart-notice {
	background: #edfbf3 !important;
	border: 1px solid #9be4b8 !important;
	border-radius: var(--wpens-radius-sm) !important;
	padding: 12px 18px !important;
	margin-bottom: 18px !important;
	font-size: 0.95rem !important;
	color: var(--wpens-color-success) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GRID LOADING / ERROR
   ═══════════════════════════════════════════════════════════════════ */
.wpens-grid-loading {
	text-align: center !important;
	padding: 40px 20px !important;
	color: var(--wpens-color-text-muted) !important;
}

.wpens-grid-spinner {
	display: inline-block !important;
	width: 32px !important;
	height: 32px !important;
	border: 3px solid var(--wpens-color-border) !important;
	border-top-color: var(--wpens-color-primary) !important;
	border-radius: 50% !important;
	animation: wpens-spin 0.8s linear infinite !important;
	margin-bottom: 10px !important;
}

@keyframes wpens-spin {
	to { transform: rotate(360deg); }
}

.wpens-grid-error {
	text-align: center !important;
	padding: 30px 20px !important;
	background: #fde8e8 !important;
	border: 1px solid #f8c0c0 !important;
	border-radius: var(--wpens-radius) !important;
	color: var(--wpens-color-danger) !important;
}

.wpens-grid-retry {
	margin-top: 10px !important;
	padding: 8px 20px !important;
	background: var(--wpens-color-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--wpens-radius-sm) !important;
	cursor: pointer !important;
	font-weight: 600 !important;
}

.wpens-grid-retry:hover {
	background: var(--wpens-color-primary-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   B5 — DASHBOARD VENDEDOR / POS
   ═══════════════════════════════════════════════════════════════════ */
.wpens-dashboard {
	max-width: var(--wpens-max-width-dashboard) !important;
	margin: 24px auto !important;
	padding: 28px !important;
	background: var(--wpens-color-bg) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius) !important;
	box-shadow: var(--wpens-shadow) !important;
}

.wpens-dashboard h2 {
	margin-top: 0 !important;
	margin-bottom: 18px !important;
	color: var(--wpens-color-text) !important;
	font-size: 1.5rem !important;
}

.wpens-dashboard h3 {
	margin-top: 24px !important;
	color: var(--wpens-color-text) !important;
}

/* Filtros */
.wpens-dashboard-filters {
	padding: 16px !important;
	background: var(--wpens-color-bg-soft) !important;
	border-radius: var(--wpens-radius) !important;
	border: 1px solid var(--wpens-color-border) !important;
	display: flex !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
}

.wpens-dashboard-filters > div {
	min-width: 130px !important;
}

.wpens-dashboard-filters label {
	color: var(--wpens-color-text-muted) !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	display: block !important;
	margin-bottom: 6px !important;
}

.wpens-dashboard-filters select,
.wpens-dashboard-filters input[type="date"],
.wpens-dashboard-search input[type="number"] {
	width: 100% !important;
	padding: 9px 12px !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius-sm) !important;
	background: #fff !important;
	font-size: 14px !important;
	color: var(--wpens-color-text) !important;
	min-height: 40px !important;
	line-height: 1.2 !important;
	font-family: var(--wpens-font) !important;
}

.wpens-dashboard-filters select:focus,
.wpens-dashboard-filters input[type="date"]:focus,
.wpens-dashboard-search input[type="number"]:focus {
	outline: none !important;
	border-color: var(--wpens-color-primary) !important;
	box-shadow: 0 0 0 2px rgba(24, 95, 165, 0.15) !important;
}

/* Botones del dashboard */
.wpens-dashboard .button,
.wpens-dashboard button.button {
	padding: 9px 18px !important;
	background: #fff !important;
	color: var(--wpens-color-text) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	min-height: 40px !important;
	line-height: 1.2 !important;
	transition: all 0.15s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--wpens-font) !important;
}

.wpens-dashboard .button:hover,
.wpens-dashboard button.button:hover {
	background: var(--wpens-color-bg-soft) !important;
	border-color: var(--wpens-color-text-muted) !important;
}

.wpens-dashboard .button-primary,
.wpens-dashboard button.button-primary {
	background: var(--wpens-color-primary) !important;
	color: #fff !important;
	border-color: var(--wpens-color-primary) !important;
}

.wpens-dashboard .button-primary:hover,
.wpens-dashboard button.button-primary:hover {
	background: var(--wpens-color-primary-hover) !important;
	border-color: var(--wpens-color-primary-hover) !important;
	color: #fff !important;
}

/* Buscador */
.wpens-dashboard-search {
	background: var(--wpens-color-bg-soft) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius) !important;
}

.wpens-dashboard-search > div {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
}

.wpens-dashboard-search input[type="number"] {
	flex: 1 1 200px !important;
	min-width: 0 !important;
}

/* Stats */
.wpens-dashboard-stats {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	gap: 14px !important;
	margin: 24px 0 !important;
}

.wpens-dashboard-stat {
	padding: 18px !important;
	background: #fff !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius) !important;
	text-align: center !important;
}

.wpens-dashboard-stat.is-highlight {
	background: linear-gradient(135deg, var(--wpens-color-primary) 0%, var(--wpens-color-primary-hover) 100%) !important;
	border-color: var(--wpens-color-primary) !important;
	color: #fff !important;
}

.wpens-dashboard-stat__label {
	font-size: 0.75rem !important;
	color: var(--wpens-color-text-muted) !important;
	margin-bottom: 8px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	font-weight: 600 !important;
}

.wpens-dashboard-stat.is-highlight .wpens-dashboard-stat__label {
	color: rgba(255,255,255,0.92) !important;
}

.wpens-dashboard-stat__value {
	font-size: 1.6rem !important;
	font-weight: 800 !important;
	color: var(--wpens-color-text) !important;
	line-height: 1.2 !important;
}

.wpens-dashboard-stat.is-highlight .wpens-dashboard-stat__value {
	color: #fff !important;
}

/* Tabla */
.wpens-dashboard-table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: #fff !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius) !important;
	overflow: hidden !important;
	margin-top: 12px !important;
	font-size: 0.9rem !important;
}

.wpens-dashboard-table thead th {
	background: var(--wpens-color-primary) !important;
	color: #fff !important;
	padding: 12px 14px !important;
	text-align: left !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
}

.wpens-dashboard-table tbody td {
	padding: 11px 14px !important;
	border-bottom: 1px solid #eee !important;
	color: var(--wpens-color-text) !important;
	vertical-align: top !important;
}

.wpens-dashboard-table tbody tr:last-child td {
	border-bottom: none !important;
}

.wpens-dashboard-table tbody tr:hover td {
	background: var(--wpens-color-bg-soft) !important;
}

.wpens-dashboard-table code {
	background: var(--wpens-color-bg-soft) !important;
	padding: 2px 8px !important;
	border-radius: 3px !important;
	font-size: 0.85em !important;
	font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CARRITO — cantidad bloqueada (B6)
   ═══════════════════════════════════════════════════════════════════ */
.wpens-locked-qty {
	display: inline-block !important;
	padding: 4px 14px !important;
	background: var(--wpens-color-bg-soft) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-radius: var(--wpens-radius-sm) !important;
	font-weight: 700 !important;
	color: var(--wpens-color-text) !important;
	font-size: 1rem !important;
	min-width: 40px !important;
	text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	:root {
		--wpens-max-width-confirmation: 92%;
	}

	.wpens-confirmation {
		padding: 28px 24px !important;
	}

	.wpens-dashboard {
		padding: 22px 18px !important;
	}

	.wpens-dashboard-filters > div {
		min-width: 120px !important;
		flex: 1 1 calc(50% - 6px) !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
	:root {
		--wpens-max-width-confirmation: 100%;
	}

	.wpens-numbers-grid {
	   grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important;
		gap: 4px !important;
		max-height: 400px !important;
	}

	.wpens-number-btn {
		font-size: 0.85rem !important;
		min-height: 44px !important;
		letter-spacing: 0.5px !important;
	}

	.wpens-result-grid,
	.wpens-special-numbers-list {
		grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
		gap: 8px !important;
	}

	.wpens-result-number,
	.wpens-special-numbers-list li {
		font-size: 0.9rem !important;
		min-height: 50px !important;
	}

	.wpens-confirmation__numbers-grid {
		grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important;
		gap: 10px !important;
	}

	.wpens-confirmation-number {
		font-size: 1.1rem !important;
		min-height: 60px !important;
	}

	.wpens-selector,
	.wpens-generator,
	.wpens-lookup,
	.wpens-confirmation,
	.wpens-dashboard {
		padding: 18px !important;
		margin: 16px auto !important;
		border-radius: var(--wpens-radius-sm) !important;
	}

	.wpens-confirmation {
		padding: 22px 16px !important;
	}

	.wpens-confirmation__title {
		font-size: 1.3rem !important;
	}

	.wpens-confirmation__uid strong {
		font-size: 1.3rem !important;
	}

	/* Credenciales en columna en mobile */
	.wpens-creds-cards {
		grid-template-columns: 1fr !important;
	}

	.wpens-creds-card {
		border-right: none !important;
		border-bottom: 1px solid var(--wpens-color-border) !important;
	}

	.wpens-creds-card:last-child {
		border-bottom: none !important;
	}

	.wpens-creds-card__value {
		font-size: 1.1rem !important;
	}

	.wpens-creds-photo-tip {
		padding: 14px 16px !important;
	}

	.wpens-creds-photo-tip__icon {
		font-size: 1.5rem !important;
	}

	.wpens-lookup__form {
		flex-direction: column !important;
	}

	.wpens-lookup__btn {
		width: 100% !important;
	}

	.wpens-dashboard-stats {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.wpens-dashboard-stat {
		padding: 14px 10px !important;
	}

	.wpens-dashboard-stat__value {
		font-size: 1.2rem !important;
	}

	.wpens-dashboard-filters {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 14px !important;
	}

	.wpens-dashboard-filters > div {
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	.wpens-dashboard-filters > div:last-child {
		display: flex !important;
		gap: 8px !important;
	}

	.wpens-dashboard-filters > div:last-child .button {
		flex: 1 !important;
	}

	.wpens-dashboard-table {
		font-size: 0.8rem !important;
	}

	.wpens-dashboard-table thead th,
	.wpens-dashboard-table tbody td {
		padding: 8px 10px !important;
	}

	.wpens-dashboard-search > div {
		flex-direction: column !important;
	}

	.wpens-dashboard-search > div > * {
		width: 100% !important;
	}

	.wpens-dashboard-search input[type="number"] {
		flex: 1 1 100% !important;
	}

	.wpens-selector__info {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.wpens-add-notice__actions {
		flex-direction: column !important;
	}

	.wpens-add-notice__btn {
		width: 100% !important;
		text-align: center !important;
	}

	.wpens-special-list-wrap {
		padding: 16px !important;
	}

	.wpens-ver-mas-btn {
		width: 100% !important;
		margin: 4px 0 !important;
	}
}

/* Mobile pequeño */
@media (max-width: 380px) {
	.wpens-numbers-grid {
		grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important;
		gap: 6px !important;
	}

	.wpens-number-btn {
		font-size: 0.78rem !important;
		min-height: 40px !important;
	}

	.wpens-confirmation__numbers-grid {
		grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
	}

	.wpens-confirmation-number {
		font-size: 1rem !important;
		min-height: 52px !important;
	}
}
/* ═══════════════════════════════════════════════════════════════════
   B7 — Mensaje de evento finalizado / agotado
   (El ocultar el botón nativo de WC se maneja por PHP en el snippet
    de Code Snippets — más robusto que CSS para distintos constructores)
   ═══════════════════════════════════════════════════════════════════ */
.wpens-event-closed {
	max-width: var(--wpens-max-width-selector) !important;
	margin: 0 auto 30px !important;
	padding: 36px 28px !important;
	background: linear-gradient(135deg, var(--wpens-color-bg-soft) 0%, #fff 100%) !important;
	border: 1px solid var(--wpens-color-border) !important;
	border-top: 4px solid var(--wpens-color-primary) !important;
	border-radius: var(--wpens-radius) !important;
	text-align: center !important;
	box-shadow: var(--wpens-shadow) !important;
}

.wpens-event-closed h3 {
	color: var(--wpens-color-primary) !important;
	font-size: 1.5rem !important;
	font-weight: 800 !important;
	margin: 0 0 12px !important;
}

.wpens-event-closed p {
	color: var(--wpens-color-text-muted) !important;
	font-size: 1rem !important;
	margin: 0 auto !important;
	line-height: 1.6 !important;
	max-width: 540px !important;
}

@media (max-width: 600px) {
	.wpens-event-closed {
		padding: 26px 18px !important;
	}
	.wpens-event-closed h3 {
		font-size: 1.2rem !important;
	}
	.wpens-event-closed p {
		font-size: 0.95rem !important;
	}
}