.calculator-screen {

        display: none;

        text-align: center;

        margin-top: 10px;

        padding: 10px;

    }

    .calculator-screen h2 {

        font-size: 22px;

        margin-bottom: 15px;

    }

    #change-client-button {

        padding: 10px 20px;

        border: none;

        border-radius: 10px;

        background-color: #555;

        color: white;

        font-size: 15px;

        cursor: pointer;

    }

    /* Miliamperios */

    .calculator-top {

        display: flex;

        justify-content: space-between;

        align-items: center;

        width: 90%;

        margin: -20px auto 10px auto;

    }

    #calculator-client-name {

        margin: 0;

    }

    #change-client-button {

        margin: 0;

    }
    .calculator-row {

        display: flex;

        gap: 10px;

        width: 90%;

        margin: 10px auto;

    }

    .calculator-row input {

        flex: 1;

    }

    .calculator-screen input {

        width: 100%;

        margin: 0;

        border-radius: 10px;

        border: 1px solid #ccc;

        font-size: 15px;

        display: block;

        box-sizing: border-box;

    }
    .floating-group {

        position: relative;

        flex: 1;

        margin: 10px auto;

    }

    .floating-group input {

        width: 100%;

        padding: 10px;

        border: 1px solid #ccc;

        border-radius: 10px;

        font-size: 15px;

        box-sizing: border-box;

    }

    .floating-group label {

        position: absolute;

        left: 4px;

        top: 12px;

        color: #777;

        background: white;

        padding: 0 4px;

        transition: 0.2s;

        pointer-events: none;

    }

    .floating-group input:focus + label,

    .floating-group input:valid + label {

        top: -8px;

        left: 10px;

        font-size: 12px;

        color: #555;

    }
    /* BOTON CALCULAR */
.calculate-btn {

    width: 92%;

    padding: 15px;

    margin-top: 5px;

    border: none;

    border-radius: 14px;

    font-size: 18px;

    font-weight: 800;

    background: #c8c8c8;

    color: black;

    cursor: pointer;

}
.result-card {

    background: #f3f4f6;

    border: 2px solid #d1d5db;

    text-align: left;

    border-radius: 12px;

    padding: 15px;

    margin: 15px auto;

    width: 90%;

    box-sizing: border-box;

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

}
.result-title {

    text-align: left;

    margin: 6px 0;

}

.result-date {

    text-align: left;

    display: block;

    margin: 6px 0;

}

.result-row {

    margin: 6px 0;

    text-align: left;

}

.result-row-power {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    margin: 6px 0;

}

.result-label {

    flex: 1;

    font-weight: normal;

    text-align: left;

}

.result-value {

    font-weight: bold;

}
.watch-ad-btn {

    width: 65%;

    display: block;

    margin: 10px auto 0 auto;

    padding: 8px;

    border: none;

    border-radius: 12px;

    font-size: 13px;

    background: #607d8b;

    color: white;

    cursor: pointer;

}

.history-btn {

    width: 92%;

    padding: 14px;

    margin: 15px auto 25px auto;

    display: block;

    border: none;

    border-radius: 14px;

    font-size: 15px;

    font-weight: 600;

    background: #dceeff;

    color: #1f5fa8;

    cursor: pointer;

}