:root {
  /* Cores da UsinaInfo */
  --usinainfo-purple: #4c2058;
  --usinainfo-button-purple: #6e3479;
  --usinainfo-button-hover-purple: #6e3479;
  --usinainfo-cyan: #65bdc7;
  --usinainfo-dark-cyan: #129fa3;
  --usinainfo-white: #fefefe;

  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f8f9fa;
  --bg-quaternary: #e9ecef;
  --text-primary: #333333;
  --text-secondary: #000000;
  --text-muted: #666666;
  --border-color: #e9ecef;
  --card-bg: #ffffff;
  --card-header-bg: var(--usinainfo-purple);
  --hex-bg: #f8f9fa;
  --hex-text: #333333;
  --log-bg: #f8f9fa;
  --log-text: #333333;
  --frame-bg: #ffffff;
  --frame-border: #e9ecef;
  --success-bg: #d4edda;
  --success-border: #c3e6cb;
  --error-bg: #f8d7da;
  --error-border: #f5c6cb;
  --info-bg: #d1ecf1;
  --info-border: #bee5eb;

  --connected-text: #155724;
  --disconnected-text: #721c24;
}

body {
  background-color: var(--bg-primary);
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar {
  background: var(--usinainfo-purple) !important;
}

.navbar-brand {
  color: var(--usinainfo-white) !important;
  font-weight: 600;
}

.theme-toggle {
  background: none;
  border: 1px solid var(--usinainfo-white);
  color: var(--usinainfo-white);
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--usinainfo-white);
  color: var(--usinainfo-purple);
}

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
  background-color: var(--card-bg);
  transition: background-color 0.3s ease;
}

.card-header {
  color: var(--card-header-bg);
  background: var(--usinainfo-white);
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
  padding: 1rem 1.5rem;
}

.card-body {
  background-color: var(--card-bg);
  color: var(--text-primary);
}

.btn-primary {
  background-color: var(--usinainfo-button-purple);
  color: var(--usinainfo-white);
  border: none;
  border-radius: 8px;
  /* Igual ao warning */
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--usinainfo-button-hover-purple);
  transform: translateY(-2px);
  text-shadow: 0 0 15px white;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2) inset,
    0 1px 1px rgba(255, 255, 255, 0.5) inset;
}

.btn-primary:active {
  background-color: var(--usinainfo-dark-cyan) !important;
  transform: translateY(2px);
  box-shadow: none;
}

.btn-success {
  background: var(--usinainfo-button-purple);
  border: none;
  border-radius: 8px;
  font-weight: 500;

  transition: all 0.3s ease;
}

.btn-success:hover {
  background-color: var(--usinainfo-button-hover-purple);

  transform: translateY(-2px);
  text-shadow: 0 0 15px white;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2) inset,
    0 1px 1px rgba(255, 255, 255, 0.5) inset;
}

.btn-success:active {
  background-color: var(--usinainfo-dark-cyan) !important;
  transform: translateY(2px);
  box-shadow: none;
}

.btn-danger {
  background: var(--usinainfo-button-purple);
  border: none;
  border-radius: 8px;
  font-weight: 500;

  transition: all 0.3s ease;
}

.btn-danger:hover {
  background-color: var(--usinainfo-button-hover-purple);

  transform: translateY(-2px);
  text-shadow: 0 0 15px white;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2) inset,
    0 1px 1px rgba(255, 255, 255, 0.5) inset;
}

.btn-danger:active {
  background-color: var(--usinainfo-dark-cyan) !important;
  transform: translateY(2px);
  box-shadow: none;
}

.btn-warning {
  background: var(--usinainfo-button-purple);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  color: var(--usinainfo-white);

  transition: all 0.3s ease;
}

.btn-warning:hover {
  background-color: var(--usinainfo-button-hover-purple);

  transform: translateY(-2px);
  text-shadow: 0 0 15px white;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2) inset,
    0 1px 1px rgba(255, 255, 255, 0.5) inset;

  color: var(--usinainfo-white);
}

.btn-warning:active {
  background-color: var(--usinainfo-dark-cyan) !important;
  transform: translateY(2px);
  box-shadow: none;
  color: var(--usinainfo-white) !important;
}

.btn:disabled {
  background-color: var(--usinainfo-button-purple);
}
.stat-card {
  /*background: linear-gradient(135deg, var(--usinainfo-purple), var(--usinainfo-dark-cyan));*/
  background-color: var(--usinainfo-dark-cyan);

  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  height: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.hex-data {
  background: var(--hex-bg);
  color: var(--hex-text);
  padding: 1rem;
  border-radius: 8px;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  min-height: 100px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.frame-item {
  background: var(--frame-bg);
  border: 1px solid var(--frame-border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.frame-item:hover {
  border-color: var(--usinainfo-cyan);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(101, 189, 199, 0.2);
}

.frame-hex {
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: var(--usinainfo-cyan);
}

.frame-distance {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.log-container {
  background: var(--log-bg);
  color: var(--log-text);
  padding: 1rem;
  border-radius: 8px;
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.log-entry {
  margin-bottom: 0.25rem;
  padding: 0.25rem 0;
}

.log-info {
  color: #0d6efd;
}

.log-success {
  color: #198754;
}

.log-warning {
  color: #fd7e14; 
}

.log-error {
  color: #dc3545;
}

.status-connected {
  background-color: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: var(--connected-text) !important;
}

.status-disconnected {
  background-color: var(--error-bg) !important;
  border-color: var(--error-border) !important;
  color: var(--disconnected-text) !important;
}

.alert {
  border-radius: 8px;
  transition: background-color 0.3s ease;
}
.alert-status {
  width: auto;
}

.alert-info {
  background-color: var(--info-bg);
  border-color: var(--info-border);
  color: var(--text-primary);
}

.command-info {
  background-color: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
  transition: background-color 0.3s ease;
}

.decimal-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.pair-item {
  background-color: var(--frame-bg);
  border: 1px solid var(--frame-border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  font-family: "Courier New", monospace;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
}

.pair-item:hover {
  border-color: var(--usinainfo-cyan);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(101, 189, 199, 0.2);
}

.pair-hex {
  font-size: 12px;
  color: var(--text-muted);
}

.pair-decimal {
  font-size: 16px;
  font-weight: 800;
  color: var(--usinainfo-cyan);
}

@media (max-width: 768px) {
  .stat-value {
    font-size: 1.5rem;
  }

  .controls {
    flex-direction: column;
    gap: 10px;
  }

  .controls .btn {
    width: 100%;
  }
}


.logo {
  /* max-width: 100px;
  width: 100%; */
  height: 42px;
  aspect-ratio: 1088/445;
}