/*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;
}

.appointmentObject [hidden]{
    display: none !important;
}

        
.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;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 7px;
        gap: 10px;
        row-gap: 0;
    }
    
    /* tracking */
    .tracking{
        display: flex;
        flex-direction: column;
        width: 100%;
        border-top: solid 1px;
        padding-top: 10px;
        margin-top: 8px;
        gap: 20px;
    }
    
    
    /* 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: #dedede;
            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;
    }

    /*strengths (resolved trackinglines)*/
    .tracking-strengths{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .tracking-strengths .tracking-list{
        display: flex;
        flex-direction: column;
        padding-left: 0;
        margin: 0;
        gap: 10px;
    }

    .tracking-list .strength-item{
        align-items: center;
        border-color: #34a853;
        background: #34a8531a;
    }

    .strength-item .strength-tag{
        flex-shrink: 0;
        align-self: center;
        margin-right: 8px;
        padding: 2px 8px;
        font-size: .7em;
        font-weight: 600;
        color: #1e7e34;
        background: #34a8532e;
        border-radius: 6px;
        white-space: nowrap;
    }

        /*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-wrapper{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 10px 0;
        gap: 16px;
    }
    
    .notes-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    
        /* new note box */
        .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;
        }
        
        /* previous notes */
        .previous-notes-list.hidden{
            display: none;
        }
        
        .notes .note-box{
            width: 300px;
            height: auto;
            font-size: .8em;
            background: #535353;
            --size-crop: 1.2em;
            clip-path: polygon(0 0, calc(100% - var(--size-crop)) 0, 100% var(--size-crop), 100% 100%, var(--size-crop) 100%, 0 calc(100% - var(--size-crop)), 0 0);
            padding: 15px;
        }
        
            /* notebox elements */
            .note-box textarea{
                width: 100%;
                height: 5.2em;
                font-style: italic;
                color: #cfcfcf;
                border: none;
                background: #535353;
                padding: 5px 10px 5px 5px;
                margin: 0;
                resize: none;
            }
        
            .note-box .extra-info{
                display: block;
                font-size: .7em;
                font-weight: 600;
                text-align: end;
                line-height: 1.2;
            }
            
            .note-box .extra-info span{
                --lines: 1;
                padding-right: .3em;
                margin-bottom: .4em;
            }
            .note-box .extra-info span:last-child{
                font-size: .95em;
                font-style: italic;
                margin-bottom: 0;
            }
            
            /*scroll*/
            .note-box ::-webkit-scrollbar {
              width: 8px;
            }
            .note-box ::-webkit-scrollbar-track {
              background: #888;
            }
            .note-box ::-webkit-scrollbar-thumb {
              background: #f1f1f1;
            }
    
    
    /* 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;
        }
    }