/* Estilos para el contenedor principal de la página */
.container {
  display: flex; /* Establece la visualización de los elementos como un contenedor flexible */
  border-style: solid; /* Establece el estilo del borde */
  width: 1300px;
}

/* Estilo para cambiar de comandos zhone y zte */
.linkztezhone {
  display: flex;
  align-items: center; /* Alinea los elementos verticalmente en el centro */
}

.linkztezhone span {
  margin-right: 10px;
}

.linkztezhone a {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  color: black;
  background-color: rgb(228, 228, 228);
  border: 1px solid #4f4f4f;
  border-radius: 4px;
  font-family: 'Tahoma', sans-serif;
}

.linkztezhone a:hover {
  background-color: #c2c2c2;
}

/* Estilos para el contenedor de cada comando */
.descripcion-container {
  width: 720px;
  margin-bottom: 0px;
  border: 1px solid #343030; /* Borde con color */
  background-color: rgb(178, 175, 175); /* Fondo con opacidad */
  border-radius: 4px; /* Borde redondeado */
}

/* Estilos para la columna del bloc de notas*/
.columna-izquierda {
  flex: 1; /* Establece la flexibilidad de la columna */
  padding: 20px; /* Espacio interno alrededor del contenido de la columna */
  background-color: rgb(215, 215, 215); /* Establece el color de fondo con opacidad */
}

/* Estilos para la columna de los comandos*/
.columna-derecha {
  flex: 2; /* Establece la flexibilidad de la columna */
  padding: 20px; /* Espacio interno alrededor del contenido de la columna */
  background-color: rgb(215, 215, 215); /* Establece el color de fondo con opacidad */
}

/* Estilos para el título de la página */
h1 {
  font-size: 24px; /* Tamaño de fuente */
  margin-top: 0; /* Eliminar margen superior */
  font-family: 'Tahoma', sans-serif; /* Fuente Tahoma */
}

/* Estilos para las filas */
.row {
  display: flex; /* Establece la visualización de los elementos como una fila flexible */
  flex-direction: row; /* Establece la dirección de los elementos en la fila */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en la fila */
  justify-content: space-between; /* Alinea los elementos a lo largo de la fila */
  margin-bottom: 10px; /* Margen inferior */
}

/* Estilos para cada campo de entrada */
.form-group {
  flex: 0 0 calc(20% - 30px); /* Ancho de campo con margen */
  margin-bottom: 8px; /* Margen inferior */
  display: grid; /* Establece la visualización del contenedor como cuadrícula */
  place-items: center; /* Alinea los elementos de la cuadrícula en el centro */
}

/* Estilos comunes para los campos de entrada */
.form-control {
  border: 1px solid #cbc6c6; /* Borde con color */
  border-radius: 4px; /* Borde redondeado */
  width: 90%; /* Ancho del 90% para que no se choquen */
  padding: 8px; /* Espacio interior */
  font-family: 'Tahoma', sans-serif; /* Fuente Tahoma */
  background-color: rgb(228, 228, 228); /* Fondo con opacidad */
}

/* Estilos para los botones "Comandos","Aprovisionamiento","Modificaciones",etc. */
.btn-primary {
  display: inline-block; /* Establece la visualización del elemento como en línea */
  background-color: #007bff; /* Establece el color de fondo */
  color: #fff; /* Establece el color del texto */
  border: none; /* Sin borde */
  border-radius: 5px; /* Borde redondeado */
  padding: 10px 20px; /* Espaciado interno */
  margin: 5px; /* Margen */
  font-family: 'Tahoma', sans-serif; /* Fuente Tahoma */
  cursor: pointer; /* Cambia el cursor a un puntero */
  transition: all 0.8s ease; /* Transición suave */
}
/* Cambiar estilos en el hover */
.btn-primary:hover {
  background-color: #0056b3; /* Cambia el color de fondo al pasar el cursor sobre el botón */
}
/* Cambiar estilos en el foco */
.btn-primary:focus {
  outline: none; /* Elimina el contorno al enfocar el botón */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4); /* Agrega una sombra alrededor del botón al enfocarlo */
}

/* Estilos para la lista de comandos y descripciones */
.comando {
  background-color: rgb(228, 228, 228); /* Fondo con opacidad */
  padding: 2px; /* Espaciado interior */
  margin-bottom: 10px; /* Margen inferior entre comandos */
  border: 1px solid #4f4f4f; /* Borde con color */
  border-radius: 4px; /* Borde redondeado */
  font-family: 'Tahoma', sans-serif; /* Fuente Tahoma */
  margin: 2px;
}

/* Estilos para las descripciones */
.comando p {
  font-size: 15px; /* Tamaño de fuente */
  line-height: 1.4; /* Ajuste en la altura de línea para una mejor legibilidad */
  font-weight: bold; /* Texto en negrita */
  margin: 0px; /* Eliminar el margen para que las descripciones estén más pegadas al código */
  padding:0.005cm; /* Espaciado interior */
  font-family: 'Tahoma', sans-serif; /* Fuente Tahoma */

}

/* Estilos para los códigos */
.comando .comando-texto {
  font-family: 'Tahoma', sans-serif; /* Fuente Tahoma */
  font-size: 16px; /* Tamaño de fuente para comandos */
  line-height: 1.4; /* Ajuste en la altura de línea para una mejor legibilidad */
  font-weight: normal; /* Texto normal (no en negrita) */
  padding: 5px; /* Espaciado interior */
}

/* Permite resaltar las variables/inputs dentro del código*/
.variable-highlight {
  font-weight: bold; /* Para resaltar las variables en negrita */
  font-size: auto; /* Tamaño de fuente para comandos */
}

/* Estilos para los botones "Comandos","Aprovisionamiento","Modificaciones",etc. */
.comando .btn-copy {
  display: inline-block; /* Establece la visualización del elemento como en línea */
  background-color: #007bff; /* Establece el color de fondo */
  color: #fff; /* Establece el color del texto */
  border: none; /* Sin borde */
  border-radius: 4px; /* Borde redondeado */
  padding: 3px 10px; /* Espacio interior del botón */
  margin-top: 2px; /* Margen superior entre comando y botón */
  font-family: 'Tahoma', sans-serif; /* Fuente Tahoma */
  cursor: pointer; /* Cambia el cursor a un puntero */
  transition: all 0.8s ease; /* Transición suave */
  font-size: 14px; /* Tamaño de fuente para comandos */
}

/* Cambiar estilos en el hover */
.btn-copy:hover {
  background-color: #0056b3; /* Cambia el color de fondo al pasar el cursor sobre el botón */
}
/* Cambiar estilos en el foco */
.btn-copy:focus {
  outline: none; /* Elimina el contorno al enfocar el botón */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4); /* Agrega una sombra alrededor del botón al enfocarlo */

}

/* Estilos para el mensaje de "Comando copiado" */
.copiado-mensaje {
  position: fixed; /* Establece la posición del elemento como fijo */
  bottom: 10px; /* Ajusta el valor para la posición vertical deseada */
  left: 10px; /* Alineación a la izquierda */
  background-color: rgb(79, 80, 83); /* Fondo con opacidad */
  color: #fff; /* Color de texto */
  padding: 5px 10px; /* Espaciado interior */
  border-radius: 4px; /* Borde redondeado */
  transition: opacity 1.0s; /* Efecto de desvanecimiento de 1 segundo */
  font-family: 'Tahoma', sans-serif; /* Fuente Tahoma */
  font-size: 18px; /* Tamaño de fuente para el mensaje de copiado */
  font-weight: bold; /* Texto en negrita */
}

/* Estilos para los botones "Editar" y "Mostrar Contenido del Archivo" */
button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  margin: 5px;
  font-family: 'Tahoma', sans-serif;
  cursor: pointer;
  transition: all 0.8s ease;
  font-size: 16px;
}

/* Cambiar estilos en el hover */
button:hover {
  background-color: #0056b3;
}

/* Cambiar estilos en el foco */
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
}

/* Estilos para el textarea con fondo personalizado en modo claro */
.dark-mode .dark-mode-textarea {
  background-color: rgb(228, 228, 228); /* Fondo con opacidad */
}

/* Estilos para el modo oscuro */
.dark-mode {
  background-color: #333;
  color: #fff;
}

.dark-mode .btn-primary {
  background-color: #1a1a1a;
  border: 1px solid #444; /* Añade un borde para mejorar el contraste */
}

.dark-mode .form-control {
  background-color: #444;
  color: #fff;
}

.dark-mode .linkztezhone a {
  background-color: #1a1a1a;
  border: 1px solid #444; /* Añade un borde para mejorar el contraste */
}

.dark-mode .columna-derecha,
.dark-mode .columna-izquierda,
.dark-mode .comando,
.dark-mode .form-group {
  background-color: #1a1a1a;
}

/* Estilos para el textarea en modo oscuro */
.dark-mode .dark-mode-textarea {
  background-color: #444;
  color: #fff;
}

.dark-mode .linkztezhone a {
  background-color: #1a1a1a;
  border: 1px solid #444; /* Añade un borde para mejorar el contraste */
  color: #fff; /* Cambia el color del texto a blanco en modo oscuro */
}


/* Transición suave para cambios en modo oscuro */
body, html {
  transition: background-color 0.3s ease, color 0.3s ease;
}


/* Estilos adicionales para el contenedor del cambio de modo */
.mode-switch-container {
  margin-right: 20px; /* Ajusta el margen derecho según sea necesario */
  margin-top: 10px; /* Ajusta el margen derecho según sea necesario */
  position: relative; /* Establece la posición relativa para que sea el contenedor de posicionamiento */
}


/* Estilo para el círculo de la luna menguante */
.luna-menguante {
  position: absolute; /* Establece la posición absoluta con respecto al contenedor padre */
  width: 20px;
  height: 20px;
  border-radius: 50%; /* Hace que el fondo sea circular */
  background-color: #333; /* Color del círculo de la luna menguante */
  right: 0; /* Posiciona el círculo hacia la derecha */
}

/* Estilos para el modo oscuro */
.dark-mode .mode-switch-link .mode-icon {
  background: radial-gradient(circle, #ffffff 100%, transparent 0%);
}

/* Estilo para el círculo amarillo y el sol en modo claro */
.mode-icon, .sun {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: background-color 0.5s ease;
  position: relative;
  z-index: 2;
}

/* Estilos para el modo oscuro */
.mode-icon .mode-switch-link .dark-mode{
  display: none; /* Muestra el círculo claro en modo oscuro */
}

/* Cambiar visibilidad de los rayos del sol en modo oscuro */
.sun {
  display: none; /* Oculta el sol en modo oscuro */
}

/* Cambiar visibilidad de los rayos del sol en modo oscuro */
.dark-mode .sun {
  display: none; /* Oculta el sol en modo oscuro */
}

.dark-mode .rayos-sol {
  display: none; /* Oculta los rayos del sol en modo oscuro */
}

/* Estilos para el modo oscuro */
.dark-mode .mode-switch-link .luna-menguante {
  display: block; /* Muestra el círculo oscuro en modo oscuro */
}


/* Estilo para la luna menguante */
.luna-menguante {
  position: absolute; /* Posiciona el círculo oscuro de manera absoluta */
  top: 0; /* Ajusta la posición vertical según sea necesario */
  left: 5px; /* Ajusta la posición horizontal según sea necesario */
  width: 20px;
  height: 20px;
  background-color: #1a1a1a; /* Color del círculo oscuro */
  border-radius: 50%; /* Hace que el fondo sea circular */
  z-index: 2; /* Coloca el círculo oscuro por encima del círculo principal */
  display: none; /* Oculta el círculo oscuro inicialmente */
}


/* Estilo para los rayos del sol en modo claro */
.rayos-sol {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 15px;
  background: radial-gradient(circle, #ffd147 10%, #ffd147 40%, #fecd38 100%); /* Ajuste del degradado amarillo */
  transform-origin: bottom center;
  display: block;
}

/* Ajusta la altura y el borde para evitar superposiciones */
.rayos-sol:nth-child(odd) {
  height: 15px;
  width: 1.8px;
}

.rayos-sol:nth-child(even) {
  height: 13px;
  width: 1.5px;
}

/* Ángulos para los rayos */
.rayos-sol:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.rayos-sol:nth-child(2) { transform: translate(-50%, -100%) rotate(11.25deg); }
.rayos-sol:nth-child(3) { transform: translate(-50%, -100%) rotate(22.5deg); }
.rayos-sol:nth-child(4) { transform: translate(-50%, -100%) rotate(45deg); }
.rayos-sol:nth-child(5) { transform: translate(-50%, -100%) rotate(67.5deg); }
.rayos-sol:nth-child(6) { transform: translate(-50%, -100%) rotate(90deg); }
.rayos-sol:nth-child(7) { transform: translate(-50%, -100%) rotate(112.5deg); }
.rayos-sol:nth-child(8) { transform: translate(-50%, -100%) rotate(135deg); }
.rayos-sol:nth-child(9) { transform: translate(-50%, -100%) rotate(157.5deg); }
.rayos-sol:nth-child(10) { transform: translate(-50%, -100%) rotate(180deg); }
.rayos-sol:nth-child(11) { transform: translate(-50%, -100%) rotate(202.5deg); }
.rayos-sol:nth-child(12) { transform: translate(-50%, -100%) rotate(225deg); }
.rayos-sol:nth-child(13) { transform: translate(-50%, -100%) rotate(247.5deg); }
.rayos-sol:nth-child(14) { transform: translate(-50%, -100%) rotate(270deg); }
.rayos-sol:nth-child(15) { transform: translate(-50%, -100%) rotate(292.5deg); }
.rayos-sol:nth-child(16) { transform: translate(-50%, -100%) rotate(315deg); }
.rayos-sol:nth-child(17) { transform: translate(-50%, -100%) rotate(337.5deg); }
.rayos-sol:nth-child(18) { transform: translate(-50%, -100%) rotate(360deg); }


/* Estilos para el modo oscuro */
.dark-mode {
  background-color: #333;
  color: #fff;
}

/* Ajuste de la sombra para "Comandos ZTE" y "Comandos Zhone" en modo oscuro */
.dark-mode .comando {
  background-color: #1a1a1a; /* Fondo oscuro para resaltar en modo oscuro */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Sombra blanca para resaltar */
}

/* Ajuste del botón de copia para "Comandos ZTE" y "Comandos Zhone" en modo oscuro */
.dark-mode .comando .btn-copy {
  background-color: #1a1a1a; /* Fondo oscuro para resaltar en modo oscuro */
  border: 1px solid #4f4f4f; /* Borde con color para resaltar en modo oscuro */
  color: #fff; /* Texto blanco para resaltar en modo oscuro */
}

/* Ajuste del mensaje de "Comando copiado" en modo oscuro */
.dark-mode .copiado-mensaje {
  background-color: #1a1a1a; /* Fondo oscuro para resaltar en modo oscuro */
  color: #fff; /* Texto blanco para resaltar en modo oscuro */
}