/* CSS styles as provided */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');

.titulo {
    font-family: "Nabla", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "EDPT" 100,
        "EHLT" 12;
}

html {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
}

body {
    background-color: #0b1733;
    height: 100%;
    max-height: 100vh;
    overflow-y: hidden;
}

#app {
    display: grid;
    grid-template-areas:
        "aside header"
        "aside content";
    grid-template-columns: 500px 1fr;
    grid-template-rows: 1fr 10fr;
    height: 100vh;
}

li {
    background-color: #FFFFFF;
    padding: .5em;
    border-radius: .5em;
    margin-bottom: .5em;
    display: flex;
    justify-content: space-between;
    color: #2f353f;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.199);
    /* justify-items: center; */
}

.off li {
    background-color: rgb(229, 229, 229);
    color: #9a9b9d;
    box-shadow: 0px 3px 3px rgba(92, 92, 92, 0.256);
}

.off li>span:last-child {
    background-color: #86858c;
    color: rgba(255, 255, 255, 0.773);
}

li>span:first-child {
    margin-left: .2em;
    align-items: center;
    display: flex;

    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    font-size: 2em;

    max-width: 11em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    /* cursor: default; */
}

li>span:last-child {
    background-color: #FFB945;
    color: white;
    max-width: 3em;
    margin-right: .1em;
    padding: .2em;
    border-radius: .2em;
    width: 3em;
    text-align: center;
    font-size: x-large;

    font-family: "Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
}

li {
    cursor: pointer;
}

aside {
    overflow-y: auto;
    padding-top: 1em !important;
    padding-bottom: 1em;
}

::-webkit-scrollbar {
    width: 8px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 2px;
    background: #FF8825;
    border-radius: 5;
}

::-webkit-scrollbar-track {
    background-color: #ebebeb;
    border-radius: 7px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

input:focus
,#add:focus 
{
    border: solid #FFB945 !important;
}

input,
button {
    -webkit-transition: 0.1s;
    transition: 0.1s;
    outline: none;
}

#clock {
    font-size: 2em;
    font-family: "Rubik", sans-serif;
}

/*  */

/* Personaliza el color del botón "Aceptar" en SweetAlert2 */
.swal2-confirm {
    background-color: #FFB945 !important;
    border-color: #FFB945 !important;
    outline: none;
}

.swal2-confirm:hover {
    background-color: #e8a72e !important; /* Color más oscuro al pasar el cursor */
    border-color: #e8a72e !important;
    outline: none;
}