#caja1 {
    background: #ad5389;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

#caja2 {
    background: #1a2a6c;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

#caja3 {
    background: #000046;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #1CB5E0, #000046);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1CB5E0, #000046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

#caja4 {
    background: #8A2387;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F27121, #E94057, #8A2387);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F27121, #E94057, #8A2387); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}


#caja5 {
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

#caja6 {
    background: #c31432;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

#caja7 {
    background: #6A9113;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #141517, #6A9113);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #141517, #6A9113); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

#caja8 {
    color: #fff;
    background: #c94b4b;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #4b134f, #c94b4b);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #4b134f, #c94b4b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

#caja9 {
    color: #fff;
    background: #1D4350;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #A43931, #1D4350);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #A43931, #1D4350); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#caja10 {
    color: #fff;
    background: #314755;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #26a0da, #314755);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #26a0da, #314755); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#caja11 {
    color: #fff;
    background: #799F0C;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #ACBB78, #799F0C);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #ACBB78, #799F0C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#fondoLogin {
    background: #1e3c72;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2a5298, #1e3c72);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2a5298, #1e3c72); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#colorGrafico {
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#calendar {
    width: 90%;
    margin: 0px auto;
    overflow: hidden;
}

.fc-content .fc-title {
    font-size: 15px;
    font-weight: 500;
}

#calendar .fc-day-grid-event {
    padding: 2px 0px;
}

#cont__services {
    display: none;
}

#tblServices td {
    vertical-align: middle;
}

#tblServices .th__notas, #tblServices .td__notas {
    display: none;
}

.PENDIENTE {
    color: #F0DE06 ;
}

.DISPONIBLE {
    color: #07C7DA;
}

.FINALIZADO {
    color: #7EF006;
}

.PENDIENTE, .DISPONIBLE, .FINALIZADO {
    font-weight: 550;
}
       /* .card {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
            border: 1px solid rgba(255, 255, 255, 0.04);
            padding: 18px;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            align-items: center;
        }*/

        .title {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .gauge-svg {
            width: 100%;
            height: auto;
            max-width: 340px;
            display: block;
        }

        .percent {
            font-size: 18px;
            margin-top: 6px;
            color: #eee;
        }

        .low {
            color: #ff5252;
            font-weight: 700;
            margin-top: 6px;
            display: none;
        }

        .controls {
            grid-column: 1 / -1;
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: center;
            margin-top: 6px;
        }

        input[type=range] {
            width: 420px;
        }

        /* Make the SVG group transform animate smoothly */
        .needle-group {
            transition: transform 0.6s cubic-bezier(.2, .9, .2, 1);
            transform-box: fill-box;
        }

        .note {
            font-size: 13px;
            color: var(--muted);
            margin-top: 6px;
        }

        @media (max-width:720px) {
            .app {
                grid-template-columns: 1fr;
            }

            input[type=range] {
                width: 90%;
            }
        }

        .needle {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 4px;
            height: 120px;
            background: linear-gradient(to top, #d00 60%, #600);
            border-radius: 2px;
            transform-origin: 50% 100%;
            /* pivot fijo abajo */
            transform: rotate(-90deg);
            /* empieza en E */
            transition: transform 0.4s ease-out;
            box-shadow: 0 0 6px rgba(255, 0, 0, 0.6);
        }