#scheduler-container{

    overflow-x:auto;

    margin-top:20px;

}

#scheduler-table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}
#scheduler-table th:first-child{
    position:sticky;
    left:0;
    z-index:10;
    background:#111;
}

#scheduler-table th{

    background:#111;

    border-bottom:2px solid #00eaff;

    border-right:1px solid #444;

    padding:10px;

    text-align:center;

}

#scheduler-table td{
    padding:6px;
    text-align:center;
    background:none;
}

#scheduler-table tr:hover{

    background:#101010;

}

#scheduler-table th.today{

    background:#004f70;

    box-shadow:0 0 10px #00eaff;

}

.player-cell{

    /*display:flex;*/
    position:sticky;
    left:0;
    z-index:5;
    align-items:center;

    gap:8px;
    

    text-align:left;

    font-weight:bold;

}

.player-cell img{

    width:38px;

    height:38px;

}
.player-cell small{

    color:#00eaff;

    font-style:italic;

    font-size:0.80rem;

    letter-spacing:1px;

}
/*
.scheduler-cell{

    width:28px;
    height:28px;

    margin:auto;

    border-radius:8px;

    cursor:pointer;
}*/
/* ============================
   CELDA DE DISPONIBILIDAD
   ============================ */

.scheduler-cell{
    padding:10px;
    text-align:center;
    vertical-align:middle;
    background:transparent;
}

/* El botón interior */

.state-box{
    width:54px;
    height:54px;

    margin:auto;

    position:relative;

    border-radius:8px;

    cursor:pointer;

    transition:.25s;

    border:1px solid rgba(80,120,170,.45);

    background:
        linear-gradient(180deg,
        rgba(20,35,55,.95),
        rgba(10,18,35,.95));

    box-shadow:
        inset 0 0 12px rgba(255,255,255,.05),
        0 0 8px rgba(0,180,255,.05);
}

/* borde brillante */

.state-box::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:6px;

    border:1px solid rgba(255,255,255,.06);

}

/* cuadrado central */

.state-box::after{

    content:"";

    position:absolute;

    width:24px;
    height:24px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:4px;

    background:#3b4658;

    transition:.25s;

}

/* ---------------------- */
/* READY                  */
/* ---------------------- */

.state-box.ready{

    border-color:#2dff72;

    box-shadow:
        0 0 12px rgba(40,255,120,.35),
        inset 0 0 20px rgba(40,255,120,.12);

}

.state-box.ready::after{

    background:#55ff63;

    box-shadow:
        0 0 12px #3dff63,
        0 0 25px rgba(61,255,99,.65);

}

/* ---------------------- */
/* MAYBE                  */
/* ---------------------- */

.state-box.maybe{

    border-color:#ffd52f;

    box-shadow:
        0 0 12px rgba(255,213,47,.28),
        inset 0 0 20px rgba(255,213,47,.12);

}

.state-box.maybe::after{

    background:#ffd42a;

    box-shadow:
        0 0 12px #ffd42a,
        0 0 22px rgba(255,212,42,.55);

}

/* ---------------------- */
/* NO                     */
/* ---------------------- */

.state-box.no{

    border-color:#ff5b5b;

    box-shadow:
        0 0 12px rgba(255,91,91,.28),
        inset 0 0 20px rgba(255,91,91,.12);

}

.state-box.no::after{

    background:#ff5757;

    box-shadow:
        0 0 12px #ff5757,
        0 0 22px rgba(255,87,87,.55);

}

/* ---------------------- */
/* SIN DATOS              */
/* ---------------------- */

.state-box.none{

    border-color:rgba(255,255,255,.12);

}

.state-box.none::after{

    background:#3b4658;

}

/* ---------------------- */
/* HOVER                  */
/* ---------------------- */

.state-box:hover{

    transform:
        translateY(-2px)
        scale(1.06);

    box-shadow:
        0 0 18px rgba(0,220,255,.35),
        inset 0 0 18px rgba(255,255,255,.08);

}

.today-column{

    background:rgba(0,180,255,.05);

}


.estado_ready{
    
   display:inline-block;

    width:16px;

    height:16px;

    border-radius:50%;
    background-color:  #2dff72;

}
.estado_maybe{
    
   display:inline-block;

    width:16px;

    height:16px;

    border-radius:50%;
    background-color:  #ffd52f;

}
.estado_no{
    
   display:inline-block;

    width:16px;

    height:16px;

    border-radius:50%;
    background-color:  #ff5b5b;

}
.estado_none{
    
   display:inline-block;

    width:16px;

    height:16px;

    border-radius:50%;
    background-color:  rgba(255,255,255,.12);;

}

.scheduler-state{

    width:100%;
    height:100px;

    border-radius:8px;

    cursor:pointer;

    transition:.25s;

    border:1px solid rgba(255,255,255,.08);

    box-sizing:border-box;
}

.scheduler-subtitle{

    color:#bbb;

    margin-bottom:15px;

}

.scheduler-legend{

    display:flex;

    gap:25px;

    margin-bottom:20px;

    flex-wrap:wrap;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:8px;

}

.availability-row td{

    height:42px;
    font-size:.9rem;
    font-weight:bold;
    text-align:center;

}

.availability-count{

    color:white;
    transition:.25s;

}

.availability-count.high{

    color:#54ff79;
    text-shadow:0 0 10px #00ff66;

}

.availability-count.medium{

    color:#ffd24d;
    text-shadow:0 0 8px #ffb300;

}

.availability-count.low{

    color:#ff6060;
    text-shadow:0 0 8px #ff4040;

}
/*--------------------------------------------------*/
/* ESTADO DE LA ESCUADRA */
/*--------------------------------------------------*/

.squad-row td{

    height:60px;
    text-align:center;
    vertical-align:middle;

}

.squad-title{

    font-weight:bold;
    color:#8ceeff;
    letter-spacing:1px;

}

.squad-title small{

    display:block;
    color:#6ba5c6;
    margin-top:4px;

}

.squad-bar{

    width:72%;
    height:8px;

    margin:auto;

    background:#07131d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.8);

}

.squad-bar .fill{

    height:100%;

    transition:.35s;

}

.squad-bar.high .fill{

    background:#2cff68;

    box-shadow:
        0 0 10px #00ff88;

}

.squad-bar.medium .fill{

    background:#ffcb30;

    box-shadow:
        0 0 10px #ffc000;

}

.squad-bar.low .fill{

    background:#ff5252;

    box-shadow:
        0 0 10px #ff4040;

}

.squad-number{

    margin-top:6px;

    font-size:.72rem;

    font-weight:bold;

    letter-spacing:1px;

}

.squad-number.high{

    color:#6cff8f;

}

.squad-number.medium{

    color:#ffd560;

}

.squad-number.low{

    color:#ff7575;

}

.squad-status{

    font-family:'Aerospace Regular', monospace;
    font-size:0.62rem;
    font-weight:bold;
    letter-spacing:2px;
    margin-bottom:6px;

}

.squad-status.high{

    color:#69ff93;
    text-shadow:0 0 12px #00ff88;

}

.squad-status.medium{

    color:#ffd45b;
    text-shadow:0 0 10px #ffc000;

}

.squad-status.low{

    color:#ff6b6b;
    text-shadow:0 0 10px #ff4040;

}