/* ========================================= */
/* Once60 Dashboard */
/* ========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#111;

    color:white;

}

header{

    background:#191919;

    padding:20px;

    text-align:center;

    font-size:30px;

    font-weight:bold;

    border-bottom:3px solid #d4af37;

}

#dashboard{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    padding:20px;

}

.card{

    background:#1f1f1f;

    border-radius:16px;

    padding:20px;

    min-height:600px;

    transition:.25s;

    border:2px solid transparent;

}

.card.free{

    border-color:#3c3c3c;

}

.card.active{

    border-color:#d4af37;

    box-shadow:0 0 15px rgba(212,175,55,.35);

}

.card h2{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

    font-size:24px;

}

.badge{

    background:#d4af37;

    color:#111;

    padding:4px 12px;

    border-radius:999px;

    font-size:18px;

    font-weight:bold;

}

.requests{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.emptyZone{

    text-align:center;

    color:#777;

    font-size:22px;

    padding:40px 0;

}

/* ============================ */
/* Tarjeta de mesa */
/* ============================ */

.requestCard{

    background:#2a2a2a;

    border-radius:12px;

    padding:16px;

    border-left:6px solid #d4af37;

}

.requestHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.tableNumber{

    font-size:34px;

    font-weight:800;

    color:white;

}

.requestTime{

    font-size:34px;

    font-weight:bold;

    color:#f1c40f;

}

.requestType{

    margin-top:12px;

    font-size:20px;

}

.requestCount{

    margin-top:8px;

    color:#bfbfbf;

}

.requestButton{

    margin-top:16px;

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#27ae60;

    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.requestButton:hover{

    background:#1e8449;

}

@media(max-width:1100px){

    #dashboard{

        grid-template-columns:1fr;

    }

}
/* ========================================= */
/* Header */
/* ========================================= */

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

    border-bottom:3px solid #d4af37;

}

.headerTitle{

    font-size:34px;

    font-weight:bold;

}

.headerStats{

    display:flex;

    gap:20px;

}

.statCard{

    background:#2a2a2a;

    border-radius:10px;

    padding:10px 20px;

    text-align:center;

    min-width:140px;

}

.statLabel{

    display:block;

    color:#999;

    font-size:14px;

    margin-bottom:5px;

}

.statValue{

    font-size:28px;

    font-weight:bold;

    color:#d4af37;

}

/* ========================================= */
/* Prioridades */
/* ========================================= */

.requestCard.normal{

    border-left:6px solid #2ecc71;

}

.requestCard.medium{

    border-left:6px solid #f1c40f;

}

.requestCard.high{

    border-left:6px solid #e67e22;

}

.requestCard.critical{

    border-left:6px solid #e74c3c;

    animation:pulseBorder 1s infinite;

}

@keyframes pulseBorder{

    0%{

        box-shadow:0 0 5px rgba(231,76,60,.2);

    }

    50%{

        box-shadow:0 0 18px rgba(231,76,60,.9);

    }

    100%{

        box-shadow:0 0 5px rgba(231,76,60,.2);

    }

}