@import url("https://fonts.googleapis.com/css2?family=Candal&family=Roboto:wght@400;700&display=swap");

.reviewVideoContainer  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* border: none; */
}

section.reviewVideoContainer {
	background-color: #26282c;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	font-family: "Roboto";
	width: 100%;
}

/* .fullscreen style */

/* .fullscreenVideo {

		z-index: 101;
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		align-items: center;

}

.fullscreenVideo .reviewVideoContainer__Playground {
	@media (min-width:1930px) {
		width: 62vw;
	}
	@media (max-width: 1930px) {
		width: 80vw;
	}

	@media (max-width: 1370px) {
		width: 87vw;
	}

} */

.fullscreenImage .reviewVideoContainer__controls,
.fullscreenVideo .reviewVideoContainer__controls {
	/* width: 85vw; */
	border: 1px solid black;
}

.fullscreenImage {
	z-index: 101;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	align-items: center;
}

.fullscreenImage .reviewVideoContainer__Playground {
	height: 100%;
}

/* .fullscreen .reviewVideoContainer__controls {
	@media (max-width: 1920px) {
		position: absolute;
		width: 100%;
		bottom: 0;
	}
} */

section button:focus {
	background-color: initial;
}

section video {
	width: 100%;
	height: 100%;
}

.activeReview, .editionMenu div.activeReview {
	border: 1px solid #0091ff;
	background-color: rgba(0, 145, 255, 0.2);
}

.reviewVideoContainer__controls {
    display: contents;
	height: 6.2rem;
	position: relative;
}


/* Antes de cargar: sin blanco */
.reviewVideoContainer__Playground {
  background: transparent; /* o #000 si prefieres */
}

/* Después de cargar: blanco */
.reviewVideoContainer.media-loaded .reviewVideoContainer__Playground {
  background: #fff;
}

.reviewVideoContainer__Playground.media-opacity-bg,
.reviewVideoContainer__Playground.video-opacity-bg {
    background: #fff;
    background-color: #fff;
}

.konvajs-content {
	z-index: 1;
}

/* Canvas styling */

.konva-holder_class {
	position: absolute;
}

.fullscreenImage .konva-holder_class {
	display: flex;
	align-items: center;
	height: 100%;
}

.controls__frameTimeline {
	/* background-color: #131416; */
	overflow-x: auto;
	overflow-y: hidden;
	height: 4rem;
	/* margin-top: 1.5rem; */
	margin-bottom: 5px;
	position: relative;
}

.controls__frameTimeline--frames {
	position: relative;
	margin-left: 10px;
	margin-top: 20px;
	height: 2rem;
	border: 1px solid black;
	background: repeating-linear-gradient(90deg, #2b3035, #2b3035 4px, #21272c 4px, #21272c 8px);
}

.timeline-cursor {
	left: 0px;
	top: -14px;
	height: 3rem;
	width: 0.2rem;
	border-radius: 15px;
	background-color: #00a3ff;
	position: absolute;
	overflow: visible;
}

/* styling scroll horizontal timeline bar */
.controls__frameTimeline::-webkit-scrollbar {
	width: 7px; /* Ancho de la barra de desplazamiento */
	height: 7px;
}

.controls__frameTimeline::-webkit-scrollbar-thumb {
	background-color: #717273; /* Color del pulgar de la barra de desplazamiento */
	border-radius: 2px; /* Borde redondeado del pulgar */
	transform: translateY(20px);
}

.controls__frameTimeline::-webkit-scrollbar-track {
	background-color: #131416; /* Color de fondo de la pista de la barra de desplazamiento */
}

.controls__toolBox {
	display: flex;
	align-items: flex-end;
	padding: 0 0.5rem 0 0.5rem;
	column-gap: 2rem;
    row-gap: .5rem;
}

.toolBox__keyframeCount {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.7rem;
	border: 1px solid #535353;
	background-color: #393a3d;
	border-radius: 0.125rem;
	color: #00a3ff;
	/* font-size: 0.87rem; */
}

@media (max-width: 1500px) {
    .controls__toolBox {
        flex-wrap: wrap;
        column-gap: 1rem;
    }
    /*
    .toolBox__keyframeCount {
        display: none;
    }
     */
}

.timerCount{
	color: white;
}

.toolBox__timerPack,
.toolBox__firstPack,
.toolBox__secondPack,
.toolBox__thirdPack,
.toolBox__fourthPack {
	display: flex;
}

.toolBox__timerPack{
	gap:5px;
}

.toolBox__thirdPack {
	margin: 0 auto;
}

.toolBox__fourthPack {
	margin-left: auto;
}

.toolBox__firstPack--colorSwitcher {
	position: relative;
}

.colorContainer {
	border: 2px solid white;
	border-radius: 3px;
	height: 1rem;
	width: 1rem;
	position: absolute;
}

.colorPrimary {
	z-index: 1;
	right: 5px;
	top: 2px;
	/* background-color: red; */
}

.colorSecondary {
	/* background-color: black; */
	position: absolute;
	left: 6px;
	top: 6px;
}

.colorPicker-range {
	visibility: hidden;
}

button, .figureMenu div {
	width: 1.7rem;
	height: 1.7rem;
	border: none;
	border-left: 1px solid #535353;
	border-top: 1px solid #535353;
	border-bottom: 1px solid #535353;
	background-color: transparent;

	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	&:first-child {
		border-radius: 0.18rem 0 0 0.18rem;
	}

	&:last-child {
		border-right: 1px solid #535353;
		border-radius: 0 0.18rem 0.18rem 0;
	}

	&:hover {
		cursor: pointer;
	}
}

.toolBox__firstPack--frameDuration > span {
	position: absolute;
	top: 8px;
	/* left: 50%; */
	/* transform: translate(-50%, -50%); */
	font-size: 0.6rem;
	/* height: 100%; */
	font-weight: 700;
}

.editionMenu {
	display: none;
	gap: 0.5rem;
	width: 12rem;
	height: 2rem;
	position: absolute;
	background-color: #26282c;
	border: 1px solid #535353;
	color: #fff;

	padding: 0.5rem;
	/* font-size: 0.6rem; */
	font-weight: 700;

	border-radius: 0.2rem;
}

.editionMenu.figureMenu{
	padding: 0;
	width: auto;
}

.brushSizeMenu,
.durationMenu,
.eraserSizeMenu,
.figureMenu {
	top: -29px;
	left: 0;
}

.durationMenu span.duration-value {
	position: initial;
	top: 9px;
	left: 8px;
}

.durationMenu .editionMenu__title span {
	top: 9px;
	left: 7px;
}

.durationMenu .editionMenu__valueContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
}

.editionMenu img {
	position: absolute;
	left: 3.5px;
	top: 2px;
}

.editionMenu .editionMenu__title {
	position: absolute;
	width: 1.8rem;
	right: 27px;
	top: 2px;
}

.editionMenu .editionMenu__valueContainer {
	position: absolute;
	width: 1.8rem;
	right: 2px;
	top: 1.2px;

	background-color: #131416;
	border-radius: 0.2rem;
}

.toolBoxMenu--active {
	display: flex;
}

.editionMenu input[type="range"] {
	position: absolute;
	-webkit-appearance: none;
	-moz-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* width: 3.8rem;
	bottom: -11px;
	left: 12px; */
	border: 1px solid #535353;
	overflow: hidden;
}

.editionMenu input[type="range"]::-webkit-slider-runnable-track {
	background: transparent;
	height: 0.3rem;
	width: 3.8rem;
}

.editionMenu input[type="range"]::-moz-range-track {
	background: transparent;
	height: 0.3rem;
	width: 3.8rem;
}

.editionMenu input[type="range"]::-webkit-slider-thumb {
	margin-top: 0px;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 0.06rem;
	background-color: #fff;
	box-shadow: -60px 0 0 60px #0091ff80;
}

.editionMenu button{
	position: absolute;
}

/* .editionMenu input[type="number"] {
	background-color: black;
	width: 4rem;
	border-radius: 2px;
	font-size: 0.9rem;
} */

.editionMenu span {
	background-color: black;
	width: 4rem;
	border-radius: 2px;
	font-size: 0.9rem;
}
/* timeline notes */

.timeline-note {
	position: absolute;
	width: 0.1rem;
	height: 2.5rem;
	background-color: red;
	top: -10px;
}

.timeline-note-frames {
	height: 0.3rem;
	background-color: red;
	position: absolute;
	top: 14px;
}

.note-id-square {
	width: 1.11rem;
	height: 1.11rem;
	background-color: red;
	color: white;
	position: absolute;
	top: -21px;
	border-radius: 2px;
	text-align: center;
	-webkit-text-stroke: 0.2px black;
	user-select: none;
}

/* delete button */
.delete-note-button {
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	cursor: pointer;
	width: 1rem;
	height: 1rem;
	background-color: red;
	position: absolute;
	left: -16px;
	top: -20px;
	transition: visibility 0.2s ease-in-out;
}

.note-id-square:hover ~ .delete-note-button,
.delete-note-button:hover {
	visibility: visible;
}

/* eraser indicator */

#eraser-size-indicator {
	position: absolute;
	background-color: rgba(255, 255, 255, 0.171);
	border: 2px solid rgb(255, 255, 255);
	border-radius: 50%;
	pointer-events: none;
}


/* ===========================
   OVERLAY KONVA SOBRE MEDIA
   =========================== */

/* Asegura que el playground sea el “contexto” de posicionamiento */

/* Media siempre como “base” */
.reviewVideoContainer__Playground > img,
.reviewVideoContainer__Playground > video,
.reviewVideoContainer__Playground .video-js {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* Para VideoJS: que el frame real use contain (como la imagen) */
.reviewVideoContainer__Playground .video-js .vjs-tech {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/*
.reviewVideoContainer__Playground .video-js {
    background-color: #ffffff;
}
*/

/* El contenedor del canvas debe ocupar todo el playground */
#playground__canvasContainer,
.konva-holder_class {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* por encima del video/img */
}

/* Asegura que el “wrapper” que crea Konva también quede encima y bien posicionado */
.konva-holder_class .konvajs-content {
  position: absolute !important;
  inset: 0;
  z-index: 6;
}

/* Si quieres evitar que el canvas “se coma” clicks en modo mover/pausa,
   esto NO lo pongo por defecto porque tú dibujas encima.
   (Se podría activar dinámicamente en JS según herramienta) */
/*
.konva-holder_class {
  pointer-events: none;
}
*/


.toolBox__fourthPack--opacity {
    position: relative;
    border: 1px solid #535353;
    width: 50px;
}

.toolBox__fourthPack--opacity > span.opacity-value--final {
    position: absolute;
    top: 7px;
    left: 25px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
}

.opacityMenu {
    top: -29px;
    left: 0;
    width: 14rem;
}

/* Por defecto: NUNCA blanco antes de cargar (video e imagen) */
.reviewVideoContainer__Playground,
.reviewVideoContainer__Playground .video-js,
.reviewVideoContainer__Playground .vjs-tech,
.reviewVideoContainer__Playground video,
.reviewVideoContainer__Playground img,
.reviewVideoContainer__Playground .vjs-poster,
.reviewVideoContainer__Playground .vjs-poster img {
    background: transparent;
    background-color: transparent;
}

/* ✅ Blanco SOLO cuando el media está cargado y opacidad < 100 */
.reviewVideoContainer__Playground.media-opacity-bg,
.reviewVideoContainer__Playground.video-opacity-bg {
    background: #fff;
    background-color: #fff;
}