/*students object*/
.appointmentObject{
    display: flex;
    flex-direction: column;
    background: #00000038;
    padding: 25px 15px;
    margin-bottom: 40px;
    border: solid 1px #6f6f6f;
    --error-msg: attr(form-error);
    gap: 10px;
}
        
.optionSelector select{
    font-size: 15px;
    height: 40px;
    background-color: #bfbfbf;
    padding: 5px 10px;
    padding-right: 30px;
    color: black;
    font-weight: 600;
}
        
.optionSelector select[value="asisti"]{
    background-color: #bdedbd;
}
        
.optionSelector select[value="no-asisti"]{
    background-color: #d194b9;
}
    
    /* attendance  */
    .attendance-toggle{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-top: solid 1px;
        border-bottom: solid 1px;
        padding: 15px;
        gap: 10px;
    }
    
    /* tracking */
    .tracking{
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 18px;
    }
    
    
    /* formative evaluation*/
    .formative-evaluation{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
        /* counter */
        .formative-evaluation .trackingpoints-counter{
            display: block;
            margin: 7px 0;
        }
        
        .formative-evaluation .counter-text{
            font-size: .75em;
            color: whitesmoke;
            margin: 0;
        }
    
        /* tracking segments */
        .formative-evaluation .tracking-segments{
            display: flex;
            flex-direction: column;
            margin-top: 5px;
            gap: 10px;
        }
    
        .formative-evaluation .eval-segment ul{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            list-style: none;
            padding: 0;
            margin: 10px 0;
            gap: 15px;
        }
        
        .formative-evaluation .eval-segment li{
            width: 100%;
        }

        .formative-evaluation .eval-segment select{
            width: 100%;
            color: black;
            background-color: #bfbfbf;
            padding: 4px 35px;
        }
    
    
    /* tracking evaluations */
    .tracking-evaluation{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .tracking-evaluation .tracking-list{
        display: flex;
        flex-direction: column;
        padding-left: 0;
        margin: 0;
        gap: 10px;
    }
    
    .tracking-list .tracking-item{
        display: flex;
        flex-direction: row;
        max-height: 3em;
        border: solid 1px lightgrey;
        border-radius: 8px;
    }
    
    .tracking-list .tracking-item .tracking-text{
        flex-grow: 1;
        font-size: .8em;
        line-height: 1.6;
        padding: 2px 8px;
        margin-top: .2em;
        overflow-y: auto;
    }
    
        /*indicator elements*/
        .tracking-item .indicator-wrapper {
            display: block;
            position: relative;
        }
        
        .tracking-item .indicator-wrapper .indicator{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #b3b3b32e;
            border-left: solid 1px lightgrey;
            border-radius: 0 5px 5px 0;
            padding: 3px;
            cursor: pointer;
        }
        
            /*selection calification*/
            .indicator-wrapper .selection-calification{
                display: block;
                position: absolute;
                top: 100%;
                right: 0;
                width: max-content;
                max-width: 600%;
                background: #000000a6;
                border-radius: 0 0 10px 10px;
                padding: 5px 5px;
                margin-top: 2px;
                z-index: 2;
            }
        
            .indicator-wrapper .selection-calification ul{
                font-size: .7em;
                line-height: 1;
                padding: 0;
                gap: 5px;
            }
        
            .indicator-wrapper .selection-calification li{
                display: block;
                border-bottom: solid 1px lightgrey;
                padding: 5px;
                cursor: pointer;
            }
            .indicator-wrapper .selection-calification li:last-child{
                border: none;
            }
            .indicator-wrapper .selection-calification li:hover, .indicator-wrapper .selection-calification li:focus{
                background: #474747;
            }
    
    /* notes */
    .notes .text-area{
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    
    .notes .options-bar{
        display: flex;
        justify-content: center;
        align-items: center;
        background: #535353;
        border: solid 1px;
        border-left: none;
        padding: 8px;
        margin: 0;
    }
        
        /* options buttons */
        .notes .options-bar button{
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 3.02em;
            min-width: 3.02em;
            max-height: 3em;
            min-height: 3em;
            color: lightgrey;
            background: grey;
            border-radius: 50%;
            padding: 0;
            transition: all .5s ease;
            --icon: "\f130";
            --font-family: "Font Awesome 7 Free";
        }
        .notes .options-bar button:hover{
            transform: scale(1.05);
        }
        .notes .options-bar button::after{
            content: var(--icon);
            font-family: var(--font-family);
            font-weight: 800;
        }
        
            /*status voice option*/
            .notes .options-bar button.active{
                color: white;
                background: #f7a699;
                --icon: "\f111";
            }
            .notes .options-bar button.error{
                color: white;
                background: #ff7070;
                --icon: "\e55d";
            }
        
    
    .notes .notes-text{
        display: block;
        width: 100%;
        max-height: 15em;
        min-height: 5em;
        text-align: left;
        line-height: 1.4 !important;
        background: #d3d3d3b8;
        border: solid 1px lightgrey;
        padding: 5px 8px !important;
        resize: vertical;
    }
    
    /* error box */
    .error-box{
        display: none;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
        line-height: 1.4;
        color: #a74f4f;
        border-radius: 8px;
        background: #ffaeae;
        padding: 5px 10px;
        animation: error-box-anim 1s ease-in-out;
        gap: 8px;
    }
    .appointmentObject[form-error=""] .error-box{
        display: none;
    }
    .appointmentObject[form-error] .error-box{
        display: flex;
    }
    .appointmentObject .error-text::after{
        /* If --error-msg is empty/invalid, use the string */
        content: var(--error-msg, "Se ha identificado un error en este estudiante.");
    }
    
    
    @keyframes error-box-anim{
        from{
            transform: translateY(-18px);
            opacity: .5;
        }
        to{
            transform: translateY(0);
            opacity: 1;
        }
    }