/*==================================================
    ESTUDIO MUSICAL
    VERSION 1.1
==================================================*/

body{

    background:#f5f6f8;

    font-family:Arial, Helvetica, sans-serif;

}


/*==================================================
    CARD PRINCIPAL
==================================================*/

.card{

    border:none;

    border-radius:12px;

}

.card-header{

    border-top-left-radius:12px !important;

    border-top-right-radius:12px !important;

}


/*==================================================
    LABELS
==================================================*/

.form-label{

    font-weight:bold;

}


/*==================================================
    INPUTS
==================================================*/

input[readonly]{

    background:#ffffff !important;

    font-weight:bold;

    font-size:20px;

    text-align:center;

}


/*==================================================
    TABLA
==================================================*/

table{

    margin-top:20px;

}

table td{

    width:110px;

    height:110px;

    text-align:center;

    vertical-align:middle;

}


/*==================================================
    COMPASES
==================================================*/

.compasPendiente{

    background:#ffffff;

    transition:all .25s;

}

.compasActual{

    background:#ffe066 !important;

    transition:all .25s;

}

.compasEjecutado{

    background:#8fd694 !important;

    transition:all .25s;

}


/*==================================================
    NUMERO COMPAS
==================================================*/

.numeroCompas{

    font-size:24px;

    font-weight:bold;

    margin-bottom:10px;

}


/*==================================================
    SELECT NOTA
==================================================*/

.compasSelect{

    width:75px;

    margin:auto;

    text-align:center;

    font-weight:bold;

}


/*==================================================
    SELECT INSTRUMENTO
==================================================*/

#instrumento{

    font-weight:bold;

}


/*==================================================
    BOTONES
==================================================*/

.btn{

    min-width:130px;

}


/*==================================================
    EFECTO SOBRE COMPAS
==================================================*/

.compasActual{

    transform:scale(1.03);

    box-shadow:0 0 10px rgba(255,193,7,.45);

}

.compasEjecutado{

    color:#000;

}

.compasPendiente{

    color:#000;

}


/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:992px){

    table td{

        width:90px;

        height:90px;

    }

    .numeroCompas{

        font-size:20px;

    }

    .compasSelect{

        width:65px;

    }

}


@media(max-width:768px){

    table td{

        width:75px;

        height:75px;

    }

    .numeroCompas{

        font-size:18px;

    }

    .compasSelect{

        width:58px;

        font-size:13px;

    }

    .btn{

        width:100%;

        margin-bottom:10px;

    }

}

/*=========================================
INDICADOR DE PULSO
=========================================*/

.indicadorPulso{

    font-size:18px;

    font-weight:bold;

    color:#0d6efd;

    letter-spacing:3px;

    margin:6px 0;

    user-select:none;

}


/*=========================================
INDICADOR DE PULSOS
=========================================*/

.indicadorPulso{

    display:flex;

    justify-content:center;

    gap:6px;

    margin:6px 0 8px;

    font-size:18px;

    user-select:none;

}

.pulsoActivo{
    color:#0d6efd;
    font-weight:bold;

}

.pulsoInactivo{

    color:#bdbdbd;

}

#tablaTemas tbody tr{
    cursor:pointer;
}

#tablaTemas tbody tr:hover{
    background:#eef6ff;
}



.transport-bar{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    z-index:1050;

    background:#ffffff;

    border-top:1px solid #ddd;

    padding:10px;

    box-shadow:0 -2px 8px rgba(0,0,0,.15);

}


/*=========================================
BARRA STICKY (SOPORTE TOTAL MÓVIL Y ESCRITORIO)
=========================================*/
#barraSticky {
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky;
    z-index: 1030;            /* Mayor que el z-index estándar de Bootstrap (1020) para evitar que la pisen otros elementos */
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
}

/* En dispositivos móviles (cuando las columnas se apilan) */
@media (max-width: 991.98px) {
    #barraSticky {
        top: 0 !important;    /* Pegado al borde superior absoluto de la pantalla móvil */
        margin-left: -1rem;   /* Rompe ligeramente el padding lateral del contenedor en móviles */
        margin-right: -1rem;
        border-radius: 0;     /* Bordes planos para simular barra de app nativa */
        border-left: none;
        border-right: none;
    }
}

/* En pantallas de escritorio (cuando está al lado de la barra lateral) */
@media (min-width: 992px) {
    #barraSticky {
        top: 15px;            /* Espacio estético superior en desktop */
        border-radius: 8px;   /* Conserva sus bordes redondeados elegantes */
    }
}

/* Evita que los bordes de la tarjeta se rompan visualmente al volverse fija */
#barraSticky .card-body {
    background-color: #ffffff;
}

/* Ajustes adicionales necesarios */
.pulsoBox {
    padding: 4px;
    border-radius: 8px;
    transition: .15s;
}

.pulsoActivo {
    background: #28a745 !important;
    color: white !important;
    font-weight: bold;
    transition: .15s;
}

.notaOculta {
    opacity: .10;
}

/* Optimización visual para los sliders del mezclador */
.form-range {
    height: 1.2rem;
    padding: 0;
}

/* Espacio óptimo para la tabla de compases */
#contenedorTabla {
    background-color: #fafbfc;
    max-height: 60vh; /* Ajustado ligeramente para dejar espacio a la barra en pantallas pequeñas */
    overflow-y: auto;
}