/* Estilos básicos */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

#myCanvas {
    border: 1px solid black; /* Borde negro por defecto */
    margin-bottom: 20px;
}

#controls {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.thumbnail {
    width: 50px;
    height: 50px;
    margin: 0.5px;
    cursor: pointer;
    display: inline-block;
}

#timeline {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
    overflow: auto;
}

#btnStartRecording.recording {
    background-color: red;
    color: white;
}

/* Botones circulares (dimensiones y forma) */
.bold-button1,
.bold-button2,
.bold-button3,
.bold-button4,
.bold-button5,
.bold-button-onion,
.bold-button-grid,
.bold-button-bg,
.bold-button-load {
    width: 60px;
    height: 60px;
    border-radius: 70%;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    margin: 10px;
    line-height: 32px;
}

/* Botón CAP más grande */
.bold-button6 {
    background-color: red;
    border-radius: 80px;
    color: #fff;
    line-height: 50px;
    font-size: 30px;
    cursor: pointer;
    width: 85px;
    height: 85px;
    margin: 5px;
    border: none;
    outline: none;
}

/* Efecto hover */
.bold-button1:hover,
.bold-button2:hover,
.bold-button3:hover,
.bold-button4:hover,
.bold-button-onion:hover,
.bold-button-grid:hover,
.bold-button-bg:hover,
.bold-button-load:hover {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=50);
}
.bold-button5:hover {
  background-color: #ff0000;
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
}
.bold-button6:hover {
  background-color: #5ce700;
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
}

/* Efecto de titileo en verde para PLAY */
@keyframes greenBlink {
    0% { background-color: DodgerBlue; }
    50% { background-color: limegreen; }
    100% { background-color: DodgerBlue; }
}
.bold-button1.play-active {
    animation: greenBlink 1s infinite;
}

/* Resaltado de la miniatura seleccionada */
.selected-frame {
    border: 3px solid yellow !important;
}