/* Paneles de cliente y de gestor.
   Sólo se carga bajo /mi-cuenta/ y /gestion/.

   Mientras no existan las plantillas de CrocoBuilder, el panel se pinta con la
   plantilla de reserva del tema, que envuelve el contenido en un <article
   class="bt-card">. Aquí se deshace ese envoltorio para que la barra lateral y
   el contenido puedan repartirse el ancho: es un apaño consciente y acotado a
   .bt-dashboard, no un estilo general. */

.bt-dashboard .bt-main > .bt-container { max-width: 1320px; }

.bt-dashboard article.bt-card {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	margin: 0;
}

/* El título de la página duplicaría el <h1> que ya pinta cada shortcode. */
.bt-dashboard .entry-title { display: none; }

.bt-dashboard .entry-content {
	display: grid;
	grid-template-columns: var(--bt-sidebar, 268px) minmax(0, 1fr);
	gap: var(--bt-space-8, 40px);
	align-items: start;
}

/* ------------------------------------------------------------ Barra lateral */

.bt-sidebar {
	position: sticky;
	top: var(--bt-space-6, 24px);
	padding: var(--bt-space-5, 20px);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-lg, 24px);
	background: var(--bt-surface, #fff);
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
}

.bt-sidebar__list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-sidebar__link {
	display: flex;
	align-items: center;
	gap: var(--bt-space-3, 12px);
	padding: 11px var(--bt-space-3, 12px);
	border-radius: var(--bt-radius-sm, 14px);
	color: var(--bt-ink-2, #34485e);
	font-size: 14.5px;
	font-weight: var(--bt-w-medium, 540);
	text-decoration: none;
}

.bt-sidebar__link.is-active {
	background: var(--bt-green-050, #e9faf4);
	color: var(--bt-green-700, #0f7d5b);
	font-weight: var(--bt-w-semi, 620);
}

.bt-sidebar__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.bt-sidebar__foot {
	margin: var(--bt-space-4, 16px) 0 0;
	padding-block-start: var(--bt-space-4, 16px);
	border-block-start: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	font-size: var(--bt-fs-sm, 13px);
}

.bt-sidebar__foot a { color: var(--bt-ink-muted, #5c6c80); }

@media (hover: hover) {
	.bt-sidebar__link:hover { background: var(--bt-green-050, #e9faf4); color: var(--bt-green-700, #0f7d5b); }
}

/* El botón de menú sólo existe por debajo del punto de ruptura. */
.bt-offcanvas__toggle { display: none; }

/* ---------------------------------------------------------- Cabecera del panel */

.bt-panel-head { margin-block-end: var(--bt-space-6, 24px); }

.bt-panel-head h1 {
	margin: 0;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.1;
	letter-spacing: -.04em;
}

.bt-panel-section { margin-block-start: var(--bt-space-8, 40px); }

/* ------------------------------------------------------------- Rejillas */

.bt-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: var(--bt-space-4, 16px);
	margin-block-end: var(--bt-space-6, 24px);
}

.bt-chart-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--bt-space-5, 20px);
	margin-block-end: var(--bt-space-6, 24px);
	align-items: start;
}

/* Los gráficos vienen de charts.css sin caja propia: se la damos aquí para
   que en el panel se lean como tarjetas, igual que los KPI. */
.bt-chart-grid > * {
	padding: var(--bt-space-5, 20px);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-lg, 24px);
	background: var(--bt-surface, #fff);
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
	text-align: center;
}

.bt-kpi {
	padding: var(--bt-space-5, 20px);
	border: 1px solid var(--bt-line, rgba(138, 158, 181, .16));
	border-radius: var(--bt-radius-lg, 24px);
	background: var(--bt-surface, #fff);
	box-shadow: var(--bt-shadow-sm, 0 8px 20px rgba(22, 38, 56, .045));
}

/* --------------------------------------------------------------- Clientes */

.bt-client-list {
	display: grid;
	gap: var(--bt-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-client-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: var(--bt-space-4, 16px);
	margin-block-end: 0;
}

.bt-client-row__body { min-width: 0; }
.bt-client-row__body h3 { margin: 0 0 2px; font-size: 17px; }
.bt-client-row__body p { margin: 0; overflow-wrap: anywhere; }

.bt-client-row__count {
	margin: 0;
	color: var(--bt-ink-muted, #5c6c80);
	font-size: var(--bt-fs-sm, 13px);
	white-space: nowrap;
}

.bt-client-row__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bt-space-2, 8px);
}

/* El bloque de invitación ocupa toda la fila cuando aparece. */
.bt-invite-slot { grid-column: 1 / -1; }

/* ------------------------------------------------------------ Invitación */

.bt-invite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bt-space-3, 12px);
	margin-block-start: var(--bt-space-4, 16px);
	padding: var(--bt-space-4, 16px);
	border: 1px solid var(--bt-green-300, #c9eadf);
	border-radius: var(--bt-radius-md, 18px);
	background: var(--bt-green-050, #e9faf4);
}

.bt-invite__title {
	flex-basis: 100%;
	margin: 0;
	color: var(--bt-green-700, #0f7d5b);
	font-size: 14px;
	font-weight: var(--bt-w-semi, 620);
}

/* El enlace es largo y hay que poder verlo entero antes de copiarlo: fuente
   monoespaciada y campo que crece hasta ocupar la fila. */
.bt-invite__link {
	flex: 1 1 320px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
	border-radius: var(--bt-radius-sm, 14px);
	background: var(--bt-surface, #fff);
	color: var(--bt-ink-2, #34485e);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
}

/* ---------------------------------------------------------- Perfil y método */

.bt-profile__logo {
	max-height: 88px;
	width: auto;
	margin-block-end: var(--bt-space-4, 16px);
}

.bt-methodology { margin-block-start: var(--bt-space-8, 40px); }

.bt-methodology .bt-datarow__value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	font-weight: var(--bt-w-medium, 540);
}

/* ------------------------------------------------------------- Activación */

.bt-activate {
	max-width: 520px;
	margin-inline: auto;
	margin-block: var(--bt-space-9, 56px);
}

.bt-activate h1 {
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.1;
	letter-spacing: -.04em;
}

/* ------------------------------------------------------- Móvil y tableta */

@media (max-width: 1023px) {
	.bt-dashboard .entry-content {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bt-space-5, 20px);
	}

	.bt-sidebar {
		position: static;
		padding: var(--bt-space-3, 12px);
	}

	.bt-offcanvas__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* 44×44 es el objetivo táctil mínimo recomendado. */
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--bt-line-strong, rgba(138, 158, 181, .28));
		border-radius: var(--bt-radius-sm, 14px);
		background: var(--bt-surface, #fff);
		color: var(--bt-ink, #162638);
		cursor: pointer;
	}

	.bt-offcanvas__toggle svg { width: 22px; height: 22px; }

	/* Cerrado por defecto en móvil; el botón lo despliega. */
	.bt-sidebar__list,
	.bt-sidebar__foot { display: none; }

	.bt-nav-open .bt-sidebar__list { display: grid; margin-block-start: var(--bt-space-3, 12px); }
	.bt-nav-open .bt-sidebar__foot { display: block; }

	.bt-client-row {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: var(--bt-space-2, 8px);
	}

	.bt-client-row__actions { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	.bt-dashboard .bt-main { padding-block: var(--bt-space-5, 20px) var(--bt-space-8, 40px); }
	.bt-client-row { grid-template-columns: minmax(0, 1fr); }
	.bt-client-row__actions .bt-btn { flex: 1 1 auto; }
	.bt-invite__link { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.bt-sidebar { transition: none; }
}