.gauge {
    background-color: transparent;
    margin: auto;
    width: 100%;
    max-width: 90%;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: 600;
    /*height: auto;*/
    /*overflow: hidden;*/
}

.gaugebody {
    width: 100%;
    height: 0px;
    padding-bottom: 50%;
    background: rgb(255,13,13);
    background: linear-gradient(90deg, rgba(255,13,13,1) 5%, rgba(255,78,17,1) 25%, rgba(255,142,21,1) 42%, rgba(250,183,51,1) 58%, rgba(172,179,52,1) 75%, rgba(105,179,76,1) 95%);
    position: relative;
    border-top-left-radius: 100% 200%;
    border-top-right-radius: 100% 200%;
    overflow: hidden;
    box-shadow: #EBEBEB 0px 2px 0px 0px;
}

    .gaugebody::before {
        z-index: 1;
        color: white;
        content: "E"; /* Agrega la letra E a la izquierda */
        position: absolute;
        left: 4%; /* Ajusta la posición izquierda según tus necesidades */
        top: 90%; /* Ajusta la posición vertical según tus necesidades */
        transform: translateY(-50%);
        font-size: 1.5em; /* Ajusta el tamaño de la letra según tus necesidades */
        font-weight: bold; /* Opcional: establece el grosor de la letra */
        text-shadow: -1px -1px 0 rgb(255,13,13), 1px -1px 0 rgb(255,13,13), -1px 1px 0 rgb(255,13,13), 1px 1px 0 rgb(255,13,13);
    }

    .gaugebody::after {
        z-index: 1;
        content: "F"; /* Agrega la letra F a la derecha */
        position: absolute;
        right: 5%; /* Ajusta la posición derecha según tus necesidades */
        top: 90%; /* Ajusta la posición vertical según tus necesidades */
        transform: translateY(-50%);
        font-size: 1.5em; /* Ajusta el tamaño de la letra según tus necesidades */
        font-weight: bold; /* Opcional: establece el grosor de la letra */
        text-shadow: -1px -1px 0 rgba(105,179,76,1), 1px -1px 0 rgba(105,179,76,1), -1px 1px 0 rgba(105,179,76,1), 1px 1px 0 rgba(105,179,76,1);
    }

.gaugefill, .gaugelimit {
    box-sizing: border-box;
    position: absolute;
    top: 98%;
    left: 0;
    /* width: 100%; */
    height: calc(100% + 5px);
    background: transparent;
    transform-origin: right top;
    transform: rotate(0.0turn);
    transform: translateY(-5px);
    transition: all 0.2s ease-out;
    border-top: 10px solid;
}

.gaugefill {
    transform-origin: center top;
    background: #ffffffbf;
    border-image: linear-gradient(to left, #000 50%, transparent 50%) 100% 1;
    transform: translateY(10px);
    width: 100%;
}

.gaugelimit {
    box-sizing: border-box;
    border-top: 10px solid;
    border-image: linear-gradient(to right, #fff 50%, transparent 50%) 100% 1;
    transform: rotate(0.0turn);
    transform-origin: center top;
    background-image: repeating-linear-gradient(45deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 1.7px, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 50%);
    background-size: 10px 10px;
}

.gaugelimittext {
    opacity: 0;
    box-sizing: border-box;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 98%;
    left: 0;
    background: none;
    background: none;
    transform-origin: center top;
    transition: all 0.2s ease-out;
    z-index: 2;
}

    .gaugelimittext::after {
        content: "Reserva"; /* El texto que quieres mostrar */
        position: absolute; /* Para posicionarlo correctamente sobre el gauge */
        top: -2px; /* Mover el texto por encima del borde */
        left: 2.5px; /* Alineado a la parte izquierda */
        font-size: 0.65em; /* Tamaño de la fuente */
        color: black; /* Color del texto */
        font-weight: bold; /* Hacer el texto en negrita */
        pointer-events: none; /* Evita que el pseudo-elemento interfiera con interacciones */
        z-index: 5;
    }

.gaugecover {
    width: 75%;
    height: 150%;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    /* Texto*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 25%;
    box-sizing: border-box;
}

    .gaugecover ul {
        margin: 0;
        padding: 0;
        text-align: center;
        list-style: none;
    }

.gaugevalue {
    font-size: 1.5em;
}

.gauge svg {
    transition: transform 0.2s ease-out;
    transform-origin: center;
    position: absolute;
    transform: scale(0.75) rotate(2deg);
    max-width: 80%;
    font-size: 22px;
    top: 0;
    opacity: 0;
}

@media (prefers-color-scheme: dark) {

    .gaugebody {
        box-shadow: var(--primary-border-dark-mode) 0px 2px 0px 0px;
    }
    .gaugevalue{
        color:white !important;
    }
    .gaugecover {
        background: var(--primary-background-color-dark-mode);
        color: var(--primary-text-color-dark-mode);
    }
    .gaugelimittext::after {
        color: var(--primary-text-color-dark-mode);
    }
}