:root {
    --background-color: #E20816;
    --dark-background-color: #E20816;
    --button-color: #E20816;
    --button-color-hover: #C8000D;
    --aqua-background: #F1F1F1;
    --ruby-background: #FCE3E4;
    --ruby-border: #FCC9CC;
    --vulcan-background: #FCE6E8;
    --vulcan-border: #F5ABAF;
    --popup-background-color: #F7A8AD;
    --white: #FFFFFF;
    --red: #E20816;
    --light-red: #E95652;
    --red-hover: #C8000D;
    --blue: #6E9DF8;
    --blue-hover: #5A8AE0;
    --light-blue: #7A9BAE;
    --dark-blue: #4C6A85;
    --light-green: #A6B8B2;
    --dark-blue-hover: #445F78;
    --dark-green: #6F867F;
    --dark-green-hover: #5A6F68;
    --light-gray: #CCCCCC;
    --gray: #585858;
    --black: #000000;
    --tooltip-background: #F9F4AE;
    --tooltip-border: #F9DC59;
}

/* Posicionamiento de botones */
.btn-container {
    z-index: 2;
    padding: 1em;
}

.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

/* Espaciado entre botones */
.btn-spacing {
    margin: 0 2.5px;
}


.btnAlarm {
    margin-left: 2.5px;
    margin-right: 2.5px;
}

.btn {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif !important;
    padding: 8px 14px !important;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
    border: 0;
    
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 2px var(--light-gray);
    transition: background-color 0.3s ease; /* Suaviza la transición */
}

    /* Botón grande */
    .btn.large {
        font-size: 16px !important;
        padding: 8px 30px !important;
/*        font-weight: bold;
*/    }

    /* Botón en negrita */
    .btn.bold {
        font-weight: bold;
    }

    .btn:not(:disabled):hover {
        filter: brightness(90%);
    }

    .btn:disabled {
        cursor: not-allowed;
        opacity: 0.6; /* Hace que se vea más tenue */
    }

    /* Definición de colores */
    .btn.red {
        background-color: var(--red);
    }

        .btn.red:not(:disabled):hover {
            background-color: var(--red-hover);
        }

    .btn.blue {
        background-color: var(--blue);
    }

        .btn.blue:not(:disabled):hover {
            background-color: var(--blue-hover);
        }

    .btn.dark-blue {
        background-color: var(--dark-blue);
    }

        .btn.dark-blue:not(:disabled):hover {
            background-color: var(--dark-blue-hover);
        }

    .btn.dark-green {
        background-color: var(--dark-green);
    }

        .btn.dark-green:not(:disabled):hover {
            background-color: var(--dark-green-hover);
        }

    .btn.color {
        background-color: var(--button-color);
    }

        .btn.color:not(:disabled):hover {
            background-color: var(--button-color-hover);
        }