@charset "utf-8";
/* CSS Document */
/* Buttons and Form Fields */
.resizedTextbox {height: 18px; font-size:11px;}

.caja-texto-moderna {
  /* --- Colores --- */
  background-color: #36454F; /* Un tono de gris carbón que contrasta bien */
  color: #FFFFFF;           /* Texto en color blanco */
  
  /* --- Estilo y espaciado --- */
  border: 1px solid #555;   /* Borde sutil un poco más claro */
  border-radius: 8px;       /* Esquinas redondeadas */
  padding: 5px 15px;       /* Espaciado interno (vertical y horizontal) */
  font-size: 16px;          /* Tamaño de la letra */
  font-family: Arial, sans-serif; /* Fuente limpia */

  /* --- Efectos --- */
  outline: none; /* Elimina el contorno por defecto del navegador */
  transition: all 0.3s ease; /* Transición suave para los efectos */
}

/* Estilo para el texto de ejemplo (placeholder) */
.caja-texto-moderna::placeholder {
  color: #a9a9a9; /* Un gris más claro para el placeholder */
}

/* Efecto visual cuando la caja de texto está seleccionada (en foco) */
.caja-texto-moderna:focus {
  border-color: #007bff; /* Cambia el color del borde a azul */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Añade un resplandor azul */
}
/* Site Fonts */

.btn-terminal {
  /* --- Colores Base --- */
  background-color: #000000;      /* Fondo negro */
  color: #00E30B;                /* Texto verde brillante */
  border: 1px solid #00E30B;      /* Borde del mismo color verde */
  
  /* --- Estilo y Espaciado --- */
  padding: 10px 20px;             /* Espaciado interno */
  font-family: 'Courier New', Courier, monospace; /* Fuente tipo terminal */
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;          /* Quita el subrayado si lo usas en <a> */
  cursor: pointer;
  border-radius: 5px;             /* Esquinas ligeramente redondeadas */
  
  /* --- Efectos y Transiciones --- */
  transition: all 0.3s ease;      /* Transición suave para todos los efectos */
  box-shadow: 0 0 5px rgba(0, 227, 11, 0.5); /* Un ligero resplandor verde */
}

/* Efecto al pasar el ratón por encima (hover) */
.btn-terminal:hover {
  background-color: #00E30B;      /* Invierte los colores */
  color: #000000;                /* Texto negro */
  box-shadow: 0 0 15px rgba(0, 227, 11, 0.8); /* Resplandor más intenso */
}

/* Efecto al hacer clic (active) */
.btn-terminal:active {
  transform: translateY(2px);     /* Simula que el botón se presiona */
  box-shadow: 0 0 5px rgba(0, 227, 11, 0.5); /* Reduce el resplandor al presionar */
}

/* Checkbox */
/* --- Contenedor principal para el checkbox y su texto --- */
.contenedor-checkbox {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: bold;
	-webkit-user-select: none; /* Evita la selección de texto al hacer clic */
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* --- Oculta el checkbox original del navegador --- */
.contenedor-checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* --- Crea la caja personalizada del checkbox (el cuadrado) --- */
.checkmark {
	position: relative;
	height: 22px; /* Altura original */
	width: 33px;  /* 50% más ancho */
	margin-right: 15px; /* Espacio entre la caja y el texto */

	/* --- Estilos inspirados en el botón terminal --- */
	background-color: #000000;
	border: 1px solid #00E30B;
	border-radius: 5px; /* Esquinas ligeramente redondeadas */
	box-shadow: 0 0 5px rgba(0, 227, 11, 0.5); /* Resplandor verde */
	transition: all 0.3s ease; /* Transición suave */
}

/* --- Efecto al pasar el ratón por encima (hover) --- */
.contenedor-checkbox:hover .checkmark {
	box-shadow: 0 0 15px rgba(0, 227, 11, 0.8); /* Resplandor más intenso */
}

/* --- Cambia el estilo cuando el checkbox está seleccionado (checked) --- */
/* Ahora solo cambia el color de fondo, rellenando la caja */
.contenedor-checkbox input:checked ~ .checkmark {
	background-color: #00E30B; /* Invierte los colores */
	border-color: #00E30B;
}

/* --- Efecto al hacer clic (active) --- */
.contenedor-checkbox:active .checkmark {
	transform: translateY(2px); /* Simula que se presiona */
	box-shadow: 0 0 5px rgba(0, 227, 11, 0.5);
}