/* =============================================================
   WC Customer Stats – Resumen de Compras
   ============================================================= */

/* ── Variables ──────────────────────────────────────────────── */
.wcs-dashboard {
	--wcs-primary:      #6366f1;
	--wcs-primary-dark: #4f46e5;
	--wcs-accent:       #f59e0b;
	--wcs-success:      #10b981;
	--wcs-danger:       #ef4444;
	--wcs-bg:           #f8fafc;
	--wcs-card-bg:      #ffffff;
	--wcs-border:       #e2e8f0;
	--wcs-text:         #1e293b;
	--wcs-text-muted:   #64748b;
	--wcs-radius:       12px;
	--wcs-shadow:       0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
	--wcs-gap:          20px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--wcs-text);
	background: var(--wcs-bg);
	padding: 0 0 40px;
	max-width: 1100px;
}

/* ── Cabecera ────────────────────────────────────────────────── */
.wcs-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.wcs-header__title {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--wcs-text);
}

.wcs-header__sub {
	color: var(--wcs-text-muted);
	margin: 0;
	font-size: .95rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.wcs-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: 8px;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background .18s, transform .12s, box-shadow .18s;
	text-decoration: none;
}

.wcs-btn--primary {
	background: var(--wcs-primary);
	color: #fff;
}
.wcs-btn--primary:hover {
	background: var(--wcs-primary-dark);
	box-shadow: 0 4px 12px rgba(99,102,241,.35);
	transform: translateY(-1px);
}

.wcs-btn--export {
	background: var(--wcs-card-bg);
	color: var(--wcs-text);
	border: 1px solid var(--wcs-border);
}
.wcs-btn--export:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
}

/* ── Period tabs ─────────────────────────────────────────────── */
.wcs-filters {
	margin-bottom: 28px;
}

.wcs-period-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.wcs-period-tab {
	padding: 7px 16px;
	border-radius: 20px;
	border: 1.5px solid var(--wcs-border);
	background: var(--wcs-card-bg);
	color: var(--wcs-text-muted);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .16s;
}

.wcs-period-tab:hover {
	border-color: var(--wcs-primary);
	color: var(--wcs-primary);
}

.wcs-period-tab.active {
	background: var(--wcs-primary);
	border-color: var(--wcs-primary);
	color: #fff;
}

/* ── Custom date range ───────────────────────────────────────── */
.wcs-custom-dates {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	background: var(--wcs-card-bg);
	padding: 16px 20px;
	border-radius: var(--wcs-radius);
	border: 1px solid var(--wcs-border);
}

.wcs-custom-dates label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--wcs-text-muted);
}

.wcs-datepicker {
	padding: 8px 12px;
	border: 1.5px solid var(--wcs-border);
	border-radius: 8px;
	font-size: .85rem;
	color: var(--wcs-text);
	background: #fff;
	cursor: pointer;
	width: 150px;
}
.wcs-datepicker:focus {
	outline: none;
	border-color: var(--wcs-primary);
	box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

/* ── Loader ──────────────────────────────────────────────────── */
.wcs-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 60px 20px;
	color: var(--wcs-text-muted);
	font-size: .9rem;
}

.wcs-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--wcs-border);
	border-top-color: var(--wcs-primary);
	border-radius: 50%;
	animation: wcs-spin .7s linear infinite;
}

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

/* ── KPI Cards ───────────────────────────────────────────────── */
.wcs-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wcs-gap);
	margin-bottom: var(--wcs-gap);
}

.wcs-kpi {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--wcs-card-bg);
	border: 1px solid var(--wcs-border);
	border-radius: var(--wcs-radius);
	padding: 20px 22px;
	box-shadow: var(--wcs-shadow);
	transition: transform .2s, box-shadow .2s;
}
.wcs-kpi:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.wcs-kpi__icon {
	font-size: 2rem;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
}

.wcs-kpi--spent  .wcs-kpi__icon { background: #ede9fe; }
.wcs-kpi--orders .wcs-kpi__icon { background: #dbeafe; }
.wcs-kpi--avg    .wcs-kpi__icon { background: #fef3c7; }
.wcs-kpi--last   .wcs-kpi__icon { background: #d1fae5; }

.wcs-kpi__data {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wcs-kpi__value {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wcs-text);
	line-height: 1.2;
}

.wcs-kpi__label {
	font-size: .75rem;
	color: var(--wcs-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}

/* ── Chart cards ─────────────────────────────────────────────── */
.wcs-charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--wcs-gap);
	margin-bottom: var(--wcs-gap);
}

.wcs-chart-card {
	background: var(--wcs-card-bg);
	border: 1px solid var(--wcs-border);
	border-radius: var(--wcs-radius);
	padding: 24px;
	box-shadow: var(--wcs-shadow);
}

.wcs-chart-card__title {
	font-size: .9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wcs-text-muted);
	margin: 0 0 18px;
}

.wcs-chart-wrap {
	position: relative;
	height: 240px;
}

/* ── Table ───────────────────────────────────────────────────── */
.wcs-table-card {
	background: var(--wcs-card-bg);
	border: 1px solid var(--wcs-border);
	border-radius: var(--wcs-radius);
	box-shadow: var(--wcs-shadow);
	overflow: hidden;
}

.wcs-table-card__header {
	padding: 20px 24px 0;
}

.wcs-table-wrap {
	overflow-x: auto;
	padding: 0 24px 24px;
}

.wcs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
}

.wcs-table thead th {
	text-align: left;
	padding: 14px 12px;
	border-bottom: 2px solid var(--wcs-border);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wcs-text-muted);
	white-space: nowrap;
}

.wcs-table tbody tr {
	border-bottom: 1px solid var(--wcs-border);
	transition: background .15s;
}
.wcs-table tbody tr:last-child { border-bottom: none; }
.wcs-table tbody tr:hover { background: #f8fafc; }

.wcs-table tbody td {
	padding: 13px 12px;
	vertical-align: middle;
	color: var(--wcs-text);
}

.wcs-table .wcs-order-number {
	font-weight: 700;
	color: var(--wcs-primary);
}

.wcs-table .wcs-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .72rem;
	font-weight: 700;
	background: #e0e7ff;
	color: #3730a3;
}

.wcs-table .wcs-total {
	font-weight: 700;
}

.wcs-table .wcs-items {
	color: var(--wcs-text-muted);
	max-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcs-btn-view {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 6px;
	font-size: .75rem;
	font-weight: 600;
	background: #f1f5f9;
	color: var(--wcs-text);
	text-decoration: none;
	transition: background .15s;
}
.wcs-btn-view:hover { background: #e2e8f0; color: var(--wcs-text); }

/* ── No orders state ─────────────────────────────────────────── */
.wcs-no-orders {
	text-align: center;
	padding: 40px 20px;
	color: var(--wcs-text-muted);
}

/* ── Error ───────────────────────────────────────────────────── */
.wcs-error {
	padding: 16px 20px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--wcs-radius);
	color: var(--wcs-danger);
	font-size: .9rem;
}

/* ── Animations ──────────────────────────────────────────────── */
.wcs-content {
	animation: wcs-fadein .35s ease;
}

@keyframes wcs-fadein {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
	.wcs-header { flex-direction: column; }
	.wcs-kpis   { grid-template-columns: 1fr 1fr; }
	.wcs-charts { grid-template-columns: 1fr; }
	.wcs-custom-dates { flex-direction: column; }
	.wcs-datepicker { width: 100%; }

	.wcs-kpi__value { font-size: 1.1rem; }

	.wcs-table thead th:nth-child(5),
	.wcs-table tbody td:nth-child(5) { display: none; }
}

@media (max-width: 420px) {
	.wcs-kpis { grid-template-columns: 1fr; }
}