/* ORBEAT DJ — base frontend (se amplía en Fase 7) */

:root {
	--orbeat-black: #121212;   /* Fondo base (gris muy oscuro, como orbeat.online) */
	--orbeat-gray: #1e1e1e;    /* Tarjetas y campos */
	--orbeat-white: #ffffff;
	--orbeat-accent: #ff7a00;  /* Naranja de marca ORBEAT */
	--orbeat-radius: 12px;
	--orbeat-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.orbeat-notice {
	background: var(--orbeat-gray);
	color: var(--orbeat-white);
	border-left: 3px solid var(--orbeat-accent);
	border-radius: var(--orbeat-radius);
	padding: 16px 20px;
	font-family: var(--orbeat-font);
	font-size: 15px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------
 * Formulario "Únete como DJ" (Fase 3)
 * ------------------------------------------------------------- */

.orbeat-form-wrap {
	background: var(--orbeat-black);
	color: var(--orbeat-white);
	font-family: var(--orbeat-font);
	border-radius: var(--orbeat-radius);
	padding: 32px clamp(16px, 4vw, 40px);
	max-width: 860px;
	margin: 0 auto;
}

.orbeat-form-title {
	color: var(--orbeat-white);
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 24px;
	border-left: 4px solid var(--orbeat-accent);
	padding-left: 14px;
}

.orbeat-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px 20px;
	margin-bottom: 20px;
}

.orbeat-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.orbeat-field label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.orbeat-form input[type="text"],
.orbeat-form input[type="email"],
.orbeat-form input[type="tel"],
.orbeat-form input[type="file"],
.orbeat-form select,
.orbeat-form textarea {
	background: var(--orbeat-gray);
	border: 1px solid #333333;
	border-radius: 8px;
	color: var(--orbeat-white);
	padding: 12px 14px;
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.orbeat-form input:focus,
.orbeat-form select:focus,
.orbeat-form textarea:focus {
	outline: none;
	border-color: var(--orbeat-accent);
	box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.18);
}

.orbeat-fieldset {
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	padding: 18px 20px;
	margin: 0 0 20px;
}

.orbeat-fieldset legend {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--orbeat-accent);
	padding: 0 8px;
}

.orbeat-genre-group {
	margin-bottom: 14px;
}

.orbeat-genre-group__title {
	color: var(--orbeat-white);
	font-size: 14px;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.orbeat-genre-group__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.orbeat-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
}

.orbeat-check input {
	accent-color: var(--orbeat-accent);
}

.orbeat-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.orbeat-plan-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--orbeat-gray);
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	padding: 18px;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.orbeat-plan-card:hover {
	border-color: var(--orbeat-accent);
	transform: translateY(-2px);
}

.orbeat-plan-card:has(input:checked) {
	border-color: var(--orbeat-accent);
	box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.4);
}

.orbeat-plan-card input {
	accent-color: var(--orbeat-accent);
}

.orbeat-plan-card__name {
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.orbeat-plan-card__price {
	color: var(--orbeat-accent);
	font-weight: 700;
	font-size: 18px;
}

.orbeat-plan-card__price small {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 400;
}

.orbeat-plan-card__desc {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.45;
}

.orbeat-btn {
	display: inline-block;
	border: none;
	border-radius: 999px;
	padding: 14px 34px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.orbeat-btn--primary {
	background: var(--orbeat-accent);
	color: var(--orbeat-black);
}

.orbeat-btn--primary:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.orbeat-notice--success {
	border-left-color: #2ecc71;
}

.orbeat-notice--error {
	border-left-color: #ff4d4f;
	margin-bottom: 18px;
}

/* Honeypot invisible para humanos */
.orbeat-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------
 * Panel "Mi Cuenta DJ" (Fase 4)
 * ------------------------------------------------------------- */

.orbeat-dashboard {
	background: var(--orbeat-black);
	color: var(--orbeat-white);
	font-family: var(--orbeat-font);
	border-radius: var(--orbeat-radius);
	padding: 28px clamp(14px, 3vw, 36px);
	max-width: 1080px;
	margin: 0 auto;
}

.orbeat-dash-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.orbeat-dash-title {
	margin: 0;
	font-size: clamp(22px, 3.5vw, 30px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--orbeat-white);
}

.orbeat-dash-sub {
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}

.orbeat-text-danger { color: #ff4d4f; font-weight: 700; }

.orbeat-btn--ghost {
	background: transparent;
	color: var(--orbeat-accent);
	border: 1px solid var(--orbeat-accent);
	text-decoration: none;
	padding: 10px 22px;
	font-size: 13px;
}

.orbeat-btn--ghost:hover { background: rgba(255, 122, 0, 0.12); }

/* Pestañas */
.orbeat-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	border-bottom: 1px solid #333333;
	margin-bottom: 22px;
}

.orbeat-tab {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--orbeat-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 14px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.orbeat-tab:hover { color: var(--orbeat-white); }

.orbeat-tab.is-active {
	color: var(--orbeat-accent);
	border-bottom-color: var(--orbeat-accent);
}

.orbeat-panel { display: none; }
.orbeat-panel.is-active { display: block; animation: orbeatFade 0.2s ease; }

@keyframes orbeatFade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* Tarjetas / bloques */
.orbeat-card {
	background: var(--orbeat-gray);
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	padding: 20px;
}

.orbeat-card h3 {
	margin: 0 0 14px;
	color: var(--orbeat-white);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.orbeat-brand-grid,
.orbeat-account-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin-bottom: 22px;
}

.orbeat-upload-card {
	background: var(--orbeat-gray);
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.orbeat-upload-card h3 {
	margin: 0;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.8);
}

.orbeat-img-preview {
	background: #161616;
	border: 1px dashed #3d3d3d;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.orbeat-img-preview--logo { height: 140px; }
.orbeat-img-preview--cover { height: 140px; }

.orbeat-img-preview img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.orbeat-img-preview--cover img { object-fit: cover; width: 100%; height: 100%; }

.orbeat-file-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--orbeat-accent);
	color: var(--orbeat-accent);
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	align-self: flex-start;
}

.orbeat-file-btn input[type="file"] { display: none; }

.orbeat-file-btn:hover { background: rgba(255, 122, 0, 0.12); }

.orbeat-file-btn--tile {
	border-style: dashed;
	border-radius: 8px;
	width: 100%;
	height: 100%;
	min-height: 110px;
	align-self: stretch;
}

/* Mensajes de formularios */
.orbeat-form-msg {
	min-height: 1.2em;
	margin: 8px 0 0;
	font-size: 13px;
}
.orbeat-form-msg.is-success { color: #2ecc71; }
.orbeat-form-msg.is-error { color: #ff4d4f; }

.orbeat-usage {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	letter-spacing: 0.03em;
	margin: 0 0 16px;
}

.orbeat-empty { color: rgba(255, 255, 255, 0.45); font-style: italic; }

/* Formularios inline (crear álbum, añadir media) */
.orbeat-inline-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 20px;
}

.orbeat-inline-form input[type="text"],
.orbeat-inline-form input[type="url"] {
	flex: 1;
	min-width: 200px;
}

/* Galería */
.orbeat-album {
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	padding: 16px;
	margin-bottom: 18px;
	background: var(--orbeat-gray);
}

.orbeat-album__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.orbeat-album__head h3 {
	margin: 0;
	font-size: 16px;
	color: var(--orbeat-white);
}

.orbeat-album__head small { color: rgba(255,255,255,0.5); font-weight: 400; }

.orbeat-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
}

.orbeat-photo {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: #161616;
}

.orbeat-photo img { width: 100%; height: 100%; object-fit: cover; }

.orbeat-photo__delete {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	color: #ff4d4f;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.orbeat-photo-add { display: contents; }

/* Listas de medios */
.orbeat-media-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.orbeat-media-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid #333333;
	border-radius: 8px;
	margin-bottom: 8px;
	background: var(--orbeat-gray);
}

.orbeat-media-list__title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.orbeat-media-list a { color: var(--orbeat-accent); text-decoration: none; font-size: 13px; }

.orbeat-link-danger {
	background: none;
	border: none;
	color: #ff4d4f;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
}

.orbeat-link-danger:hover { text-decoration: underline; }

/* Eventos */
.orbeat-details {
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	background: var(--orbeat-gray);
	margin-bottom: 12px;
	padding: 0 16px;
}

.orbeat-details summary {
	cursor: pointer;
	padding: 14px 0;
	color: var(--orbeat-white);
	font-size: 15px;
	list-style: none;
}

.orbeat-details summary::-webkit-details-marker { display: none; }

.orbeat-details summary::before {
	content: "▸ ";
	color: var(--orbeat-accent);
}

.orbeat-details[open] summary::before { content: "▾ "; }

.orbeat-details form { padding: 4px 0 18px; }

.orbeat-actions-row {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 12px;
}

.orbeat-plain-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.orbeat-plain-list li {
	padding: 6px 0;
	border-bottom: 1px solid #2c2c2c;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 640px) {
	.orbeat-tabs { overflow-x: auto; flex-wrap: nowrap; }
	.orbeat-tab { white-space: nowrap; }
}

/* ---------------------------------------------------------------
 * Verificación y referencia de pago (Fase 3.5)
 * ------------------------------------------------------------- */

.orbeat-field--full { grid-column: 1 / -1; }

.orbeat-hint {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.orbeat-payref {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: rgba(255, 122, 0, 0.08);
	border: 1px solid var(--orbeat-accent);
	border-radius: var(--orbeat-radius);
	padding: 18px 20px;
	margin: 0 0 20px;
}

.orbeat-payref__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--orbeat-accent);
}

.orbeat-payref__code {
	font-family: "SF Mono", Consolas, Menlo, monospace;
	font-size: clamp(22px, 4vw, 30px);
	letter-spacing: 0.15em;
	color: var(--orbeat-white);
}

.orbeat-payref__help {
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------
 * Cards de membresías [orbeat_dj_plans]
 * ------------------------------------------------------------- */

.orbeat-pricing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	font-family: var(--orbeat-font);
}

.orbeat-pricing__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--orbeat-gray);
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	padding: 28px 24px;
	color: var(--orbeat-white);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.orbeat-pricing__card:hover {
	border-color: var(--orbeat-accent);
	transform: translateY(-3px);
}

.orbeat-pricing__card.is-featured {
	border-color: var(--orbeat-accent);
	box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.4);
}

.orbeat-pricing__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--orbeat-accent);
	color: #121212;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 14px;
	white-space: nowrap;
}

.orbeat-pricing__name {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--orbeat-white);
}

.orbeat-pricing__price {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	color: var(--orbeat-accent);
	line-height: 1.1;
}

.orbeat-pricing__price span {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 4px;
}

.orbeat-pricing__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
	line-height: 1.5;
}

.orbeat-pricing__features {
	list-style: none;
	margin: 4px 0 8px;
	padding: 0;
	flex: 1;
}

.orbeat-pricing__features li {
	padding: 7px 0 7px 24px;
	position: relative;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	border-bottom: 1px solid #2c2c2c;
}

.orbeat-pricing__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--orbeat-accent);
	font-weight: 700;
}

.orbeat-pricing__cta {
	text-align: center;
	text-decoration: none;
	align-self: stretch;
}

/* ---------------------------------------------------------------
 * Perfil público del DJ (Fase 5)
 * ------------------------------------------------------------- */

body.orbeat-profile-body {
	margin: 0;
	background: var(--orbeat-black);
	color: var(--orbeat-white);
	font-family: var(--orbeat-font);
}

.orbeat-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px clamp(16px, 4vw, 48px);
	background: rgba(18, 18, 18, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #2c2c2c;
}

.orbeat-topbar__brand {
	color: var(--orbeat-white);
	text-decoration: none;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 16px;
}

.orbeat-topbar__brand:hover { color: var(--orbeat-accent); }

.orbeat-topbar__cta { padding: 9px 20px; font-size: 12px; text-decoration: none; }

/* Hero */
.orbeat-hero {
	position: relative;
	min-height: clamp(380px, 55vh, 560px);
	background-color: var(--orbeat-gray);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.orbeat-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,18,18,0.25) 0%, rgba(18,18,18,0.75) 60%, var(--orbeat-black) 100%);
}

.orbeat-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px clamp(16px, 4vw, 48px) 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.orbeat-hero__logo {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--orbeat-accent);
	background: var(--orbeat-black);
}

.orbeat-hero__name {
	margin: 0;
	font-size: clamp(34px, 7vw, 64px);
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--orbeat-white);
}

.orbeat-hero__location {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
}

.orbeat-hero__genres { display: flex; flex-wrap: wrap; gap: 8px; }

.orbeat-chip {
	background: rgba(255, 122, 0, 0.14);
	border: 1px solid var(--orbeat-accent);
	color: var(--orbeat-accent);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.orbeat-hero__socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.orbeat-social-pill {
	background: var(--orbeat-gray);
	border: 1px solid #3d3d3d;
	color: var(--orbeat-white);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.orbeat-social-pill:hover {
	border-color: var(--orbeat-accent);
	color: var(--orbeat-accent);
	transform: translateY(-1px);
}

/* Nav de secciones */
.orbeat-section-nav {
	position: sticky;
	top: 53px;
	z-index: 40;
	display: flex;
	gap: 4px;
	overflow-x: auto;
	padding: 0 clamp(16px, 4vw, 48px);
	background: rgba(18, 18, 18, 0.95);
	border-bottom: 1px solid #2c2c2c;
}

.orbeat-section-nav a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 14px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.orbeat-section-nav a:hover {
	color: var(--orbeat-accent);
	border-bottom-color: var(--orbeat-accent);
}

/* Cuerpo y secciones */
.orbeat-profile__body {
	max-width: 1080px;
	margin: 0 auto;
	padding: 20px clamp(16px, 4vw, 48px) 60px;
}

.orbeat-section { padding: 44px 0 8px; scroll-margin-top: 110px; }

.orbeat-section__title {
	margin: 0 0 24px;
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--orbeat-white);
	border-left: 4px solid var(--orbeat-accent);
	padding-left: 14px;
}

.orbeat-bio {
	color: rgba(255, 255, 255, 0.82);
	font-size: 16px;
	line-height: 1.75;
	max-width: 760px;
}

/* Galería */
.orbeat-album-title {
	margin: 26px 0 12px;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.orbeat-gal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}

.orbeat-gal-photo {
	padding: 0;
	border: none;
	background: var(--orbeat-gray);
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 1;
	cursor: zoom-in;
}

.orbeat-gal-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
	display: block;
}

.orbeat-gal-photo:hover img { transform: scale(1.05); }

/* Lightbox */
.orbeat-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(10, 10, 10, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	cursor: zoom-out;
}

.orbeat-lightbox img {
	max-width: 100%;
	max-height: 92vh;
	border-radius: 8px;
}

.orbeat-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	background: none;
	border: none;
	color: var(--orbeat-white);
	font-size: 34px;
	cursor: pointer;
	line-height: 1;
}

/* Videos */
.orbeat-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.orbeat-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: 10px;
	background: var(--orbeat-gray);
}

.orbeat-media-caption {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
}

/* Tracks */
.orbeat-track-list { display: flex; flex-direction: column; gap: 16px; }

.orbeat-track iframe {
	width: 100%;
	border: none;
	border-radius: 10px;
	background: var(--orbeat-gray);
}

.orbeat-track .orbeat-media-caption { margin: 0 0 8px; }

/* Press kit */
.orbeat-presskit { display: flex; flex-wrap: wrap; gap: 14px; }
.orbeat-presskit .orbeat-btn { text-decoration: none; }

/* Eventos */
.orbeat-event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

.orbeat-event-card {
	background: var(--orbeat-gray);
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.orbeat-event-card:hover {
	border-color: var(--orbeat-accent);
	transform: translateY(-3px);
}

.orbeat-event-card__img { aspect-ratio: 16 / 9; overflow: hidden; }
.orbeat-event-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.orbeat-event-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.orbeat-event-card__date {
	color: var(--orbeat-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.orbeat-event-card__body h3 {
	margin: 0;
	font-size: 18px;
	color: var(--orbeat-white);
	line-height: 1.3;
}

.orbeat-event-card__venue { margin: 0; color: rgba(255,255,255,0.65); font-size: 13px; }
.orbeat-event-card__desc { margin: 0; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.55; flex: 1; }
.orbeat-event-card__cta { margin-top: 8px; align-self: flex-start; text-decoration: none; padding: 8px 18px; font-size: 12px; }

/* Página no disponible / footer */
.orbeat-profile-unavailable {
	min-height: 55vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 40px 20px;
}

.orbeat-profile-unavailable h1 { margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }
.orbeat-profile-unavailable p { color: rgba(255,255,255,0.6); margin: 0 0 8px; }
.orbeat-profile-unavailable .orbeat-btn { text-decoration: none; }

.orbeat-profile-footer {
	border-top: 1px solid #2c2c2c;
	text-align: center;
	padding: 26px 16px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
}

.orbeat-profile-footer a { color: var(--orbeat-accent); text-decoration: none; }

/* ---------------------------------------------------------------
 * Ajustes v1.6: foto de perfil, logo propio, iconos de redes
 * ------------------------------------------------------------- */

/* Avatar redondo del hero (foto de perfil) */
.orbeat-hero__avatar {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--orbeat-accent);
	background: var(--orbeat-black);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* Logo de marca del DJ: su propio lugar, esquina superior derecha del hero */
.orbeat-hero__brandlogo {
	position: absolute;
	top: 22px;
	right: clamp(16px, 4vw, 48px);
	max-height: 64px;
	max-width: 160px;
	object-fit: contain;
	z-index: 2;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Iconos circulares de redes */
.orbeat-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--orbeat-gray);
	border: 1px solid #3d3d3d;
	color: var(--orbeat-white);
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.orbeat-social-icon:hover {
	border-color: var(--orbeat-accent);
	color: var(--orbeat-accent);
	background: rgba(255, 122, 0, 0.08);
	transform: translateY(-2px);
}

.orbeat-social-icon svg { display: block; }

/* Panel: vista previa de la foto de perfil + hints + slider de encuadre */
.orbeat-img-preview--photo { height: 140px; }

.orbeat-img-preview--photo img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--orbeat-accent);
}

.orbeat-img-hint {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	line-height: 1.5;
}

.orbeat-cover-pos { display: flex; flex-direction: column; gap: 8px; }

.orbeat-cover-pos label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
}

.orbeat-cover-pos input[type="range"] {
	width: 100%;
	accent-color: var(--orbeat-accent);
	cursor: grab;
}

.orbeat-cover-pos input[type="range"]:active { cursor: grabbing; }

/* ---------------------------------------------------------------
 * v1.6.1 — Pestañas del panel: píldoras en escala de grises con
 * texto naranja al activarse. Con resets defensivos para que el
 * tema del sitio no pueda pisar el estilo (fondos rosas, etc.).
 * ------------------------------------------------------------- */

.orbeat-dashboard .orbeat-tabs {
	border-bottom: none;
	gap: 8px;
	padding-bottom: 4px;
}

.orbeat-dashboard button.orbeat-tab {
	-webkit-appearance: none;
	appearance: none;
	background: #1a1a1a;
	background-image: none;
	border: 1px solid #333333;
	border-radius: 999px;
	box-shadow: none;
	text-shadow: none;
	outline: none;
	color: #9a9a9a;
	font-family: var(--orbeat-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 10px 18px;
	margin: 0;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.orbeat-dashboard button.orbeat-tab:hover {
	background: #242424;
	border-color: #4a4a4a;
	color: #d6d6d6;
}

.orbeat-dashboard button.orbeat-tab.is-active,
.orbeat-dashboard button.orbeat-tab.is-active:hover {
	background: #2b2b2b;
	border-color: var(--orbeat-accent);
	color: var(--orbeat-accent);
}

.orbeat-dashboard button.orbeat-tab:focus-visible {
	border-color: var(--orbeat-accent);
	box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.25);
}

/* ---------------------------------------------------------------
 * v1.6.1 — Grid de fotos del panel: el tile "+Fotos" es una celda
 * real del grid (adiós display:contents que rompía el layout).
 * ------------------------------------------------------------- */

.orbeat-photo-grid { align-items: stretch; }

.orbeat-photo-grid .orbeat-photo {
	min-width: 0;
	margin: 0;
	position: relative;
}

form.orbeat-photo-add {
	display: flex;
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	min-width: 0;
}

form.orbeat-photo-add .orbeat-file-btn--tile {
	width: 100%;
	height: 100%;
	min-height: 0;
	align-self: stretch;
}

form.orbeat-photo-add .orbeat-form-msg {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 4px;
	margin: 0;
	font-size: 11px;
	text-align: center;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * v1.6.1 — Perfil público: cabecera de álbum con descarga ZIP
 * ------------------------------------------------------------- */

.orbeat-album-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 26px 0 12px;
}

.orbeat-album-head .orbeat-album-title { margin: 0; }

.orbeat-album-dl {
	color: var(--orbeat-accent);
	border: 1px solid var(--orbeat-accent);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.orbeat-album-dl:hover { background: rgba(255, 122, 0, 0.12); color: var(--orbeat-accent); }

/* ---------------------------------------------------------------
 * v1.6.1 — Lightbox con slider
 * ------------------------------------------------------------- */

.orbeat-lightbox__prev,
.orbeat-lightbox__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border: 1px solid #4a4a4a;
	border-radius: 50%;
	background: rgba(30, 30, 30, 0.85);
	color: var(--orbeat-white);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, color 0.15s ease;
	padding: 0 0 4px;
}

.orbeat-lightbox__prev { left: 18px; }
.orbeat-lightbox__next { right: 18px; }

.orbeat-lightbox__prev:hover,
.orbeat-lightbox__next:hover {
	border-color: var(--orbeat-accent);
	color: var(--orbeat-accent);
}

.orbeat-lightbox__counter {
	position: absolute;
	top: 22px;
	left: 24px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	letter-spacing: 0.1em;
	font-family: var(--orbeat-font);
}

@media (max-width: 640px) {
	.orbeat-lightbox__prev { left: 8px; }
	.orbeat-lightbox__next { right: 8px; }
	.orbeat-lightbox__prev, .orbeat-lightbox__next { width: 42px; height: 42px; font-size: 24px; }
}

/* ---------------------------------------------------------------
 * v1.6.2 — Galería y lightbox en escala de grises. Resets con
 * !important porque los temas suelen estilar <button> globalmente
 * (bordes/rellenos rosas) y este markup vive dentro de su CSS.
 * ------------------------------------------------------------- */

button.orbeat-gal-photo,
.orbeat-profile button.orbeat-gal-photo {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--orbeat-gray) !important;
	background-image: none !important;
	border: 1px solid #2e2e2e !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 10px !important;
	padding: 0 !important;
	transition: border-color 0.15s ease;
}

button.orbeat-gal-photo:hover,
button.orbeat-gal-photo:focus,
button.orbeat-gal-photo:focus-visible,
button.orbeat-gal-photo:active {
	border-color: #6a6a6a !important;
	background: var(--orbeat-gray) !important;
	outline: none !important;
	box-shadow: none !important;
}

.orbeat-lightbox button,
.orbeat-lightbox button:hover,
.orbeat-lightbox button:focus,
.orbeat-lightbox button:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	text-shadow: none !important;
	outline: none !important;
}

.orbeat-lightbox button.orbeat-lightbox__prev,
.orbeat-lightbox button.orbeat-lightbox__next {
	background: rgba(34, 34, 34, 0.9) !important;
	border: 1px solid #555555 !important;
	color: #e6e6e6 !important;
	box-shadow: none !important;
}

.orbeat-lightbox button.orbeat-lightbox__prev:hover,
.orbeat-lightbox button.orbeat-lightbox__next:hover {
	border-color: #9a9a9a !important;
	color: #ffffff !important;
	background: rgba(48, 48, 48, 0.95) !important;
}

.orbeat-lightbox button.orbeat-lightbox__close {
	background: transparent !important;
	border: none !important;
	color: #e6e6e6 !important;
	box-shadow: none !important;
}

.orbeat-lightbox button.orbeat-lightbox__close:hover { color: #ffffff !important; }

/* Contador de caracteres de la biografía */
.orbeat-char-count {
	align-self: flex-end;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
	font-family: var(--orbeat-font);
}

.orbeat-char-count.is-near-limit { color: var(--orbeat-accent); }

/* ---------------------------------------------------------------
 * v1.7 — Compartir perfil (QR) y encuadre del avatar
 * ------------------------------------------------------------- */

.orbeat-share-card { margin-top: 22px; }

.orbeat-share-card__grid {
	display: flex;
	gap: 22px;
	align-items: center;
	flex-wrap: wrap;
}

.orbeat-qr {
	background: #ffffff;
	border-radius: 12px;
	padding: 10px;
	line-height: 0;
	flex: 0 0 auto;
}

.orbeat-qr img { width: 180px; height: 180px; display: block; }

.orbeat-share-card__info {
	flex: 1;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.orbeat-share-card__info p {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.55;
}

.orbeat-share-row { display: flex; gap: 10px; }

.orbeat-share-row .orbeat-share-url {
	flex: 1;
	background: var(--orbeat-gray);
	border: 1px solid #333;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.85);
	padding: 10px 12px;
	font-size: 13px;
	min-width: 0;
}

.orbeat-copy-share { padding: 9px 18px; font-size: 12px; white-space: nowrap; }

.orbeat-qr-download {
	color: var(--orbeat-accent);
	font-size: 13px;
	text-decoration: none;
}

.orbeat-qr-download:hover { text-decoration: underline; }

.orbeat-brand-delete { align-self: flex-start; }

/* ---------------------------------------------------------------
 * v1.7 — Candados de redes por plan y QR local
 * ------------------------------------------------------------- */

.orbeat-field--locked { opacity: 0.55; }

.orbeat-lock-badge {
	display: inline-block;
	margin-left: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--orbeat-accent);
	text-transform: none;
}

.orbeat-qr {
	background: #ffffff;
	border-radius: 10px;
	padding: 10px;
	width: 180px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.orbeat-qr svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------
 * Directorio de DJs (Fase 6)
 * ------------------------------------------------------------- */

.orbeat-directory {
	background: var(--orbeat-black);
	border-radius: var(--orbeat-radius);
	padding: 24px clamp(14px, 3vw, 32px) 34px;
	font-family: var(--orbeat-font);
	color: var(--orbeat-white);
}

.orbeat-dir-filters {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}

@media (max-width: 900px) {
	.orbeat-dir-filters { grid-template-columns: 1fr 1fr; }
	.orbeat-dir-filters .orbeat-dir-search { grid-column: 1 / -1; }
}

.orbeat-dir-filters input[type="search"],
.orbeat-dir-filters select {
	background: var(--orbeat-gray);
	border: 1px solid #333333;
	border-radius: 8px;
	color: var(--orbeat-white);
	padding: 11px 13px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.orbeat-dir-filters input[type="search"]:focus,
.orbeat-dir-filters select:focus {
	outline: none;
	border-color: var(--orbeat-accent);
	box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.18);
}

.orbeat-dir-count {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	margin: 0 0 18px;
}

.orbeat-dir-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	transition: opacity 0.15s ease;
}

.orbeat-dir-grid.is-loading { opacity: 0.45; pointer-events: none; }

/* Card de DJ */
.orbeat-dj-card {
	background: var(--orbeat-gray);
	border: 1px solid #333333;
	border-radius: var(--orbeat-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.orbeat-dj-card:hover {
	border-color: var(--orbeat-accent);
	transform: translateY(-3px);
}

.orbeat-dj-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background-color: #161616;
	background-size: cover;
	background-position: center;
}

.orbeat-dj-card__avatar {
	position: absolute;
	left: 16px;
	bottom: -26px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--orbeat-gray);
	background: var(--orbeat-black);
}

.orbeat-dj-card__plan {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(18, 18, 18, 0.85);
	border: 1px solid var(--orbeat-accent);
	color: var(--orbeat-accent);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 10px;
}

.orbeat-dj-card__body {
	padding: 34px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.orbeat-dj-card__name { margin: 0; font-size: 18px; line-height: 1.2; }

.orbeat-dj-card__name a {
	color: var(--orbeat-white);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 800;
}

.orbeat-dj-card__name a:hover { color: var(--orbeat-accent); }

.orbeat-dj-card__location {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

.orbeat-dj-card__genres { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.orbeat-chip--sm { font-size: 10px; padding: 3px 10px; }

.orbeat-dj-card__cta {
	margin-top: 10px;
	text-align: center;
	text-decoration: none;
	padding: 10px 20px;
	font-size: 12px;
}

.orbeat-dir-more-wrap { text-align: center; margin-top: 26px; }
.orbeat-dir-more { text-decoration: none; }

/* ---------------------------------------------------------------
 * v1.8.2 — Ancho completo en temas con contenedor estrecho
 * (Hello Elementor, etc.). Los bloques del plugin "rompen" el
 * contenedor del tema y ocupan todo el viewport, centrando su
 * contenido interno con padding calculado.
 * ------------------------------------------------------------- */

.orbeat-dashboard,
.orbeat-directory {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	padding-left: max(clamp(14px, 3vw, 36px), calc((100vw - 1080px) / 2));
	padding-right: max(clamp(14px, 3vw, 36px), calc((100vw - 1080px) / 2));
}

.orbeat-form-wrap {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	padding-left: max(clamp(16px, 4vw, 40px), calc((100vw - 860px) / 2));
	padding-right: max(clamp(16px, 4vw, 40px), calc((100vw - 860px) / 2));
}