/**
 * Portales estudio — gramática visual común Theme 01 (cliente + artista).
 * Capa compartida: cabecera, carril de navegación, contenedor, ritmo, tarjeta base.
 * Carga: antes de `studio-portal.css` (front) y `studio-artist-panel.css` (admin).
 * Raíz: clase `.studio-pf01` en el shell del portal y en `.studio-artist-panel-wrap`.
 *
 * @package StudioCore
 */

/* ------------------------------------------------------------------------- */
/* Tokens de familia (entorno portal --scpv-* o admin --sap-* o Theme 01)   */
/* ------------------------------------------------------------------------- */
.studio-pf01 {
	--pf01-ink: var(--scpv-ink, var(--sap-ink, var(--studio-theme01-text-primary, #1d2327)));
	--pf01-ink-muted: var(--scpv-ink-muted, var(--sap-ink-muted, var(--studio-theme01-text-secondary, #66665f)));
	--pf01-line: var(--scpv-line, var(--sap-line, var(--studio-theme01-border, #d4d6d1)));
	--pf01-stroke-fine: var(
		--scpv-stroke-fine,
		var(--sap-stroke-fine, color-mix(in srgb, var(--pf01-line) 90%, rgba(11, 11, 12, 0.06)))
	);
	--pf01-surface: var(--scpv-surface, var(--sap-surface, var(--studio-base-surface-card, var(--studio-theme01-white, #ffffff))));
	--pf01-canvas: var(--scpv-canvas, var(--sap-canvas, var(--studio-theme01-bg, #f6f6f4)));
	--pf01-surface-2: var(--scpv-surface-2, var(--sap-surface-2, var(--studio-theme01-d1d-rail-lead-bg, #f0f1ee)));
	--pf01-surface-3: var(
		--scpv-surface-3,
		var(--sap-surface-3, color-mix(in srgb, var(--studio-theme01-bg, #f6f6f4) 38%, var(--pf01-surface) 62%))
	);
	--pf01-accent: var(--scpv-accent, var(--sap-accent, var(--studio-theme01-accent, #1f3a45)));
	--pf01-accent-hover: var(--scpv-accent-hover, var(--sap-accent-hover, var(--studio-theme01-accent-hover, #162c35)));
	--pf01-radius: var(--scpv-radius, var(--sap-radius, 6px));
	--pf01-radius-sm: var(--scpv-radius-sm, var(--sap-radius-sm, 4px));
	--pf01-tab-h: var(--scpv-tab-h, var(--sap-tab-h, 36px));
	--pf01-content-max: 52rem;
	--pf01-block-gap: 1.15rem;
}

/* Ancho útil alineado (paridad estricta columna) */
.studio-pf01.studio-core-portal-shell {
	max-width: var(--pf01-content-max);
}
body.studio-core-artist-panel .studio-pf01.studio-artist-panel-wrap {
	max-width: var(--pf01-content-max);
}

/* ------------------------------------------------------------------------- */
/* Shell: cabecera cromo (hoja clara, sin “hero” marketing)                 */
/* ------------------------------------------------------------------------- */
.studio-pf01 .studio-core-portal-shell__header {
	margin: 0;
	border-radius: var(--pf01-radius) var(--pf01-radius) 0 0;
	border: 1px solid var(--pf01-stroke-fine);
	border-bottom: 0;
	background: var(--pf01-surface);
	box-shadow: none;
	overflow: hidden;
}
.studio-pf01 .studio-core-portal-shell__masthead {
	padding: 0.55rem 0.9rem 0.45rem;
	border-bottom: 0;
}
.studio-pf01 .studio-core-portal-shell__title--screen,
.studio-pf01 .studio-core-portal-shell__title {
	color: var(--pf01-ink);
}

/* Panel artista: refuerzo de título y cromo (sobre reglas en studio-artist-panel.css) */
body.studio-core-artist-panel .studio-pf01 .studio-artist-panel__masthead {
	background: var(--pf01-surface);
	border: 1px solid var(--pf01-stroke-fine);
	border-radius: var(--pf01-radius);
	box-shadow: none;
}
body.studio-core-artist-panel .studio-pf01 .studio-artist-panel__masthead .studio-page-header__title.studio-artist-panel__screen-title,
body.studio-core-artist-panel .studio-pf01 .studio-artist-panel__masthead .studio-page-header__title {
	color: var(--pf01-ink);
}

/* ------------------------------------------------------------------------- */
/* Navegación común (chips Theme 01; sin clases core wp-admin)               */
/* ------------------------------------------------------------------------- */
.studio-pf01 .studio-pf01-nav {
	display: block;
	margin: 0;
	padding: 0.3rem 0.4rem 0.5rem 0.85rem;
	background: var(--pf01-surface);
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--pf01-line) 38%, rgba(11, 11, 12, 0.04));
	border-bottom: 1px solid color-mix(in srgb, var(--pf01-line) 38%, rgba(11, 11, 12, 0.04));
	width: 100%;
	box-sizing: border-box;
}

.studio-pf01 .studio-pf01-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.2rem 0.15rem;
}

.studio-pf01 .studio-pf01-nav__item {
	margin: 0;
}

.studio-pf01 .studio-pf01-nav__item--end {
	margin-left: auto;
}

.studio-pf01 .studio-pf01-nav__link,
.studio-pf01 .studio-core-portal-shell__nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pf01-tab-h);
	padding: 0.2rem 0.55rem;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--pf01-ink-muted);
	background: transparent;
	border: 0;
	border-radius: var(--pf01-radius-sm);
	line-height: 1.2;
	box-sizing: border-box;
	transition:
		background 0.12s ease,
		color 0.12s ease;
}
.studio-pf01 .studio-pf01-nav__link:hover,
.studio-pf01 .studio-core-portal-shell__nav-link:hover {
	color: var(--pf01-ink);
	background: color-mix(in srgb, var(--pf01-surface) 88%, var(--pf01-ink) 6%);
}
.studio-pf01 .studio-pf01-nav__link:focus-visible,
.studio-pf01 .studio-core-portal-shell__nav-link:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--pf01-accent) 40%, transparent);
	outline-offset: 1px;
}
.studio-pf01 .studio-pf01-nav__link.is-active,
.studio-pf01 .studio-core-portal-shell__nav-link.is-active {
	color: var(--pf01-accent);
	font-weight: 600;
	background: color-mix(in srgb, var(--pf01-accent) 9%, var(--pf01-surface) 91%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf01-accent) 20%, var(--pf01-stroke-fine) 80%);
}
.studio-pf01 .studio-pf01-nav__link--muted,
.studio-pf01 .studio-core-portal-shell__nav-link--logout {
	color: color-mix(in srgb, var(--pf01-ink-muted) 85%, var(--pf01-ink) 15%);
	font-weight: 400;
}
.studio-pf01 .studio-pf01-nav__link--muted:hover,
.studio-pf01 .studio-core-portal-shell__nav-link--logout:hover {
	color: var(--pf01-ink);
}

/* Carril en panel artista (misma caja que cabecera) */
.studio-pf01 .studio-artist-panel__tabs.studio-pf01-nav {
	float: none;
}

/* Cuerpo principal: ritmo vertical común */
.studio-pf01 .studio-core-portal-shell__main {
	margin: 0 0 0.5rem 0;
	padding: 1.2rem 0.95rem 1.45rem;
	background: var(--pf01-surface);
	border-radius: 0 0 var(--pf01-radius) var(--pf01-radius);
	border: 1px solid var(--pf01-stroke-fine);
	border-top: 0;
	box-shadow: none;
}

.studio-pf01 .studio-artist-panel__sheet {
	gap: var(--pf01-block-gap);
}

/* Tarjeta canónica Theme 01 (superficie cromo) */
.studio-pf01 .studio-core-portal-ui-card {
	background: var(--pf01-surface);
	border: 1px solid var(--pf01-stroke-fine);
	border-radius: var(--pf01-radius);
	box-shadow: none;
}
.studio-pf01 .studio-artist-panel-wrap > .studio-card {
	background: var(--pf01-surface);
	border: 1px solid var(--pf01-stroke-fine);
	border-radius: var(--pf01-radius);
	box-shadow: none;
}
.studio-pf01 .studio-core-portal-shell__section-title {
	color: var(--pf01-ink);
	border-bottom-color: color-mix(in srgb, var(--pf01-line) 55%, rgba(11, 11, 12, 0.05));
}

/* Aviso integrado en sección: misma cinta que portal */
.studio-pf01 .studio-core-portal-shell__notice {
	background: var(--pf01-surface-3);
	color: var(--pf01-ink);
	border-color: var(--pf01-stroke-fine);
}

/* ------------------------------------------------------------------------- */
/* Responsive — alineado a studio-portal.css (shell)                         */
/* ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.studio-pf01 .studio-pf01-nav,
	.studio-pf01 .studio-core-portal-shell__tabs {
		padding: 0.3rem 0.35rem 0.5rem 0.65rem;
	}
	.studio-pf01 .studio-pf01-nav__list,
	.studio-pf01 .studio-core-portal-shell__nav-list {
		gap: 0.1rem 0.1rem;
	}
	.studio-pf01 .studio-pf01-nav__link,
	.studio-pf01 .studio-core-portal-shell__nav-link {
		padding: 0.2rem 0.45rem;
		font-size: 0.78rem;
	}
}

@media (max-width: 480px) {
	.studio-pf01 .studio-pf01-nav__list,
	.studio-pf01 .studio-core-portal-shell__nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.1rem;
	}
	.studio-pf01 .studio-pf01-nav__item,
	.studio-pf01 .studio-core-portal-shell__nav-item {
		width: 100%;
	}
	.studio-pf01 .studio-pf01-nav__item--end,
	.studio-pf01 .studio-core-portal-shell__nav-item--logout {
		margin-left: 0;
	}
	.studio-pf01
		.studio-pf01-nav__item--end
		.studio-pf01-nav__link,
	.studio-pf01
		.studio-core-portal-shell__nav-item--logout
		.studio-core-portal-shell__nav-link {
		border-top: 1px solid color-mix(in srgb, var(--pf01-line) 30%, var(--pf01-surface) 70%);
		margin-top: 0.2rem;
		padding-top: 0.4rem;
		justify-content: center;
		width: 100%;
	}
	.studio-pf01 .studio-pf01-nav__link,
	.studio-pf01 .studio-core-portal-shell__nav-link {
		width: 100%;
		justify-content: flex-start;
	}
}