/*=========================================================
 BURAKO POR VOZ
 estilos.css
=========================================================*/

:root{

    --color-fondo:#ececec;
    --color-panel:#ffffff;
    --color-primario:#1565C0;
    --color-secundario:#2E7D32;
    --color-alerta:#C62828;
    --color-texto:#202020;
    --color-borde:#CFCFCF;

    --radio:10px;

    --sombra:0 2px 8px rgba(0,0,0,.15);

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:var(--color-fondo);

    color:var(--color-texto);

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

    font-size:18px;

    line-height:1.4;

}

/*--------------------------------------------*/

header{

    background:var(--color-primario);

    color:white;

    padding:20px;

    text-align:center;

    box-shadow:var(--sombra);

}

header h1{

    font-size:34px;

    margin-bottom:6px;

}

header p{

    font-size:16px;

}

/*--------------------------------------------*/

main{

    width:min(1100px,96%);

    margin:20px auto;

}

/*--------------------------------------------*/

.panel{

    background:var(--color-panel);

    border-radius:var(--radio);

    box-shadow:var(--sombra);

    padding:20px;

    margin-bottom:20px;

}

/*--------------------------------------------*/

#statusTitle{

    font-size:28px;

    color:var(--color-primario);

    margin-bottom:10px;

}

#statusMsg{

    font-size:20px;

}

/*--------------------------------------------*/

.estado-esperando{

    border-left:8px solid #F9A825;

}

.estado-escuchando{

    border-left:8px solid #2E7D32;

}

.estado-hablando{

    border-left:8px solid #1565C0;

}

.estado-error{

    border-left:8px solid #C62828;

}

/*--------------------------------------------*/

table{

    width:100%;

    border-collapse:collapse;

}

th{

    background:var(--color-primario);

    color:white;

    padding:12px;

    text-align:left;

}

td{

    padding:12px;

    border-bottom:1px solid var(--color-borde);

}

.score-total{

    text-align:right;

    font-size:28px;

    font-weight:bold;

}

/*--------------------------------------------*/

button{

    background:var(--color-primario);

    color:white;

    border:none;

    border-radius:8px;

    padding:14px 24px;

    cursor:pointer;

    font-size:18px;

    margin:5px;

    transition:.25s;

}

button:hover{

    transform:translateY(-2px);

    opacity:.95;

}

button:disabled{

    opacity:.45;

    cursor:not-allowed;

}

.btn-verde{

    background:var(--color-secundario);

}

.btn-rojo{

    background:var(--color-alerta);

}

/*--------------------------------------------*/

#logBox{

    height:220px;

    overflow-y:auto;

    background:#111;

    color:#5CFF5C;

    font-family:Consolas,monospace;

    padding:12px;

    border-radius:8px;

}

#logBox div{

    margin-bottom:6px;

}

/*--------------------------------------------*/

#ultimaMano{

    line-height:1.7;

}

/*--------------------------------------------*/

.animar-escucha{

    animation:pulso 1s infinite;

}

@keyframes pulso{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/*--------------------------------------------*/

.ganador{

    background:#FFF59D;

    font-size:22px;

    font-weight:bold;

}

/*--------------------------------------------*/

footer{

    text-align:center;

    color:#666;

    margin:20px;

    font-size:14px;

}

/*--------------------------------------------*/

@media(max-width:900px){

    body{

        font-size:17px;

    }

    header h1{

        font-size:28px;

    }

    .score-total{

        font-size:24px;

    }

}

@media(max-width:700px){

    table{

        font-size:16px;

    }

    button{

        width:100%;

        margin-top:10px;

    }

    #statusTitle{

        font-size:24px;

    }

}

@media(max-width:480px){

    body{

        font-size:16px;

    }

    header h1{

        font-size:22px;

    }

    #statusTitle{

        font-size:20px;

    }

    .score-total{

        font-size:20px;

    }

}