/* ============================================================
   Formulario de carga de obra (#create_score)
   UI propia del plugin — no depende del tema.
   Paleta Ibermúsicas: rosa #F84982 (hover #D63268), teal #17607a.
   ============================================================ */

#create_score {
	--sc-pink: #F84982;
	--sc-pink-dark: #D63268;
	--sc-border: #d9dee3;
	--sc-text: #333;
	--sc-muted: #6b7280;
	max-width: 920px;
	margin: 0 auto;
	color: var(--sc-text);
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Mensaje "campos con * obligatorios" */
.required-fields-message {
	max-width: 920px;
	margin: 0 auto 10px;
	color: var(--sc-muted);
	font-size: 14px;
}

/* Cada "paso" del wizard como tarjeta */
#create_score .section {
	background: #fff;
	border: 1px solid #eceff2;
	border-radius: 12px;
	padding: 32px 36px 40px;
	box-shadow: 0 2px 14px rgba(23, 96, 122, 0.06);
	margin-bottom: 24px;
}

/* Títulos de sección */
#create_score h2 {
	font-size: 26px;
	font-weight: 700;
	color: #1f2937;
	margin: 0 0 4px;
	padding-bottom: 16px;
	border-bottom: 2px solid #f1f3f5;
}
#create_score h2 + br,
#create_score h2 + br + br { display: none; }
#create_score h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--sc-pink);
	margin: 28px 0 12px;
}
#create_score h4 {
	font-size: 15px;
	font-weight: 700;
	color: #374151;
	margin: 20px 0 10px;
}

/* Layout de filas/columnas (compatible con las clases Bootstrap del HTML) */
#create_score .row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 24px;
	margin: 0 0 20px;
	align-items: flex-start;
}
#create_score .row.mb-5 { margin-bottom: 22px; }
#create_score .form-group { margin: 0; }
#create_score .row > [class*="col-"] { box-sizing: border-box !important; padding-left: 0 !important; padding-right: 0 !important; }
#create_score .row > .col-6,
#create_score .row > .form-group.col-6 { flex: 0 1 calc(50% - 12px) !important; width: calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; min-width: 220px; }
#create_score .row > .col-12,
#create_score .row > .col-md-12,
#create_score .row > .form-group.col-12 { flex: 1 1 100% !important; width: auto !important; max-width: 100% !important; }
#create_score .row > .col-4,
#create_score .row > .form-group.col-4 { flex: 1 1 calc(33.333% - 16px) !important; max-width: calc(33.333% - 16px) !important; min-width: 180px; }
#create_score .row > .col-md-6,
#create_score .row > .form-group.col-md-6 { flex: 1 1 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; min-width: 240px; }

/* Labels */
#create_score label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 7px;
	line-height: 1.4;
}
#create_score label span:not(.required-symbol) { font-weight: 400; }
.required-symbol { color: var(--sc-pink); font-weight: 700; }

/* Inputs, selects y textareas */
#create_score input[type="text"],
#create_score input[type="number"],
#create_score input[type="email"],
#create_score input[type="url"],
#create_score input[type="date"],
#create_score select,
#create_score textarea,
#create_score .form-control {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--sc-text);
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
	appearance: none;
	-webkit-appearance: none;
}
#create_score textarea { min-height: 96px; resize: vertical; }

#create_score input::placeholder,
#create_score textarea::placeholder { color: #aab2bd; }

/* Foco: resalte rosa */
#create_score input:focus,
#create_score select:focus,
#create_score textarea:focus,
#create_score .form-control:focus {
	outline: none;
	border-color: var(--sc-pink);
	box-shadow: 0 0 0 3px rgba(248, 73, 130, 0.15);
}

/* Flecha custom para selects */
#create_score select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}

/* Texto de ayuda (link de perfil, etc.) */
#create_score label span,
#create_score .help-text {
	color: var(--sc-muted);
	font-size: 13px;
}
#create_score a { color: var(--sc-pink); text-decoration: none; }
#create_score a:hover { color: var(--sc-pink-dark); text-decoration: underline; }

/* Checkboxes: alinear y espaciar */
#create_score input[type="checkbox"],
#create_score input[type="radio"] {
	width: 18px; height: 18px;
	margin-right: 10px;
	vertical-align: middle;
	accent-color: var(--sc-pink);
	cursor: pointer;
}
/* Fila de checkbox con su etiqueta al lado.
   El HTML usa <div class="form-group col-12"><input type=checkbox><label>…</label></div>
   así que estilizamos los form-group que contengan un checkbox directo. */
#create_score .checkbox-row,
#create_score .form-check,
#create_score .form-group:has(> input[type="checkbox"]),
#create_score .form-group:has(> input[type="radio"]) {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
	padding: 13px 16px;
	background: #f8fafb;
	border: 1px solid #eceff2;
	border-radius: 8px;
	max-width: 100% !important;
	flex: 1 1 100% !important;
}
#create_score .checkbox-row label,
#create_score .form-check label,
#create_score .form-group:has(> input[type="checkbox"]) > label,
#create_score .form-group:has(> input[type="radio"]) > label {
	margin: 0;
	font-weight: 500;
	color: #4b5563;
	cursor: pointer;
	flex: 1;
}
/* Neutralizar clases col-1/col-11 dentro de una fila de checkbox */
#create_score .form-group:has(> input[type="checkbox"]) > input,
#create_score .form-group:has(> input[type="radio"]) > input { flex: 0 0 auto; margin: 0; }
/* Ocultar el <br> que a veces separa checkbox de label */
#create_score .form-group:has(> input[type="checkbox"]) > br,
#create_score .form-group:has(> input[type="radio"]) > br { display: none; }

/* Botones del wizard (Siguiente / Anterior / Enviar) */
#create_score input[type="button"],
#create_score input[type="submit"],
#create_score button,
#create_score .action-button,
#create_score .actionButton {
	display: inline-block;
	background: var(--sc-pink);
	color: #fff !important;
	border: none;
	border-radius: 8px;
	padding: 13px 34px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	cursor: pointer;
	transition: background-color .15s ease;
	margin-top: 8px;
}
#create_score input[type="button"]:hover,
#create_score input[type="submit"]:hover,
#create_score button:hover,
#create_score .action-button:hover,
#create_score .actionButton:hover {
	background: var(--sc-pink-dark);
}
/* Botón secundario (Anterior) */
#create_score .action-button-previous,
#create_score [class*="previous"] {
	background: #fff !important;
	color: var(--sc-pink) !important;
	border: 1px solid var(--sc-pink) !important;
}
#create_score .action-button-previous:hover,
#create_score [class*="previous"]:hover {
	background: #fff5f8 !important;
}

/* Botones "Agregar otro…" (filas repetibles): estilo secundario legible
   (contorno rosa, texto rosa, fondo blanco) — NO texto rosa sobre fondo rosa. */
#create_score .addCoauthor,
#create_score .addMovement,
#create_score .addText,
#create_score .addPremiere,
#create_score .addAward,
#create_score a.btn-primmary.pinkBtn[class*="add"],
#create_score .add-row {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: #fff !important;
	color: var(--sc-pink) !important;
	border: 1.5px dashed var(--sc-pink) !important;
	border-radius: 8px;
	padding: 14px 20px !important;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .3px;
	text-decoration: none !important;
	cursor: pointer;
	margin: 4px 0 8px;
	transition: background-color .15s ease, color .15s ease;
}
#create_score .addCoauthor::before,
#create_score .addMovement::before,
#create_score .addText::before,
#create_score .addPremiere::before,
#create_score .addAward::before { content: "+"; font-size: 18px; line-height: 1; font-weight: 700; }
#create_score .addCoauthor:hover,
#create_score .addMovement:hover,
#create_score .addText:hover,
#create_score .addPremiere:hover,
#create_score .addAward:hover,
#create_score a.btn-primmary.pinkBtn[class*="add"]:hover {
	background: var(--sc-pink) !important;
	color: #fff !important;
	border-style: solid !important;
}
/* La sección que envuelve el botón agregar: sin fondo crema raro, ancho completo */
#create_score .addBtnSection {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 8px 0 4px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	float: none !important;
}

/* ── Widget de subida de archivos (botón + progreso + eliminar) ── */
.sc-upload-widget {
	display: block;
	margin-top: 6px;
}

/* Botón de subida: <button> normal de tamaño natural. Al clickearlo, un handler JS
   dispara el input file oculto (input.click() nativo). Nunca 100% de ancho. */
#create_score button.sc-upload-btn.custom-file-upload {
	display: inline-block !important;
	width: auto !important;
	max-width: max-content;
	margin-top: 0;
	cursor: pointer;
}

/* Input file oculto de forma ACCESIBLE (visually hidden). NO usar display:none:
   algunos navegadores no permiten .click() sobre inputs en display:none. Esta técnica
   además vence la regla global `input[type=file]{display:none}` de style.css. */
.sc-upload-widget .sc-file-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	display: block !important;
}

/* Fila de estado: nombre de archivo + botón eliminar + barra de progreso. */
.sc-upload-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	padding: 8px 12px;
	background: #faf7f8;
	border: 1px solid #efe3e8;
	border-radius: 6px;
	max-width: 520px;
}

.sc-upload-status.is-error {
	background: #fdeef1;
	border-color: #f3c2ce;
}

.sc-upload-filename {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	color: #333;
	word-break: break-all;
}

.sc-upload-status.is-done .sc-upload-filename::before {
	content: "\2713\00a0";
	color: #2e7d32;
	font-weight: bold;
}

/* Botón eliminar (papelera) */
.sc-upload-remove {
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid #e0c4cd;
	color: #D63268;
	border-radius: 6px;
	width: 34px;
	height: 34px;
	line-height: 1;
	font-size: 16px;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sc-upload-remove:hover {
	background: #D63268;
	border-color: #D63268;
	color: #fff;
}

/* Barra de progreso */
.sc-progress {
	flex: 1 1 100%;
	height: 8px;
	background: #ececec;
	border-radius: 6px;
	overflow: hidden;
}

.sc-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #F84982, #D63268);
	border-radius: 6px;
	transition: width 0.2s ease;
}

.upload-message { font-size: 13px; margin-top: 6px; display: block; }

/* Mensajes de validación (jQuery Validate) */
#create_score label.error,
#create_score .error:not(input):not(select) {
	color: var(--sc-pink);
	font-size: 13px;
	font-weight: 600;
	margin-top: 6px;
	display: block;
}
#create_score input.error,
#create_score select.error,
#create_score textarea.error {
	border-color: var(--sc-pink);
	box-shadow: 0 0 0 3px rgba(248, 73, 130, 0.12);
}

/* Steps del wizard: ocultar los no activos si el JS usa .section.current */
#create_score .section:not(.current) { display: none; }

/* Barra de progreso / navegación de pasos si existiera */
#create_score .steps ul,
.wizard-steps { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 24px; }

/* Responsive: una columna en móvil */
@media (max-width: 640px) {
	#create_score .section { padding: 22px 18px 28px; }
	#create_score .row > .col-6,
	#create_score .row > .form-group.col-6,
	#create_score .row > .col-md-6,
	#create_score .row > .form-group.col-md-6,
	#create_score .row > .col-4,
	#create_score .row > .form-group.col-4 { flex: 1 1 100% !important; max-width: 100% !important; }
}

/* ── Filas repetibles (coautores, movimientos, textos, estrenos, premios) ── */
/* Se muestran como una tarjeta con los campos alineados en fila y el botón
   eliminar a la derecha. Soporta tanto col-* (HTML inicial) como col-xs-*
   (filas clonadas por JS). */
#create_score .coauthorRow,
#create_score .movementRow,
#create_score .textRow,
#create_score .premiereRow,
#create_score .awardRow,
#create_score .responsibleRow {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 18px;
	margin: 0 0 14px;
	background: #fbfcfd;
	border: 1px solid #eceff2;
	border-radius: 10px;
	position: relative;
}
/* Los grupos de campo dentro de una fila repetible crecen equitativamente
   y se muestran en columna (label arriba + input abajo). */
#create_score .coauthorRow > .form-group,
#create_score .movementRow > .form-group,
#create_score .textRow > .form-group,
#create_score .premiereRow > .form-group,
#create_score .awardRow > .form-group {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 0 !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}
/* Columnas/grupos VACÍOS (spacers como <div class="col-4"></div> o el col-xs-3
   sin contenido de las filas clonadas): NO deben crecer ni ocupar ancho. */
#create_score .coauthorRow > :empty,
#create_score .movementRow > :empty,
#create_score .textRow > :empty,
#create_score .premiereRow > :empty,
#create_score .awardRow > :empty {
	display: none !important;
}
/* Para que la 1ª fila (sin papelera) tenga EXACTAMENTE el mismo ancho de campos
   que las clonadas (con papelera), reservamos al final el mismo hueco (44px + gap)
   que ocupa el botón eliminar. Aplica solo a las filas que NO tienen botón eliminar. */
#create_score .coauthorRow:not(:has([class*="remove"]))::after,
#create_score .movementRow:not(:has([class*="remove"]))::after,
#create_score .textRow:not(:has([class*="remove"]))::after,
#create_score .premiereRow:not(:has([class*="remove"]))::after,
#create_score .awardRow:not(:has([class*="remove"]))::after {
	content: "";
	flex: 0 0 auto;
	width: 44px;
}
/* El <label> dentro de la fila: altura mínima fija para que los inputs queden
   alineados aunque el label ocupe 1 o 2 líneas. */
#create_score .coauthorRow label,
#create_score .movementRow label,
#create_score .textRow label,
#create_score .premiereRow label,
#create_score .awardRow label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--sc-muted);
	margin: 0 0 6px;
	min-height: 32px;           /* cabe hasta 2 líneas → inputs alineados */
	display: flex;
	align-items: flex-end;
	line-height: 1.3;
}
/* El input siempre al fondo del form-group */
#create_score .coauthorRow input,
#create_score .coauthorRow textarea,
#create_score .movementRow input,
#create_score .movementRow textarea,
#create_score .textRow input,
#create_score .premiereRow input,
#create_score .premiereRow textarea,
#create_score .premiereRow select,
#create_score .premiereRow .select2-container,
#create_score .awardRow input,
#create_score .awardRow .select2-container { margin-top: auto; }
/* Ocultar los <br> dentro de filas (usamos flex-column) */
#create_score .coauthorRow br,
#create_score .movementRow br,
#create_score .textRow br,
#create_score .premiereRow br,
#create_score .awardRow br { display: none; }

/* Contenedor del botón eliminar (col-xs-1 con label vacío): ancho fijo,
   sin crecer, y alineado con el input (no arriba). */
#create_score .coauthorRow > .form-group.col-xs-1,
#create_score .coauthorRow > .form-group.col-1,
#create_score .movementRow > .form-group.col-xs-1,
#create_score .movementRow > .form-group.col-1,
#create_score .textRow > .form-group.col-xs-1,
#create_score .premiereRow > .form-group.col-xs-1,
#create_score .awardRow > .form-group.col-xs-1 {
	flex: 0 0 auto !important;
	width: 44px !important;
	justify-content: flex-end;
}
/* El label vacío que empuja la papelera: mantener la misma altura que los otros
   labels para que la papelera quede a la altura de los inputs. */
#create_score .coauthorRow > .form-group.col-xs-1 label,
#create_score .movementRow > .form-group.col-xs-1 label { min-height: 32px; }

/* Botón eliminar (papelera) de cada fila repetible */
#create_score .removeCoauthor,
#create_score .removeMovement,
#create_score .removeText,
#create_score .removePremiere,
#create_score .removeAward,
#create_score .remove-row,
#create_score [class*="remove"] {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: #fff;
	color: var(--sc-pink);
	border: 1.5px solid var(--sc-pink);
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
#create_score .removeCoauthor:hover,
#create_score .removeMovement:hover,
#create_score .removeText:hover,
#create_score .removePremiere:hover,
#create_score .removeAward:hover,
#create_score [class*="remove"]:hover {
	background: var(--sc-pink);
	color: #fff;
}

/* Encabezados de sección condicional (Movimientos, etc.) */
#create_score #coauthors > h3,
#create_score .movementsSection h3,
#create_score h3 { margin-top: 24px; }

/* Contenedor de coautores: separar del checkbox */
#create_score #coauthors { margin-top: 8px; }

/* ── Select2 dentro del formulario (país de estreno, premios, instrumentos) ──
   El plugin Select2 oculta el <select> y crea su propio widget. Lo integramos
   con la estética del formulario y evitamos que el botón "limpiar" (X) herede
   el estilo de botón rosa. */
#create_score .select2-container {
	width: 100% !important;
	min-width: 0;
}
#create_score .select2-container--default .select2-selection--single {
	height: 46px;
	border: 1px solid var(--sc-border);
	border-radius: 8px;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 0 12px;
	box-sizing: border-box;
}
#create_score .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--sc-text);
	line-height: normal;
	padding: 0;
	font-size: 15px;
}
#create_score .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #aab2bd;
}
/* Flecha */
#create_score .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: 8px;
	background: transparent !important;
}
/* Botón "limpiar" (X): NO debe verse como botón rosa. Discreto y gris. */
#create_score .select2-container--default .select2-selection--single .select2-selection__clear,
#create_score .select2-selection__clear {
	background: transparent !important;
	color: #9aa3ad !important;
	border: none !important;
	padding: 0 8px 0 0 !important;
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	width: auto !important;
	height: auto !important;
	box-shadow: none !important;
	cursor: pointer;
	order: 2;
}
#create_score .select2-selection__clear:hover {
	background: transparent !important;
	color: var(--sc-pink) !important;
}
/* Foco del select2 con el mismo halo rosa que los inputs */
#create_score .select2-container--default.select2-container--focus .select2-selection--single,
#create_score .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--sc-pink);
	box-shadow: 0 0 0 3px rgba(248, 73, 130, 0.15);
}
/* Dropdown de opciones */
.select2-dropdown { border-color: #d9dee3; border-radius: 8px; }
/* Opción bajo el cursor / con teclado: fondo rosa + texto BLANCO (legible) */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #F84982 !important;
	color: #fff !important;
}
/* Opción ya seleccionada: fondo gris claro, texto normal */
.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: #f1f3f5;
	color: #333;
}

/* ── Bootstrap Multiselect (etiquetas temáticas) ──
   El widget crea .btn-group > button.multiselect + .multiselect-container (dropdown
   con checkboxes). Nuestros estilos de checkbox/form-group del formulario rompían
   ese dropdown, así que los reseteamos dentro del widget. */
#create_score .btn-group { position: relative; display: block; width: 100%; }

/* Botón que abre el multiselect: apariencia de input */
#create_score button.multiselect {
	width: 100% !important;
	text-align: left;
	background: #fff !important;
	color: var(--sc-text) !important;
	border: 1px solid var(--sc-border) !important;
	border-radius: 8px !important;
	padding: 12px 40px 12px 14px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	position: relative;
	cursor: pointer;
	box-shadow: none !important;
}
#create_score button.multiselect:hover { background: #fff !important; color: var(--sc-text) !important; }
#create_score button.multiselect .caret {
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
}

/* Contenedor del dropdown: OCULTO por defecto, visible solo cuando el
   .btn-group está abierto (.open BS3 o .show BS4). */
#create_score .multiselect-container {
	width: 100%;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--sc-border);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
	padding: 6px;
	margin-top: 4px;
	z-index: 1000;
	list-style: none;
	display: none;
}
#create_score .btn-group.open > .multiselect-container,
#create_score .btn-group.show > .multiselect-container,
#create_score .btn-group.open .multiselect-container,
#create_score .btn-group.show .multiselect-container {
	display: block;
}
/* Cada opción del dropdown: fila normal (NO tarjeta gris ni flex raro) */
#create_score .multiselect-container li { margin: 0; padding: 0; background: transparent; border: none; }
#create_score .multiselect-container li > a {
	display: block;
	padding: 0;
	border-radius: 6px;
	text-decoration: none;
	color: var(--sc-text);
	cursor: pointer;
}
/* El label ocupa toda la fila para que el click en cualquier parte marque */
#create_score .multiselect-container li > a > label.checkbox {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 10px !important;
	margin: 0 !important;
	box-sizing: border-box;
	cursor: pointer;
}
#create_score .multiselect-container li > a:hover { background: #f1f3f5; }
#create_score .multiselect-container li.active > a,
#create_score .multiselect-container li > a.active,
#create_score .multiselect-container li.active > a > label { background: rgba(248,73,130,0.06); }

/* Label + checkbox internos: resetear a tamaño normal, en línea */
#create_score .multiselect-container label.checkbox,
#create_score .multiselect-container label.radio {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	font-weight: 400 !important;
	color: var(--sc-text) !important;
	cursor: pointer;
	min-height: 0 !important;
	text-transform: none;
}
/* TODOS los checkboxes del dropdown (opciones Y grupos) al mismo tamaño 16x16 */
#create_score .multiselect-container input[type="checkbox"],
#create_score .multiselect-container input[type="radio"],
#create_score .multiselect-container label.checkbox input[type="checkbox"],
#create_score .multiselect-container label.radio input[type="radio"],
#create_score .multiselect-container li.multiselect-group input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	flex: 0 0 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: var(--sc-pink);
	position: static !important;
	vertical-align: middle;
}
/* Encabezados de grupo (optgroup) del multiselect */
#create_score .multiselect-container li.multiselect-group label {
	font-weight: 700 !important;
	color: #374151 !important;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .3px;
	padding: 8px 10px 4px !important;
}
/* Caja de búsqueda dentro del dropdown */
#create_score .multiselect-container .multiselect-filter,
#create_score .multiselect-container li.multiselect-item.multiselect-filter {
	padding: 6px;
}
#create_score .multiselect-container li.multiselect-filter .input-group {
	display: flex;
	align-items: stretch;
	gap: 0;
}
#create_score .multiselect-container input.multiselect-search {
	flex: 1 1 auto;
	width: 100%;
	border: 1px solid var(--sc-border);
	border-radius: 6px;
	padding: 8px 10px;
	box-sizing: border-box;
	height: auto;
}
/* El botón "limpiar filtro" (X) del buscador es innecesario → lo ocultamos.
   Su contenedor .input-group-btn era el rectángulo rosa. */
#create_score .multiselect-container .input-group-btn,
#create_score .multiselect-container .multiselect-clear-filter {
	display: none !important;
}
/* Por si algún botón interno más aparece: nunca estilo de botón rosa */
#create_score .multiselect-container button,
#create_score .btn-group .multiselect-container button,
#create_score .multiselect-container .btn.btn-default {
	background: transparent !important;
	color: #9aa3ad !important;
	border: none !important;
	box-shadow: none !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	padding: 0 8px !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 400 !important;
}
/* El addon del buscador (lupa) es innecesario y añade padding-left → ocultar */
#create_score .multiselect-container .input-group-addon {
	display: none !important;
}
/* Grupos (optgroup) del multiselect: el <a> no debe verse como botón */
#create_score .multiselect-container li.multiselect-group > a {
	background: transparent !important;
	padding: 8px 10px 4px !important;
}
#create_score .multiselect-container li.multiselect-group label {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	min-height: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   INSTRUMENTACIÓN (step-3) — layout unificado
   Un solo sistema para toda la sección: paneles de "agregar", filas de
   instrumentos agregados, fila de mutación, resultados y espaciado.
   Regla base: todo control (input / select2 / botón) mide 46px de alto y
   las filas se alinean por su base (align-items: flex-end).
   ══════════════════════════════════════════════════════════════════════ */

:root { --sc-ctrl-h: 46px; }

/* ---- Panel contenedor "Agregar instrumento / solista / mutación" ---- */
#create_score .sc-instrument-adder {
	display: block !important;
	background: #faf7f8;
	border: 1px solid #efe3e8;
	border-radius: 8px;
	padding: 16px;
	margin-top: 12px;
}

/* ---- Fila de campos (Cantidad | Instrumento | Muta | botón mutación) ---- */
#create_score .sc-instrument-fields {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: flex-end;   /* alinear todos los controles por su base */
	gap: 14px;
}

#create_score .sc-instrument-fields .sc-field {
	display: flex !important;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 !important;
}

/* Label de cada campo: altura fija para que los controles empiecen parejos */
#create_score .sc-instrument-fields .sc-field > label {
	display: block;
	height: 20px;
	line-height: 20px;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 14px;
	white-space: nowrap;
	overflow: visible;
}

/* Anchos de cada campo */
#create_score .sc-field-qty { flex: 0 0 100px; width: 100px; }
#create_score .sc-field-instrument { flex: 1 1 240px; min-width: 200px; }
#create_score .sc-field-muta { flex: 0 0 60px; width: 60px; align-items: center; }
#create_score .sc-field-mutation-btn { flex: 0 0 auto; }

/* TODOS los controles a la misma altura, sin márgenes que descuadren */
#create_score .sc-instrument-fields .form-control,
#create_score .sc-instrument-fields input[type="number"],
#create_score .sc-instrument-fields .select2-container .select2-selection--single,
#create_score .sc-instrument-fields .sc-field-mutation-btn .btn-primmary {
	height: var(--sc-ctrl-h) !important;
	min-height: var(--sc-ctrl-h) !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* El select2 ocupa todo el ancho de su campo y centra su contenido a 46px */
#create_score .sc-instrument-fields .select2-container { width: 100% !important; }
#create_score .sc-instrument-fields .select2-selection--single .select2-selection__rendered {
	line-height: 44px !important;
	padding-left: 12px !important;
}
#create_score .sc-instrument-fields .select2-selection--single .select2-selection__arrow {
	height: 44px !important;
}

/* Campo "Muta": label arriba (parejo con los demás) y checkbox estilizado, centrado
   dentro de una caja de 46px para alinear su base con los inputs vecinos. */
#create_score .sc-field-muta {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#create_score .sc-field-muta > label { text-align: center; width: 100%; }
/* Zona del control (46px de alto, igual que los inputs vecinos) donde el checkbox
   de 24px queda centrado con márgenes automáticos. Así su centro coincide con el de
   Cantidad/Instrumento y no desborda la caja. */
#create_score .sc-field-muta input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	/* El control vecino mide 46px; el checkbox 24px. Para centrar su cuadro en esa
	   franja, lo bajamos (46-24)/2 = 11px respecto al inicio del área de control. */
	margin: 11px 0 11px 0;
	box-sizing: border-box;
	border: 2px solid #e0c4cd;
	border-radius: 6px;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
#create_score .sc-field-muta input[type="checkbox"]:hover {
	border-color: #F84982;
}
#create_score .sc-field-muta input[type="checkbox"]:checked {
	background: #F84982;
	border-color: #F84982;
}
/* Palomita (check) dibujada con CSS */
#create_score .sc-field-muta input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* El checkbox se atenúa (no clicable) cuando el instrumento no admite mutación
   (el JS legacy pone z-index:-1 en línea; lo reflejamos con opacity). */
#create_score .sc-field-muta.mutation-checkbox { position: relative; z-index: 1; }
#create_score .sc-field-muta.mutation-checkbox[style*="-1"] {
	opacity: 0.3;
	pointer-events: none;
}

/* Botón "Agregar mutación": misma altura que los controles, texto BLANCO legible,
   fondo rosa. (La clase greenBtn heredada dejaba el texto rosa sobre rosa = ilegible.) */
#create_score .sc-field-mutation-btn .btn-primmary,
#create_score .addMutation {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	margin: 0 !important;
	padding: 0 22px !important;
	background: #F84982 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-weight: bold !important;
	text-transform: uppercase;
	font-size: 14px !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
#create_score .sc-field-mutation-btn .btn-primmary:hover,
#create_score .addMutation:hover {
	background: #D63268 !important;
	color: #fff !important;
}

/* ---- Zona de acción: botón "Agregar instrumento" centrado ---- */
#create_score .sc-instrument-actions {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}
#create_score .sc-instrument-actions .btn-primmary {
	min-width: 240px;
	text-align: center;
}
#create_score .sc-instrument-actions .disabledBtn {
	opacity: 0.5;
	pointer-events: none;
}

/* ---- Fila de MUTACIÓN (mismo sistema que la fila de campos) ---- */
#create_score .sc-mutation-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin: 14px 0 0 !important;
	padding: 14px;
	background: #fbfae8;
	border: 1px solid #ece9c9;
	border-radius: 8px;
	width: 100% !important;
	box-sizing: border-box;
}
#create_score .sc-mutation-row .sc-field {
	display: flex !important;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 !important;
}
#create_score .sc-mutation-row .sc-field > label {
	display: block;
	height: 20px;
	line-height: 20px;
	margin: 0 0 6px !important;
	font-size: 14px;
	white-space: nowrap;
}
#create_score .sc-mutation-row .form-control,
#create_score .sc-mutation-row input[type="number"],
#create_score .sc-mutation-row .select2-container .select2-selection--single {
	height: var(--sc-ctrl-h) !important;
	min-height: var(--sc-ctrl-h) !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
#create_score .sc-mutation-row .select2-container { width: 100% !important; }
#create_score .sc-mutation-row .select2-selection--single .select2-selection__rendered { line-height: 44px !important; padding-left: 12px !important; }
#create_score .sc-mutation-row .select2-selection--single .select2-selection__arrow { height: 44px !important; }
#create_score .sc-mutation-row .sc-row-remove {
	margin-left: auto !important;
	align-self: flex-end;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}

/* ---- Filas de instrumentos YA agregados ---- */
#create_score .organicsSection,
#create_score .organicSectionSoloist { width: 100%; }

#create_score .sc-organic-row {
	display: flex !important;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid #f0e6ea;
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box;
}
/* Cantidad: mismo ancho (100px) que el campo del adder para alinear columnas */
#create_score .sc-organic-row .sc-row-qty {
	flex: 0 0 100px !important;
	width: 100px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}
#create_score .sc-organic-row .sc-row-name {
	flex: 1 1 auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	word-break: break-word;
}
#create_score .sc-organic-row .sc-row-mutation {
	flex: 0 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
#create_score .sc-organic-row .sc-row-remove {
	flex: 0 0 auto !important;
	margin-left: auto !important;
	width: auto !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
#create_score .sc-organic-row p { margin: 0 !important; font-size: 15px; }

/* ---- Botón papelera (borde único y uniforme, sin doble borde) ---- */
#create_score .sc-row-remove a.btn,
#create_score .sc-row-remove a.removeOrganic,
#create_score .sc-row-remove a.removeOrganicSoloist,
#create_score .sc-row-remove a.removeOrganicMutation {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #fff !important;
	color: #D63268 !important;
	border: 1px solid #e0c4cd !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	line-height: 1 !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#create_score .sc-row-remove a.btn:hover,
#create_score .sc-row-remove a.removeOrganic:hover,
#create_score .sc-row-remove a.removeOrganicSoloist:hover,
#create_score .sc-row-remove a.removeOrganicMutation:hover {
	background: #D63268 !important;
	border-color: #D63268 !important;
	color: #fff !important;
}
#create_score .sc-row-remove a.btn i { font-size: 16px; line-height: 1; }

/* ---- Espaciado del step-3: quitar <br> sueltos y títulos uniformes ---- */
#step-3 > br,
#step-3 #soloist > br,
#step-3 .organic-message + br { display: none; }

#step-3 h4 { margin: 28px 0 14px !important; font-size: 18px; }
#step-3 #soloist > h4:first-child { margin-top: 8px !important; }

#step-3 .organic-result-total,
#step-3 .organic-soloist-result-total { margin: 6px 0 0; line-height: 1.6; }

/* Fórmula orgánica y resultado solista: destacados (grande, itálica, rosa, bold) */
#step-3 .organic-formula,
#step-3 .organic-soloist-result-total {
	font-size: 22px !important;
	font-style: italic !important;
	font-weight: 700 !important;
	color: #F84982 !important;
	line-height: 1.5;
}
#step-3 .organic-voices,
#step-3 .organic-percussions {
	font-size: 16px;
	color: #333;
	margin-top: 4px;
}
#step-3 .organic-voices .voices,
#step-3 .organic-percussions .percussions {
	font-style: italic;
	font-weight: 700;
	color: #F84982;
}
#step-3 #soloist .form-group.col-12.mb-5 { margin-bottom: 20px !important; }

/* Mensaje informativo "Selecciona y agrega instrumentos" */
#step-3 .organic-message {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #eef6f8;
	color: #17607a;
	border: 1px solid #cfe6ec;
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 4px;
	font-size: 14px;
}
#step-3 .organicsSection.row { display: block; margin: 0 0 4px; }