@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url(https://ka-p.fontawesome.com/assets/4992460b2f/96366231/kit.css?token=4992460b2f);

.readonly-style {
    background-color: #e9ecef !important; /* color similar al de disabled */
    cursor: not-allowed;
    opacity: 1;
}

.text-blue-soft {
    color: #5a9bd5; /* Azul suave, más claro que text-primary */
}

.placeholder-suave::placeholder {
    color: #bbb !important;
}


.puntaje-pill {
    display: inline-block;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.4rem, 6vw, 4.2rem); /* grande en el título */
    line-height: 1;
    padding: .1em .45em;
    margin-left: .35rem;
    border-radius: 16px;
    color: #0f5132; /* similar al success */
    background: linear-gradient(135deg,#c8f7da,#89f0b4);
    box-shadow: 0 0 0 3px rgba(25,135,84,.12), 0 10px 24px rgba(25,135,84,.25);
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

    .puntaje-pill.sm {
        font-size: clamp(1.1rem, 3.2vw, 1.6rem); /* versión más discreta para el 2º cuadro */
        padding: .05em .4em;
        margin: 0 .15rem;
    }