/* Definición de variables CSS para colores claros y oscuros */
:root {
  --background-color: #fff; /* Color de fondo claro */
  --text-color: #000; /* Color de texto claro */
  --line-counter-bg: #f0f0f0; /* Gris claro para contador de líneas */
  --line-counter-green: #d9ead3; /* Verde suave */
  --line-counter-yellow: #fff2cc; /* Amarillo suave */
  --line-counter-red: #e09898; /* Rojo suave */
  --line-counter-orange: #f3ca60; /* Naranja suave */
}

.dark {
  --background-color: #222; /* Color de fondo oscuro */
  --text-color: #fff; /* Color de texto oscuro */
  --line-counter-bg: #333; /* Gris oscuro para contador de líneas */
  --line-counter-green: #274e13; /* Verde oscuro */
  --line-counter-yellow: #eaad11; /* Amarillo oscuro */
  --line-counter-red: #741b1b; /* Rojo oscuro */
  --line-counter-orange: #dd8913; /* Naranja oscuro */
}

/* Estilos generales para el cuerpo del documento */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Transición suave para cambios de tema */
}

/* Contenedor principal */
.container {
  display: flex;
}

/* Panel fijo a la izquierda */
.left-fixed {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Asegura que el panel esté por encima de otros elementos */
}

/* Contenedor del video */
.video-container {
  margin-bottom: 20px;
}

/* Etiqueta del video */
.video-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

/* Estilos para el hover de la etiqueta del video */
.video-label:hover {
  background-color: #0056b3;
}

/* Estilos para el elemento de video */
video {
  max-width: 300px;
  margin-bottom: 20px;
}

/* Sección del área de texto */
.text-area-section {
  margin-left: 340px; /* Ajusta el margen para hacer espacio para el panel fijo */
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  overflow-y: auto;
  align-items: flex-start;
}

/* Contador de líneas */
#lineCounter {
  margin-right: 10px;
}

/* Estilos generales para el contador de líneas */
.line-counter {
  width: 80px;
  font-size: 14px;
  background-color: var(--line-counter-bg);
  border-right: 1px solid #ccc;
  text-align: right;
  font-family: "Courier New", monospace;
  line-height: 1.5;
}

/* Estilos específicos para diferentes colores del contador de líneas */
.line-counter.default {
  background-color: var(--line-counter-bg);
}

.line-counter.green {
  background-color: var(--line-counter-green);
}

.line-counter.yellow {
  background-color: var(--line-counter-yellow);
}

.line-counter.red {
  background-color: var(--line-counter-red);
}

.line-counter.orange {
  background-color: var(--line-counter-orange);
}

/* Contenedor del área de texto */
.text-area-container {
  flex-grow: 1;
}

/* Estilos para el área de texto */
textarea {
  width: auto;
  min-width: 97%;
  font-size: 14px;
  font-family: "Courier New", monospace;
  line-height: 1.5;
  resize: none;
  field-sizing: content;
  color: var(--text-color);
  border: 1px solid #ccc;
  position: relative;
  background-color: transparent;
  z-index: 2;
}

/* Estilos para los botones */
button {
  background-color: var(--text-color);
  color: var(--background-color);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin: 5px;
  transition: background-color 0.3s, color 0.3s;
}

/* Estilos para el hover de los botones */
button:hover {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Estilos para los íconos dentro de los botones */
button svg {
  width: 24px;
  height: 24px;
}

/* Div para resaltar texto */
.highlight-div {
  position: absolute; /* Posición absoluta para superponer el resaltado */
  width: auto;
  min-width: 97%;
  height: 100%;
  font-size: 14px;
  font-family: "Courier New", monospace;
  line-height: 1.5;
  padding: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Estilos para el resaltado */
.highlight {
  background-color: var(--line-counter-red); /* Color del resaltado */
  border-radius: 3px; /* Bordes redondeados para un efecto más suave */
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .left-fixed {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 20px;
  }

  .video-container {
    margin-bottom: 0;
  }

  .text-area-section {
    margin-left: 0; /* Elimina el margen para móviles */
    flex-direction: column;
  }

  .textarea-container {
    order: 2; /* Asegura que el área de texto esté en la parte inferior en móviles */
  }

  #lineCounter {
    margin-right: 0;
    margin-bottom: 10px; /* Añade margen inferior para separación en móviles */
  }
}