/**
 * OneDB Studio — estilos de widgets. Replica el look del mockup (brutalista mono).
 */

.onedb-empty,
.onedb-vp--empty {
	border: 1px dashed var(--onedb-line);
	padding: 2rem;
	font-family: var(--onedb-font-mono);
	font-size: 12px;
	color: var(--onedb-gray);
	text-align: center;
}

/* =========================================================
   VIDEO PLAYER
   ========================================================= */
.onedb-vp { --onedb-vp-accent: var(--onedb-orange); }

.onedb-vp__screen {
	position: relative;
	background: #0a0a0a;
	border: 1px solid var(--onedb-dark);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.onedb-vp__media,
.onedb-vp__media video,
.onedb-vp__media iframe,
.onedb-vp__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}
.onedb-vp__label {
	position: absolute;
	top: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(0, 0, 0, 0.75);
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.35rem 0.75rem;
	font-size: 9px;
	letter-spacing: 0.15em;
}
.onedb-vp__label--tl { left: 1rem; }
.onedb-vp__label--tr { right: 1rem; }

/* Icono del botón de lightbox (selector de iconos de Elementor). */
.onedb-vp__open svg, .onedb-vp__open i { width: 1em; height: 1em; fill: currentColor; }

/* Barra de control */
.onedb-vp__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
	color: var(--onedb-dark);
	font-size: 11px;
	flex-wrap: wrap;
}
.onedb-vp-modal .onedb-vp__bar { color: #fff; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; }
.onedb-vp__bar-l, .onedb-vp__bar-r { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.onedb-vp__bar-r { white-space: nowrap; }
.onedb-vp__ctl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem;
	font-size: 16px;
	line-height: 0;
	flex-shrink: 0;
	border-radius: 9999px;
	border: 1px solid var(--onedb-line);
	background: rgba(0,0,0,.03);
	color: var(--onedb-vp-accent, var(--onedb-orange));
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.onedb-vp-modal .onedb-vp__ctl { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.05); }
/* Aislamiento del tema en los reproductores (especificidad 0, no pisa lo de abajo). */
.onedb-vp :where(button), .onedb-vp-modal :where(button), .onedb-pmodal :where(button) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border-radius: 0;
	font: inherit;
	text-shadow: none;
	box-shadow: none;
	outline: none;
	cursor: pointer;
}
.onedb-vp :where(button):hover, .onedb-vp-modal :where(button):hover, .onedb-pmodal :where(button):hover,
.onedb-vp :where(button):focus, .onedb-vp-modal :where(button):focus, .onedb-pmodal :where(button):focus {
	box-shadow: none; text-shadow: none; outline: none; transform: none; filter: none;
}

/* Tamaño de los iconos SVG de la barra. */
.onedb-vp__ctl .onedb-vp__i { width: 1em; height: 1em; min-width: 10px; min-height: 10px; display: block; flex-shrink: 0; }

/* Un solo icono por botón: el JS sustituye el contenido del <svg> al cambiar
   de estado (play↔pause, volume↔mute). No hay iconos ocultos en el DOM. */

/* Estado pantalla completa: el contenedor incluye la barra de controles. */
.onedb-vp:fullscreen,
.onedb-vp-modal__inner:fullscreen,
.onedb-pmodal__screen:fullscreen {
	width: 100%;
	height: 100%;
	max-width: none;
	background: #000;
	display: flex;
	flex-direction: column;
	padding: 0;
}
.onedb-vp:fullscreen .onedb-vp__screen,
.onedb-vp-modal__inner:fullscreen .onedb-vp__screen,
.onedb-pmodal__screen:fullscreen .onedb-pmodal__stage {
	flex: 1;
	aspect-ratio: auto;
	min-height: 0;
	margin: 0;
}
.onedb-vp:fullscreen video,
.onedb-vp:fullscreen iframe,
.onedb-vp-modal__inner:fullscreen video,
.onedb-pmodal__screen:fullscreen video {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}
.onedb-vp:fullscreen .onedb-vp__bar,
.onedb-pmodal__screen:fullscreen .onedb-vp__bar {
	color: #fff;
	background: rgba(0,0,0,.85);
	padding: 0.85rem 1rem;
	flex-shrink: 0;
}
.onedb-vp:fullscreen .onedb-vp__ctl {
	border-color: rgba(255,255,255,.15);
	background: rgba(255,255,255,.08);
}
.onedb-vp:fullscreen .onedb-vp__timeline { background: rgba(255,255,255,.15); }

/* Barra de volumen */
.onedb-vp__vol {
	width: 72px;
	height: 4px;
	margin: 0;
	accent-color: var(--onedb-vp-accent, var(--onedb-orange));
	cursor: pointer;
}

.onedb-vp__timeline { flex: 1 1 120px; min-width: 90px; height: 6px; background: rgba(0,0,0,.1); position: relative; cursor: pointer; }
.onedb-vp-modal .onedb-vp__timeline { background: rgba(255,255,255,.1); }
.onedb-vp__progress { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--onedb-vp-accent, var(--onedb-orange)); }

/* Lightbox */
.onedb-vp-modal,
.onedb-pmodal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(12px);
	padding: 1rem;
}
.onedb-vp-modal.is-open,
.onedb-pmodal.is-open { display: flex; }
.onedb-vp-modal__inner,
.onedb-pmodal__inner {
	position: relative;
	width: 100%;
	max-width: 80rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.onedb-vp-modal__head,
.onedb-pmodal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding-bottom: 1rem;
	color: #fff;
}
.onedb-vp-modal__head-l { display: flex; align-items: center; gap: 0.75rem; }
.onedb-vp-modal__kicker,
.onedb-pmodal__kicker { color: var(--onedb-orange); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.onedb-pmodal__title,
.onedb-vp-modal .lang-en { color: #fff; }
.onedb-pmodal__title { font-size: 1.4rem; font-weight: 800; margin: 0.25rem 0 0; color: #fff; }
.onedb-vp-modal .onedb-vp-modal__close,
.onedb-pmodal .onedb-pmodal__close {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 9999px;
	background: rgba(255,255,255,.05);
	color: #fff;
	padding: 0.5rem 1rem;
	font-family: var(--onedb-font-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.onedb-vp-modal .onedb-vp-modal__close:hover,
.onedb-pmodal .onedb-pmodal__close:hover {
	background: rgba(255,255,255,.15);
	color: #fff;
	border-color: rgba(255,255,255,.35);
}
.onedb-vp__screen--modal { flex: 1; margin: 2rem 0; }

/* =========================================================
   PORTFOLIO
   ========================================================= */
.onedb-portfolio__head { margin-bottom: 3rem; }
.onedb-portfolio__title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; margin: 0.5rem 0 0; color: var(--onedb-dark); }
.onedb-portfolio__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.onedb-portfolio[data-cols="2"] .onedb-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
.onedb-portfolio[data-cols="3"] .onedb-portfolio__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .onedb-portfolio__grid { grid-template-columns: 1fr !important; } }

.onedb-card { cursor: pointer; display: flex; flex-direction: column; }
.onedb-card__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--onedb-dark);
	background: var(--onedb-dark);
}
.onedb-card__thumb, .onedb-card__preview {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.onedb-card__thumb { opacity: 0.8; transition: opacity .5s, transform .7s; }
.onedb-card__thumb--placeholder { background: linear-gradient(135deg, #222, #111); opacity: 1; }
.onedb-card__preview { opacity: 0; transition: opacity .5s; }
.onedb-card:hover .onedb-card__thumb { opacity: 0; transform: scale(1.05); }
.onedb-card__vignette { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent 50%, rgba(0,0,0,.1)); }
.onedb-card__play {
	position: absolute; inset: 0; margin: auto;
	width: 4rem; height: 4rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: 9999px;
	border: 1px solid rgba(255,255,255,.4);
	background: rgba(0,0,0,.6);
	color: #fff; backdrop-filter: blur(4px);
	transition: all .3s;
}
.onedb-card:hover .onedb-card__play { background: var(--onedb-orange); border-color: var(--onedb-orange); transform: scale(1.1); }
.onedb-card__badge { position: absolute; display: flex; align-items: center; gap: 0.35rem; font-size: 10px; letter-spacing: 0.1em; color: #fff; background: rgba(0,0,0,.8); padding: 0.25rem 0.5rem; border: 1px solid rgba(255,255,255,.1); }
.onedb-card__badge--time { bottom: 1rem; right: 1rem; }
.onedb-card__badge--time [data-lucide] { color: var(--onedb-orange); }
.onedb-card__badge--cat { top: 1rem; left: 1rem; background: var(--onedb-dark); text-transform: uppercase; }
.onedb-card__body { margin-top: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.onedb-card__name { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: var(--onedb-dark); margin: 0; transition: color .3s; }
.onedb-card:hover .onedb-card__name { color: var(--onedb-orange); }
.onedb-card__desc { margin: 0.5rem 0 0; color: var(--onedb-gray); font-size: 0.95rem; line-height: 1.6; }
.onedb-card__tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.onedb-card__tag { background: #f3f4f6; color: var(--onedb-gray); padding: 0.25rem 0.6rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.onedb-card__arrow { color: var(--onedb-dark); font-weight: 700; transition: transform .3s; }
.onedb-card:hover .onedb-card__arrow { transform: translate(3px, -3px); }

/* Portfolio modal cinematográfico */
.onedb-pmodal__body { flex: 1; display: grid; grid-template-columns: 3fr 1fr; gap: 1.5rem; margin: 1.5rem 0; min-height: 0; }
@media (max-width: 900px) { .onedb-pmodal__body { grid-template-columns: 1fr; } }
/* Pantalla = escenario (vídeo + etiquetas) arriba y barra de controles abajo. */
.onedb-pmodal__screen { position: relative; background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; overflow: hidden; }
.onedb-pmodal__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
.onedb-pmodal__media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.onedb-pmodal__video { width: 100%; max-height: 60vh; object-fit: contain; transition: filter .3s; border: 0; }

/* Etiqueta de fuente (arriba izquierda) con punto REC parpadeante. */
.onedb-pmodal__srclabel { position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 10px; letter-spacing: 0.05em; color: rgba(255,255,255,.6); background: rgba(0,0,0,.6); padding: 0.25rem 0.5rem; }
.onedb-pmodal__rec { width: 6px; height: 6px; border-radius: 9999px; background: #dc2626; animation: onedb-pulse 1.4s ease-in-out infinite; }
@keyframes onedb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.onedb-pmodal__lut-label { position: absolute; top: 1rem; right: 1rem; font-size: 10px; color: rgba(255,255,255,.6); background: rgba(0,0,0,.6); padding: 0.25rem 0.5rem; }
.onedb-pmodal__lut-label span { color: var(--onedb-orange); font-weight: 700; }

/* Badge de formato en la barra (4K PRORES). */
.onedb-pmodal__badge { border: 1px solid rgba(255,255,255,.15); padding: 0.1rem 0.5rem; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,.45); white-space: nowrap; }

.onedb-pmodal__inspector { background: #171717; border: 1px solid rgba(255,255,255,.1); padding: 1.5rem; color: #fff; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.onedb-pmodal__insp-head { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 0.75rem; margin-bottom: 1rem; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.onedb-pmodal__insp-head [data-lucide] { color: var(--onedb-orange); }
.onedb-pmodal__lbl { display: block; font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: 0.1em; margin: 1rem 0 0.5rem; }
.onedb-pmodal__field { margin-bottom: 0.9rem; }
.onedb-pmodal__field .onedb-pmodal__lbl { margin: 0 0 0.25rem; }
.onedb-pmodal__val { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.onedb-pmodal__note { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: 10px; line-height: 1.5; color: rgba(255,255,255,.4); }

/* Pie del lightbox (créditos). */
.onedb-pmodal__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; font-size: 10px; color: rgba(255,255,255,.4); }

/* Barra de controles dentro del modal de Proyectos (tema oscuro). */
.onedb-pmodal .onedb-vp__bar { color: #fff; background: rgba(0,0,0,.8); border-top: 1px solid rgba(255,255,255,.1); padding: 0.85rem 1rem; margin: 0; }
.onedb-pmodal .onedb-vp__ctl { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.onedb-pmodal .onedb-vp__ctl:hover { background: rgba(255,255,255,.15); }
.onedb-pmodal .onedb-vp__timeline { background: rgba(255,255,255,.12); }

/* Título del proyecto en la cabecera del modal (gana al tema). */
.onedb-pmodal .onedb-pmodal__title { color: #fff; font-size: 1.4rem; font-weight: 800; margin: 0.25rem 0 0; }
.onedb-pmodal__luts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
/* Especificidad reforzada para que el tema no pise estos botones. */
.onedb-pmodal .onedb-pmodal__luts button {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.35rem;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 0;
	background: rgba(0,0,0,.4);
	color: rgba(255,255,255,.6);
	font-family: var(--onedb-font-mono);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.onedb-pmodal .onedb-pmodal__luts button:hover { background: rgba(255,255,255,.08); color: #fff; }
.onedb-pmodal .onedb-pmodal__luts button.is-active { background: var(--onedb-orange); color: #fff; border-color: var(--onedb-orange); }
.onedb-pmodal__meters { display: flex; flex-direction: column; gap: 0.5rem; }
.onedb-pmodal__meter-top { display: flex; justify-content: space-between; font-size: 9px; color: rgba(255,255,255,.6); margin-bottom: 0.2rem; }
.onedb-pmodal__meter-track { height: 4px; background: #000; overflow: hidden; }
.onedb-pmodal__meter-bar { height: 100%; width: 50%; transition: width .1s linear; }
.onedb-pmodal__meter-bar.is-green { background: #10b981; }
.onedb-pmodal__meter-bar.is-orange { background: var(--onedb-orange); }
.onedb-pmodal__featured { display: inline-block; margin-top: 1.5rem; color: var(--onedb-orange); font-size: 11px; text-decoration: none; }

/* =========================================================
   PILLARS
   ========================================================= */
.onedb-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1000px) { .onedb-pillars { grid-template-columns: 1fr; } }
.onedb-pillar {
	border: 1px solid var(--onedb-line);
	padding: 2.5rem;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #fff;
	transition: border-color .3s, background .3s;
}
.onedb-pillar:hover { border-color: var(--onedb-dark); }
.onedb-pillar.is-open { border-color: var(--onedb-orange); background: #fafafa; }
.onedb-pillar__top { display: flex; align-items: center; justify-content: space-between; }
.onedb-pillar__icon { padding: 0.75rem; background: #f3f4f6; color: var(--onedb-dark); font-size: 1.5rem; display: inline-flex; transition: all .3s; }
.onedb-pillar__icon svg, .onedb-pillar__icon i { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.onedb-pillar:hover .onedb-pillar__icon { background: var(--onedb-dark); color: #fff; }
.onedb-pillar.is-open .onedb-pillar__icon { background: var(--onedb-orange); color: #fff; }
/* Indicador +/− dibujado en CSS (no depende de ninguna librería de iconos). */
.onedb-pillar__toggle { position: relative; width: 16px; height: 16px; flex-shrink: 0; color: var(--onedb-gray); }
.onedb-pillar__toggle::before, .onedb-pillar__toggle::after { content: ''; position: absolute; background: currentColor; transition: opacity .2s, transform .2s; }
.onedb-pillar__toggle::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.onedb-pillar__toggle::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.onedb-pillar.is-open .onedb-pillar__toggle { color: var(--onedb-orange); }
.onedb-pillar.is-open .onedb-pillar__toggle::after { opacity: 0; }
.onedb-pillar__title { margin: 2rem 0 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: var(--onedb-dark); }
.onedb-pillar__desc { margin: 1rem 0 0; color: var(--onedb-gray); line-height: 1.6; }
/* Detalles: ocultos por defecto, se muestran solo al abrir (control por clase). */
.onedb-pillar__details { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; display: none; flex-direction: column; gap: 0.75rem; }
.onedb-pillar.is-open .onedb-pillar__details { display: flex; }
.onedb-pillar__detail { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--onedb-gray); line-height: 1.5; }
.onedb-pillar__bullet { margin-top: 0.4rem; width: 6px; height: 6px; flex-shrink: 0; border-radius: 9999px; background: var(--onedb-orange); }
.onedb-pillar__foot { margin-top: 2rem; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f3f4f6; font-size: 10px; letter-spacing: 0.15em; color: rgba(74,74,74,.6); }
.onedb-pillar__status { font-weight: 700; }
/* Flecha añadida por CSS (escape ASCII, nunca se corrompe al guardar). */
.onedb-pillar__status::after { content: " \2197"; }
.onedb-pillar.is-open .onedb-pillar__status::after { content: " \2199"; }
.onedb-pillar:hover .onedb-pillar__status, .onedb-pillar.is-open .onedb-pillar__status { color: var(--onedb-orange); }

/* =========================================================
   AUDIO CONSOLE (pads + step sequencer + keyboard)
   ========================================================= */
.onedb-console { --onedb-synth-accent: var(--onedb-orange); }

/* --- AISLAMIENTO DEL TEMA -------------------------------------------------
   :where() tiene especificidad 0, así que este reset anula lo que inyecta el
   tema pero NO pisa las reglas de componente que vienen más abajo.
   Los inputs de tipo range se dejan fuera del reset de `appearance` porque
   los faders verticales dependen del render nativo (accent-color).           */
.onedb-console :where(button, select, label, p, h1, h2, h3, h4, h5, h6) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	outline: none;
	min-width: 0;
	min-height: 0;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.onedb-console :where(input) { margin: 0; font: inherit; box-shadow: none; outline: none; }
.onedb-console :where(button) { cursor: pointer; }
.onedb-console :where(button, select, input):hover,
.onedb-console :where(button, select, input):focus,
.onedb-console :where(button, select, input):active {
	box-shadow: none;
	text-shadow: none;
	outline: none;
	transform: none;
	filter: none;
}
.onedb-console :where(button, select):focus-visible {
	outline: 2px solid var(--onedb-synth-accent);
	outline-offset: 1px;
}

.onedb-console__panel { background: #fff; border: 1px solid var(--onedb-dark); padding: 1.1rem; display: flex; flex-direction: column; gap: 1rem; }

/* Transport (fila superior a todo el ancho) */
.onedb-console__transport { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; border-bottom: 1px solid #f3f4f6; padding-bottom: 1.25rem; font-size: 11px; color: var(--onedb-gray); }
.onedb-console__play { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; background: var(--onedb-dark); color: #fff; border: 1px solid var(--onedb-dark); cursor: pointer; font-family: var(--onedb-font-mono); font-size: 12px; letter-spacing: 0.1em; }
.onedb-console__play:hover { background: #333; border-color: #333; }
.onedb-console__play.is-active { background: var(--onedb-synth-accent); border-color: var(--onedb-synth-accent); }
.onedb-console__play.is-active:hover { background: var(--onedb-orange-dark); border-color: var(--onedb-orange-dark); }
.onedb-console__bpm { display: flex; align-items: center; gap: 0.6rem; }
.onedb-console__bpm input { width: 110px; }
.onedb-console__status { padding: 0.2rem 0.6rem; background: #f3f4f6; color: #6b7280; font-weight: 700; letter-spacing: 0.1em; }
.onedb-console__status.is-active { background: #dcfce7; color: #15803d; }
.onedb-console__fx { display: flex; gap: 1rem; }
.onedb-console__fx-ctl { display: flex; align-items: center; gap: 0.4rem; font-size: 10px; letter-spacing: 0.1em; }
.onedb-console__fx-ctl input { width: 70px; }

/* Zona superior: columna izq (transport + pads) + mixer a la derecha a toda la altura */
.onedb-console__top { display: flex; gap: 1rem; align-items: stretch; }
.onedb-console__top-l { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.onedb-console__top-l .onedb-mod--pads { flex: 1 1 auto; }
@media (max-width: 780px) { .onedb-console__top { flex-direction: column; } }

/* Mixer de faders verticales */
.onedb-console__mixer { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border: 1px solid #e5e7eb; background: #fafafa; flex: 0 0 auto; }
.onedb-fader { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
/* Vertical vía writing-mode (Chrome 111+/Firefox/Safari 15.4+) + accent-color.
   Sin appearance:slider-vertical ni thumb custom (rompían el arrastre). */
.onedb-fader__input {
	writing-mode: vertical-lr;
	direction: rtl;
	width: 26px;
	height: 120px;
	margin: 0;
	accent-color: var(--onedb-dark);
	cursor: pointer;
}
.onedb-fader--master .onedb-fader__input { accent-color: var(--onedb-synth-accent); }
.onedb-fader__label { font-family: var(--onedb-font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--onedb-gray); }
.onedb-fader--master .onedb-fader__label { color: var(--onedb-synth-accent); font-weight: 700; }
.onedb-pads__key { display: inline-flex; align-items: center; gap: 0.35rem; }
@media (max-width: 780px) { .onedb-console__mixer { width: 100%; justify-content: space-between; } }

/* Módulos */
.onedb-mod { border: 1px solid #e5e7eb; padding: 0.8rem; }
.onedb-mod__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--onedb-gray); margin-bottom: 0.6rem; flex-wrap: wrap; }
.onedb-mod__head [data-lucide] { color: var(--onedb-synth-accent); vertical-align: middle; }

/* --- Iconos SVG inline de la consola (sustituyen a Lucide) --- */
.onedb-console .onedb-i { display: block; flex-shrink: 0; width: 1em; height: 1em; }
.onedb-console__play .onedb-i { width: 14px; height: 14px; }
.onedb-mod__head .onedb-i { width: 14px; height: 14px; color: var(--onedb-synth-accent); }
.onedb-pad__btn .onedb-i { width: 16px; height: 16px; }
/* PLAY / STOP: un solo icono, el JS sustituye el contenido del <svg>. */
.onedb-mod__tools { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; min-width: 0; }

/* Grupos de controles relacionados (OCT, ARP): borde propio para que se
   entienda que esos ajustes pertenecen solo a ese bloque. */
.onedb-group {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0.4rem 0.15rem 0.5rem;
	border: 1px solid #e5e7eb;
	white-space: nowrap;
	flex-shrink: 0;
}
.onedb-group__label {
	font-family: var(--onedb-font-mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	color: var(--onedb-synth-accent);
	font-weight: 700;
}
.onedb-group select,
.onedb-group button { flex-shrink: 0; }

/* Los temas suelen forzar `select { width: 100% }`, lo que desbordaba la caja
   del ARP. Especificidad (0,2,1) para ganarle sin usar !important, y caret
   propio porque el reset quita el `appearance` nativo. */
.onedb-console .onedb-mod__tools select,
.onedb-console .onedb-group select {
	width: auto;
	max-width: 100%;
	min-width: 0;
	height: auto;
	flex: 0 0 auto;
	padding-right: 1.15rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%234a4a4a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.35rem center;
	background-size: 7px 4px;
	text-overflow: ellipsis;
}
.onedb-group .onedb-keys__octlabel { font-family: var(--onedb-font-mono); font-size: 10px; min-width: 1.8rem; text-align: center; }
.onedb-mod__tools select,
.onedb-mod__tools button { font-family: var(--onedb-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.5rem; border: 1px solid #e5e7eb; background: #fff; color: var(--onedb-gray); cursor: pointer; }
.onedb-mod__tools button:hover { border-color: var(--onedb-dark); color: var(--onedb-dark); }
.onedb-keys__arp.is-active { background: var(--onedb-synth-accent); color: #fff; border-color: var(--onedb-synth-accent); }

/* Pads */
.onedb-mod__pads { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.onedb-pad { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem; border: 1px solid #e5e7eb; transition: border-color .3s, background .3s; }
.onedb-pad.is-on { border-color: rgba(255,90,0,.4); background: rgba(255,90,0,.02); }
.onedb-pad__btn { width: 2rem; height: 2rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: #9ca3af; border: 1px solid transparent; cursor: pointer; transition: all .2s; }
.onedb-pad__btn:hover { background: #e5e7eb; color: var(--onedb-dark); }
.onedb-pad.is-on .onedb-pad__btn { background: var(--onedb-synth-accent); color: #fff; }
.onedb-pad.is-on .onedb-pad__btn:hover { background: var(--onedb-orange-dark); }
.onedb-pad__meta { flex: 1; min-width: 0; }
.onedb-pad__cat { font-size: 9px; color: var(--onedb-synth-accent); text-transform: uppercase; font-weight: 700; }
.onedb-pad__name { font-size: 0.8rem; font-weight: 700; color: var(--onedb-dark); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onedb-pad input { width: 70px; flex-shrink: 0; }

/* Step sequencer */
.onedb-seq { display: flex; flex-direction: column; gap: 0.3rem; overflow-x: auto; }
.onedb-seq__row { display: flex; align-items: center; gap: 0.75rem; }
.onedb-seq__label { width: 3.5rem; flex-shrink: 0; font-size: 10px; text-transform: uppercase; color: var(--onedb-gray); }
.onedb-seq__steps { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; flex: 1; min-width: 480px; }
.onedb-seq__cell { height: 20px; border: 1px solid #e5e7eb; background: #fafafa; cursor: pointer; padding: 0; transition: background .1s, border-color .1s; }
.onedb-seq__cell:hover { border-color: var(--onedb-dark); background: #ececec; }
.onedb-seq__cell.is-downbeat { border-color: #d1d5db; background: #f3f4f6; }
.onedb-seq__cell.is-on { background: var(--onedb-dark); border-color: var(--onedb-dark); }
.onedb-seq__cell.is-on.is-playhead { background: var(--onedb-synth-accent); border-color: var(--onedb-synth-accent); }
.onedb-seq__cell.is-playhead { box-shadow: inset 0 0 0 2px var(--onedb-synth-accent); }

/* Keyboard */
.onedb-keys { position: relative; display: flex; height: 92px; user-select: none; touch-action: none; }
.onedb-key { position: relative; cursor: pointer; padding: 0; border: 1px solid var(--onedb-dark); }
.onedb-key--white { flex: 1; background: #fff; z-index: 1; }
.onedb-key--white:hover { background: #f0f0f0; }
.onedb-key--white.is-down { background: var(--onedb-synth-accent); }
.onedb-key--black { width: 0; z-index: 2; background: var(--onedb-dark); height: 62%; margin: 0 -0.9rem; flex: 0 0 1.8rem; }
.onedb-key--black:hover { background: #3a3a3a; }
.onedb-key--black.is-down { background: var(--onedb-synth-accent); }
.onedb-key__hint { position: absolute; bottom: 0.4rem; left: 0; right: 0; text-align: center; font-size: 9px; color: #9ca3af; pointer-events: none; }
.onedb-key--black .onedb-key__hint { color: rgba(255,255,255,.7); bottom: 0.25rem; }
.onedb-keys__help { margin: 0.45rem 0 0; font-size: 9px; color: #9ca3af; letter-spacing: 0.05em; }
/* 2ª octava: solo en escritorio. */
@media (max-width: 1024px) {
	.onedb-key--ext { display: none; }
}

/* Vistas teclado / piano roll */
.onedb-keys__view[hidden] { display: none; }
.onedb-keys__viewbtn.is-active { background: var(--onedb-synth-accent); color: #fff; border-color: var(--onedb-synth-accent); }

/* Piano roll */
.onedb-roll__bar { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.onedb-roll__lanes, .onedb-roll__actions { display: flex; gap: 0.3rem; }
.onedb-roll__bar button { font-family: var(--onedb-font-mono); font-size: 10px; text-transform: uppercase; padding: 0.3rem 0.5rem; border: 1px solid #e5e7eb; background: #fff; color: var(--onedb-gray); cursor: pointer; }
.onedb-roll__bar button:hover { border-color: var(--onedb-dark); color: var(--onedb-dark); }
.onedb-roll__lanes button.is-active { background: var(--onedb-synth-accent); color: #fff; border-color: var(--onedb-synth-accent); }
/* Bordes de la rejilla vía variable → personalizables desde Elementor y
   aislados del tema (especificidad reforzada en las celdas). */
.onedb-roll { --onedb-roll-grid: #ececec; --onedb-roll-grid-strong: #d1d5db; max-height: 280px; overflow: auto; border: 1px solid var(--onedb-roll-grid-strong); }
.onedb-roll__row { display: grid; grid-template-columns: 1.8rem repeat(16, 1fr); }
.onedb-roll__row.is-sharp { background: #f6f6f6; }
.onedb-roll__label { font-family: var(--onedb-font-mono); font-size: 8px; color: #9ca3af; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--onedb-roll-grid-strong); }
.onedb-roll .onedb-roll__cell {
	height: 13px;
	border: 0;
	border-right: 1px solid var(--onedb-roll-grid);
	border-bottom: 1px solid var(--onedb-roll-grid);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
}
.onedb-roll .onedb-roll__cell:hover { background: rgba(0,0,0,.09); }
.onedb-roll .onedb-roll__cell.is-downbeat { border-left: 1px solid var(--onedb-roll-grid-strong); }
.onedb-roll .onedb-roll__cell.is-on { background: var(--onedb-dark); }
.onedb-roll .onedb-roll__cell.is-on.is-playhead { background: var(--onedb-synth-accent); }
.onedb-roll .onedb-roll__cell.is-playhead:not(.is-on) { box-shadow: inset 0 0 0 1px rgba(255,90,0,.4); }

/* Rangos horizontales estilizados (excluye los faders verticales del mixer). */
.onedb-console input[type="range"]:not(.onedb-fader__input) { -webkit-appearance: none; appearance: none; background: #e5e7eb; height: 4px; cursor: pointer; }
.onedb-console input[type="range"]:not(.onedb-fader__input)::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 14px; background: var(--onedb-synth-accent); border-radius: 0; }
.onedb-console input[type="range"]:not(.onedb-fader__input)::-moz-range-thumb { height: 14px; width: 14px; background: var(--onedb-synth-accent); border: 0; border-radius: 0; }

/* =========================================================
   COPY TO CLIPBOARD
   ========================================================= */
/* Aislamiento del tema (especificidad 0, no pisa las reglas de abajo). */
.onedb-copy :where(button, span) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	outline: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.onedb-copy :where(button):hover,
.onedb-copy :where(button):focus,
.onedb-copy :where(button):active { box-shadow: none; text-shadow: none; outline: none; transform: none; filter: none; }

.onedb-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.onedb-copy__label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #9ca3af; }
.onedb-copy__btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
	text-align: left;
	max-width: 100%;
}
.onedb-copy__btn--rev { flex-direction: row-reverse; }
.onedb-copy__btn:hover { opacity: .85; }
.onedb-copy__btn:active { transform: scale(.99); }
.onedb-copy__text {
	font-size: clamp(1.4rem, 4vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--onedb-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	word-break: break-word;
}
.onedb-copy__iconbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 8px;
	border: 1px solid var(--onedb-line-soft);
	border-radius: 50%;
	color: var(--onedb-dark);
	line-height: 0;
}
.onedb-copy__btn:hover .onedb-copy__iconbox { border-color: var(--onedb-dark); }
.onedb-copy__icon { display: inline-flex; line-height: 0; }
.onedb-copy__icon svg, .onedb-copy__icon i { width: 20px; height: 20px; fill: currentColor; }
/* Alternancia de icono normal / copiado. */
.onedb-copy__icon--copied { display: none; }
.onedb-copy.is-copied .onedb-copy__icon--default { display: none; }
.onedb-copy.is-copied .onedb-copy__icon--copied { display: inline-flex; }
.onedb-copy.is-copied .onedb-copy__iconbox { color: #16a34a; border-color: #16a34a; }

.onedb-copy__toast {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	font-size: 11px;
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
	animation: onedb-fade-in .2s ease;
}
.onedb-copy__toast[hidden] { display: none; }

/* =========================================================
   COLLECTIVE ROSTER
   ========================================================= */
.onedb-roster__head { margin-bottom: 3rem; }
.onedb-roster__title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; color: var(--onedb-dark); margin: 0.5rem 0 0; }
/* Aislamiento del tema (especificidad 0, no pisa las reglas de abajo). */
.onedb-roster :where(button, a, p, h4, span) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border-radius: 0;
	background: none;
	font: inherit;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	outline: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.onedb-roster :where(button):hover,
.onedb-roster :where(button):focus,
.onedb-roster :where(a):hover { box-shadow: none; text-shadow: none; outline: none; transform: none; filter: none; }
.onedb-roster :where(button):focus-visible { outline: 2px solid var(--onedb-orange); outline-offset: -2px; }

/* --- Anti-overflow: el roster nunca debe generar scroll horizontal --- */
.onedb-roster { max-width: 100%; min-width: 0; overflow-x: clip; }
.onedb-roster__grid {
	display: grid;
	grid-template-columns: var(--onedb-roster-cols, 7fr 5fr);
	gap: 2rem;
	align-items: start;
	min-width: 0;
	max-width: 100%;
}
/* La variable se declara en el propio grid, así gana a la heredada del
   contenedor (que es donde la pone Elementor) sin necesidad de !important. */
@media (max-width: 1000px) {
	.onedb-roster__grid { --onedb-roster-cols: 1fr; gap: 1.25rem; }
}
/* Los hijos de grid/flex necesitan min-width:0 o el texto largo los desborda. */
.onedb-roster__list,
.onedb-roster__inspector { min-width: 0; max-width: 100%; }
.onedb-roster__row { min-width: 0; }
.onedb-roster__row-info { min-width: 0; }
.onedb-roster__row-name,
.onedb-roster__row-role,
.onedb-roster__insp-name,
.onedb-roster__insp-role,
.onedb-roster__insp-bio p { overflow-wrap: anywhere; min-width: 0; }
.onedb-roster__insp-media,
.onedb-roster__media-el { max-width: 100%; }

.onedb-roster__list { border: 1px solid var(--onedb-dark); }
.onedb-roster__row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.5rem; background: transparent; border: 0; border-bottom: 1px solid var(--onedb-line); cursor: pointer; text-align: left; transition: background .3s; }
/* En móvil: el punto y los textos van SIEMPRE juntos en la misma línea (si el
   bloque de textos se fuerza al 100% el punto queda solo arriba). El botón de
   reel solo baja de línea si de verdad no cabe, y nunca se solapa porque
   .onedb-roster__row-info puede encogerse gracias a min-width: 0. */
@media (max-width: 600px) {
	.onedb-roster__row { align-items: center; gap: 0.6rem; }
	.onedb-roster__row-info { flex: 1 1 0%; }
	.onedb-roster__row-cta { flex: 0 0 auto; margin-left: auto; }
}
.onedb-roster__row:last-child { border-bottom: 0; }
.onedb-roster__row:hover { background: rgba(0,0,0,.02); }
.onedb-roster__row.is-selected { background: #f9fafb; }
.onedb-roster__dot { width: 8px; height: 8px; border-radius: 9999px; background: transparent; flex-shrink: 0; }
.onedb-roster__row.is-selected .onedb-roster__dot { background: var(--onedb-orange); }
/* flex-basis: 0 (no `auto`) + min-width: 0 → el bloque se dimensiona por el
   espacio disponible, nunca por el largo del texto. Es lo que impide que el
   cargo se salga de su caja y quede por debajo del botón. */
.onedb-roster__row-info { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; }
.onedb-roster__row-name { font-size: 1.1rem; font-weight: 700; color: var(--onedb-dark); }
.onedb-roster__row-role { font-size: 0.8rem; color: var(--onedb-gray); }
.onedb-roster__row-cta { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--onedb-gray); border: 1px solid var(--onedb-line); padding: 0.35rem 0.75rem; }
.onedb-roster__row-cta svg { width: 10px; height: 10px; flex-shrink: 0; }
.onedb-roster__row:hover .onedb-roster__row-cta { border-color: var(--onedb-dark); color: var(--onedb-dark); }

.onedb-roster__inspector { position: relative; border: 2px solid var(--onedb-dark); padding: 2rem; background: #fff; overflow: hidden; }
.onedb-roster__insp-tag { position: absolute; top: 0; right: 0; width: 6rem; height: 6rem; background: #f9fafb; border-left: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #9ca3af; }
/* En móvil el sello ocupa demasiado y se come el espacio útil: fuera. */
@media (max-width: 767px) {
	.onedb-roster__insp-tag { display: none; }
}
.onedb-roster__player { width: 100%; margin-bottom: 1.5rem; min-width: 0; }
.onedb-roster__player[hidden] { display: none; }
.onedb-roster__insp-media { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--onedb-dark); background: var(--onedb-dark); }
.onedb-roster__insp-media[hidden] { display: none; }
/* Barra de controles del vídeo del inspector (tema claro). */
.onedb-roster__playerbar[hidden] { display: none; }
.onedb-roster .onedb-vp__bar { padding: 0.6rem 0; gap: 0.6rem; font-size: 10px; }
.onedb-roster .onedb-vp__ctl { padding: 7px; font-size: 14px; }
.onedb-roster .onedb-vp__vol { width: 60px; }
.onedb-roster .onedb-vp__timeline { min-width: 50px; flex: 1 1 60px; }
.onedb-roster__media-el { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.onedb-roster__insp-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; min-width: 0; }
.onedb-roster__insp-head > div { min-width: 0; }
.onedb-roster__insp-initials { width: 4rem; height: 4rem; background: var(--onedb-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; border: 1px solid #d1d5db; }
.onedb-roster__insp-level { font-size: 9px; letter-spacing: 0.2em; color: var(--onedb-orange); text-transform: uppercase; font-weight: 700; }
.onedb-roster__insp-name { font-size: 1.25rem; font-weight: 800; color: var(--onedb-dark); margin: 0.25rem 0 0; }
.onedb-roster__insp-role { font-size: 0.8rem; color: var(--onedb-gray); margin: 0.35rem 0 0; }
.onedb-roster__insp-bio { border-top: 1px solid #f3f4f6; padding-top: 1.5rem; }
.onedb-roster__insp-lbl { font-size: 10px; color: #9ca3af; letter-spacing: 0.15em; display: block; }
.onedb-roster__insp-bio p { margin: 0.5rem 0 0; color: var(--onedb-gray); line-height: 1.6; }
.onedb-roster__insp-foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; min-width: 0; }
.onedb-roster__insp-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 9px; color: var(--onedb-gray); letter-spacing: 0.1em; }
.onedb-roster__ping { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: #22c55e; flex-shrink: 0; animation: onedb-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
.onedb-roster__insp-reel { font-size: 11px; font-weight: 700; color: var(--onedb-orange); text-decoration: none; }
.onedb-roster__insp-reel[hidden] { display: none; }