input[type="file"] {
    display: none;
}

.custom-file-upload {
    background-color: #F84982;
    color: #fff !important;
    border: none;
    padding: 8px 20px;
    font-family: 'Montserrat' !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    cursor: pointer;
    display: inline-block;
}

.upload-message {
    margin-top: 5px;
    font-size: 14px;
}

/* ── Hover de botones rosa: rosa un poco más oscuro + texto blanco ── */
#filterScores:hover,
#cleanFilters:hover,
.score-data-buttons button:hover,
.btn-main:hover,
.btn-primmary:hover,
.scoreBtn .wp-block-button__link:hover,
.custom-file-upload:hover,
.send-report:hover,
.send-report-pt:hover {
    background-color: #D63268 !important;
    color: #fff !important;
    border-color: #D63268 !important;
    transition: background-color 0.15s ease-in-out;
}

/* ── Botonera de la ficha (Ver ficha / Descargar ficha / Reportar error) ──
   Antes era `display:block` con botones inline-block + margin-right, lo que en
   pantallas angostas los dejaba escalonados y desalineados. Se pasa a flex con
   wrap y gap uniforme para que se acomoden ordenados y, en móvil, ocupen el
   ancho completo apilados. */
.score-data-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.score-data-buttons > button,
.score-data-buttons > .btn-primmary {
    margin: 0 !important;      /* anula el margin-right de 25px heredado */
    flex: 0 1 auto;
}
@media (max-width: 600px) {
    .score-data-buttons {
        flex-direction: column;
    }
    .score-data-buttons > button,
    .score-data-buttons > .btn-primmary {
        width: 100%;
        text-align: center;
    }
}

/* Botón de cierre (X) de los modales: mismo criterio (rosa oscuro + blanco) */
a.close-modal:hover,
.close-modal:hover {
    background-color: #D63268 !important;
    color: #fff !important;
    cursor: pointer;
}

/* ── Botón "X" para quitar un filtro activo (query-tag): cursor de mano ── */
.query-tag .remove-tag {
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}
.query-tag .remove-tag:hover {
    color: #D63268;
}

/* ── Ficha de la obra (modal "Ver ficha"): más aire en las celdas de las tablas ── */
.score-data-modal .info-table th,
.score-data-modal .info-table td,
.score-data-modal .info-content-4 th,
.score-data-modal .info-content-4 td,
.score-modal-content .info-table th,
.score-modal-content .info-table td {
    padding: 10px 16px !important;
    vertical-align: top;
    line-height: 1.5;
}

/* Separación entre filas para que no se vean apretadas */
.score-data-modal .info-table tr,
.score-data-modal .info-content-4 tr {
    border-bottom: 1px solid #f0e6ea;
}

/* Enlaces de video/audio: estilo de hipervínculo rosado */
.score_link {
    color: #F84982 !important;
    text-decoration: underline !important;
    font-weight: 600;
    transition: color 0.15s ease-in-out;
}
.score_link:hover {
    color: #D63268 !important;
    text-decoration: underline !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   Modal "Seleccionar instrumentos" del buscador (#instrumentList,
   #instrumentSoloistList).

   El markup de la fila de campos se reescribió a un grid limpio con clases
   propias .sc-instr-* (ver inc/score-filters.php). Se conservan las clases
   funcionales que usa el JS (.instrument-select-fixed, .min-instruments,
   .max-instruments, .instrument-musicians-fixed, .numberRange, .numberFixed,
   name="numberType", etc.).

   Sistema: controles de 40px de alto, borde neutro #d9d3d6, radios rectos
   (1px, como el resto del plugin), foco rosa. Paleta rosa #F84982/#D63268.
   ───────────────────────────────────────────────────────────────────────── */

/* — Diálogo: centrado real y ancho amplio. El tema fija max-width:50% y
   márgenes laterales; ganamos con especificidad .modal#id (no por orden). — */
.modal#instrumentList .modal-dialog,
.modal#instrumentSoloistList .modal-dialog {
    max-width: 860px !important;
    width: 94% !important;
    margin: 48px auto !important;
    left: 0 !important;
    right: 0 !important;
}
#instrumentList .modal-content,
#instrumentSoloistList .modal-content {
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 24px 60px rgba(23, 96, 122, 0.22) !important;
    overflow: visible;
}

/* — Encabezado — */
#instrumentList .project-header,
#instrumentSoloistList .project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px !important;
    border-bottom: 1px solid #f0e6ea;
    position: relative;
}
#instrumentList .project-header h3,
#instrumentSoloistList .project-header h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #F84982;
}

/* — Botón cerrar (X): igual al de los otros modales del plugin — */
#instrumentList .close-modal,
#instrumentSoloistList .close-modal {
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    padding: 12px !important;
    background: #F84982 !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-size: 25px !important;
    font-weight: bold;
    line-height: 1 !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
#instrumentList .close-modal:hover,
#instrumentSoloistList .close-modal:hover {
    background: #D63268 !important;
}

/* — Cuerpo — */
#instrumentList .info-content,
#instrumentSoloistList .info-content {
    padding: 24px 28px !important;
}

/* Select de tipo de búsqueda (arriba) */
#instrumentList .info-content > .col-md-12 > select.select,
#instrumentSoloistList .info-content > .col-md-12 > select.select {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid #d9d3d6 !important;
    border-radius: 1px !important;
    font-size: 14px !important;
    background-color: #fff;
    color: #333;
}

/* Mensaje de ayuda (recuadro punteado) */
#instrumentList .organic-message,
#instrumentSoloistList .organic-message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #17607a;
    font-size: 15px;
    line-height: 1.45;
}
#instrumentList .organicsSection,
#instrumentSoloistList .organicSectionSoloist {
    margin: 4px 0 20px !important;
}

/* — Caja "agregar instrumento" — */
#instrumentList .addBtnSection,
#instrumentSoloistList .addBtnSection {
    position: relative;
    background: #fafafa !important;
    border: 1px solid #ececec !important;
    border-radius: 4px !important;
    padding: 22px !important;
    margin: 0 0 4px !important;
}
/* Velo de campos deshabilitados (hasta elegir tipo de búsqueda) */
#instrumentList .addBtnSection .backgroundOver,
#instrumentSoloistList .addBtnSection .backgroundSoloistOver {
    background: rgba(250, 250, 250, 0.6) !important;
    border-radius: 4px;
    z-index: 2;
}

/* — Grid de campos (markup nuevo .sc-instr-*) — */
#instrumentList .sc-instr-fields,
#instrumentSoloistList .sc-instr-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;   /* controles alineados por su base */
    gap: 18px;
}
/* Cada campo: label arriba (altura fija para alinear) + control abajo */
#instrumentList .sc-instr-field,
#instrumentSoloistList .sc-instr-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#instrumentList .sc-instr-field--instrument,
#instrumentSoloistList .sc-instr-field--instrument { flex: 2 1 260px; }
#instrumentList .sc-instr-field--type,
#instrumentSoloistList .sc-instr-field--type { flex: 1 1 150px; }
#instrumentList .sc-instr-field--num,
#instrumentSoloistList .sc-instr-field--num { flex: 0 1 110px; }

/* Labels uniformes, altura fija (cabe 1-2 líneas), alineados arriba */
#instrumentList .sc-instr-field > label,
#instrumentSoloistList .sc-instr-field > label {
    display: flex;
    align-items: flex-start;
    height: 36px;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.3;
    color: #555;
}
#instrumentList .sc-instr-field > label b,
#instrumentSoloistList .sc-instr-field > label b { font-weight: 600; }

/* Todos los controles: misma altura 40px, borde/radio consistentes */
#instrumentList .sc-instr-field select,
#instrumentList .sc-instr-field input.input-number,
#instrumentList .sc-instr-field .select2-selection--single,
#instrumentSoloistList .sc-instr-field select,
#instrumentSoloistList .sc-instr-field input.input-number,
#instrumentSoloistList .sc-instr-field .select2-selection--single {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #d9d3d6 !important;
    border-radius: 1px !important;
    font-size: 14px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    color: #333;
}
/* Select2 (instrumento): que su contenedor llene la columna y alinee a 40px */
#instrumentList .sc-instr-field .select2-container,
#instrumentSoloistList .sc-instr-field .select2-container { width: 100% !important; }
#instrumentList .sc-instr-field .select2-selection--single .select2-selection__rendered,
#instrumentSoloistList .sc-instr-field .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding: 0 !important;
    color: #333;
}
#instrumentList .sc-instr-field .select2-selection--single .select2-selection__arrow,
#instrumentSoloistList .sc-instr-field .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}
/* Foco rosa suave */
#instrumentList .sc-instr-field select:focus,
#instrumentList .sc-instr-field input.input-number:focus,
#instrumentSoloistList .sc-instr-field select:focus,
#instrumentSoloistList .sc-instr-field input.input-number:focus {
    outline: none;
    border-color: #F84982 !important;
    box-shadow: 0 0 0 3px rgba(248, 73, 130, 0.15);
}

/* Estado inicial: los campos de número (Cantidad / Mín / Máx) ocultos hasta
   elegir "Tipo de número". El JS los muestra con .show() (display inline gana).
   Así no aparecen los 3 juntos y desordenados al abrir el modal. */
#instrumentList .sc-instr-field.numberFixed,
#instrumentList .sc-instr-field.numberRange,
#instrumentSoloistList .sc-instr-field.numberFixed,
#instrumentSoloistList .sc-instr-field.numberRange {
    display: none;
}

/* — Acciones — */
#instrumentList .sc-instr-actions,
#instrumentSoloistList .sc-instr-actions {
    margin-top: 20px;
}

/* — Botones (rosa, texto blanco, rectos como el resto del plugin) — */
#instrumentList .addOrganic,
#instrumentList .addOrganicSoloist,
#instrumentList .btn-main,
#instrumentSoloistList .addOrganic,
#instrumentSoloistList .addOrganicSoloist,
#instrumentSoloistList .btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px !important;
    color: #fff !important;
    background-color: #F84982 !important;
    border: none !important;
    border-radius: 1px !important;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
#instrumentList .addOrganic:hover,
#instrumentList .addOrganicSoloist:hover,
#instrumentList .btn-main:hover,
#instrumentSoloistList .addOrganic:hover,
#instrumentSoloistList .addOrganicSoloist:hover,
#instrumentSoloistList .btn-main:hover {
    color: #fff !important;
    background-color: #D63268 !important;
}
#instrumentList .addOrganic.disabledBtn,
#instrumentSoloistList .addOrganic.disabledBtn {
    background-color: #f4a9c4 !important;
    cursor: not-allowed;
}

/* — Footer — */
#instrumentList .modal-footer,
#instrumentSoloistList .modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 18px 28px !important;
    border-top: 1px solid #f0e6ea !important;
}

/* — Responsive — */
@media (max-width: 700px) {
    .modal#instrumentList .modal-dialog,
    .modal#instrumentSoloistList .modal-dialog {
        width: 96% !important;
        margin: 20px auto !important;
    }
    #instrumentList .sc-instr-field,
    #instrumentSoloistList .sc-instr-field { flex: 1 1 100% !important; }
    #instrumentList .modal-footer .btn-main,
    #instrumentSoloistList .modal-footer .btn-main { width: 100%; }
}

/* — Filas de instrumento AGREGADO (las genera el JS con grid Bootstrap roto:
   .score-organic-row / .soloist-organic-row > .instrument-quantity-group +
   .col-md-6 (nombre) + .remove-instrument-row). Se ordenan con flex: cantidad
   y nombre juntos a la izquierda, papelera a la derecha. — */
#instrumentList .score-organic-row,
#instrumentSoloistList .soloist-organic-row {
    display: flex !important;
    align-items: center;
    gap: 16px;
    width: 100%;
    float: none;
    margin: 0 0 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
}
/* Cantidad: ancho fijo pequeño, no se estira */
#instrumentList .score-organic-row .instrument-quantity-group,
#instrumentSoloistList .soloist-organic-row .instrument-quantity-group {
    flex: 0 0 auto;
    width: auto;
    min-width: 48px;
    float: none;
    padding: 0;
    font-weight: 600;
    color: #17607a;
}
#instrumentList .score-organic-row .instrument-quantity-group p,
#instrumentSoloistList .soloist-organic-row .instrument-quantity-group p {
    margin: 0;
}
/* Nombre del instrumento: ocupa el espacio disponible */
#instrumentList .score-organic-row > .col-md-6,
#instrumentSoloistList .soloist-organic-row > .col-md-6 {
    flex: 1 1 auto;
    width: auto;
    float: none;
    padding: 0;
}
#instrumentList .score-organic-row .organic-name,
#instrumentSoloistList .soloist-organic-row .organic-soloist-name {
    margin: 0;
    color: #333;
}
/* Papelera: pegada a la derecha, sin el offset de Bootstrap ni el label truco */
#instrumentList .score-organic-row .remove-instrument-row,
#instrumentSoloistList .soloist-organic-row .remove-instrument-soloist-row {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 auto;   /* empuja a la derecha */
    float: none;
    padding: 0;
}
#instrumentList .score-organic-row .remove-instrument-row label,
#instrumentSoloistList .soloist-organic-row .remove-instrument-soloist-row label {
    display: none;   /* el <label>.</label> era un truco de alineación del grid viejo */
}