:root { --main-color: #0947e3; }
html, body { margin: 0; padding: 0; overflow: hidden; background: #F6F8F8; }

body, #App {
  height: 100vh; color: var(--main-color);
  user-select: none; cursor: default;
}

/* Lienzo del átomo con dimensiones estables */
#atom { 
  width: 360px; 
  height: 360px; 
  position: relative; 
  margin: 0 auto;
}

/* Las electrosferas se posicionan radialmente desde el centro exacto */
.electrosphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size); 
  height: var(--size);
  border: 1px solid #CCC; 
  border-radius: 50%; 
  transition: 0.3s ease-in-out;
  box-sizing: border-box;
}

.electrosphere.empty { visibility: hidden; opacity: 0; }

/* Distribución rotacional matemática perfecta de electrones */
.electron {
  position: absolute;
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  transform: rotate(calc(360deg * var(--index) / var(--base)));
  transition: 0.3s ease-in-out;
}

.electron::before {
  content: ""; 
  position: absolute; 
  padding: 4px; 
  border-radius: 50%;
  background: var(--main-color); 
  outline: 3px solid #F6F8F8;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Bloque contenedor del núcleo */
.nucleus-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  z-index: 99;
}

.nucleus {
  width: 100%; 
  height: 100%; 
  background: var(--main-color); 
  border-radius: 50%; 
  color: #FFF;
  display: flex; 
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: 0 4px 8px rgba(9, 71, 227, 0.15);
}

.nucleus.match-error { background: #FFEB3B; color: #333; }

.element-initials { margin: 0; font-size: 1.6rem; font-weight: bold; line-height: 1.1; }
.electrons-count-label { font-size: 0.8rem; font-weight: bold; opacity: 0.85; }

/* Input reactivo oculto directamente sobre la circunferencia del núcleo */
#element-search {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 100;
}

/* Área de los componentes de control */
.controls-container {
  width: 100%;
  max-width: 420px;
  padding: 0 24px;
  box-sizing: border-box;
}

.notation-display { 
  min-height: 52px; 
  display: flex; 
  justify-content: center; 
  gap: 6px;
  flex-wrap: wrap; 
  cursor: pointer; 
  text-align: center;
}

.notation-display .middle { display: none; }
.notation-display.show-full-notation .middle { display: inline-block; }
.notation-display.show-full-notation .truncate { display: none; }

.font-comfortaa { font-family: "Comfortaa", cursive; }