.tablero {
    position: relative;
    border: 4px double #666;
    background: repeating-linear-gradient(
      45deg,
      #222,
      #222 10px,
      #333 10px,
      #333 20px
    );
}

.text-center {
    text-align: center;
}

.dialogo-control, .ventana, .control-tablero {
    position: fixed;
    z-index: 99;
    display: none;

    background: #FFF;
    border: 2px solid #666;
    font-size: .8em;
    cursor: move;
    max-height: 90vh;

    font-family: Arial;
}

.dialogo-control input {
    max-width: 95%;
}

.btn-flotante {
    float: left;
    padding: 5px;
}

.botones-control {
    position: fixed;
    z-index: 90;
    display: none;
    background: #FFF;
    border: 1px solid #999;
}

.botones-control a {
    display: block;
    text-align: center;
    padding: 5px 0 5px 5px;
}

.botones-control a:hover {
    background: #999;
}

.control-cabecera {
    background: #000;
    color: #FFF;
    padding: 5px 10px;
}

.control-combate {
    width: 600px;
}

.control-cuerpo {
    margin: 10px;
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
}
#chat .control-cuerpo {
    overflow: hidden;
}

.tablero-contenedor {
    position: relative;
    display: block;
    border: 2px solid #666;
}

.grid_recuadro {
     box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: block;
    float: left;
    border: 1px solid #999;
    overflow: hidden;
}

.token {
    display: block;
    float: left;
    margin: 5px;
    cursor: pointer;
}

.token img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.figura {
    position: absolute;
    overflow: hidden;
}

.figura img {
    width: 100%;
    height: 100%;
}

.btn-escena {
    width: 100%;
    text-align: left;
}

.peq {
    font-size: .8em;
}

.tableros-botonera {
    width: 5em;
    right: 0;
    top: 0;
    text-align: center;
}

.tableros-botonera p {
    margin: 0;
}

.tableros-botonera hr {
    margin: 5px 0;
}

.disabled {
    color: #999;
    cursor: default;
}

.control-tokens {
    max-width: 400px;
}

.icono-cerrar {
    float: right;
    color: #FFF !important;
    padding-left: 1em;
}


.tableros-botonera button:hover {
    background: #DDD;
    cursor: pointer;
}

.btn-activo {
    border: 2px solid #000 !important;
    background: #DDD !important;
}

.btn-mover {
    display: none;
    position: fixed;
    background: #FFF;
    border: 1px solid #999;
    z-index: 99;
}

.btn-confirmar-marcar {
    display: none;
}

.turno {
    display: block;
    text-align: center;
}

.hint-figura-cuerpo {
    padding: 1em;
}

.control-contenido {
    max-height: 70vh;
    overflow: auto;
}

.img-token {
    width: 200px;
    float: left;
    margin: 0 1em 0 0;
}

.token-seleccionado {
    border: 2px solid #000;
}

.control-lateral {
    display: none;
}

.contenedor-lateral {
    overflow: auto;
    height: 93vh;
}

.tablero-separador {
    border-bottom: 1px solid #999;
    margin-bottom: 5px;

}

.configuracion-tablero {
    display: none;
}

.tablero-flex {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.flex-mapa {
    flex: 3;
}

.flex-combate {
    max-width: 500px;
    font-size: .8em;
}

.flex-fichas {

}

.flex-conf {
    max-width: 500px;
}

.flex-chat {
    max-width: 400px;
}