/* ==========================================================================
   RESET & BASE SETTINGS
   ========================================================================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: #333;
  background-color: transparent; /* para que no tape los fondos de pantalla */
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3 {
  text-align: center;
  margin: 15px 0;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
button {
  padding: 8px 16px;
  margin: 8px 0;
  border: none;
  border-radius: 5px;
  background-color: #629edd;
  color: white;
  font-size: 0.9em;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

/* ==========================================================================
   AUTHENTICATION BUTTONS (HEADER)
   ========================================================================== */
#auth-btn,
#btn-logout {
  cursor: pointer;
  margin-right: 1rem;
}


/* ==========================================================================
   AUTH MENU (LOGIN / REGISTRO)
   ========================================================================== */
.auth-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: #ffffff62;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  padding: 1rem;
  display: none;
  z-index: 10;
}
/* ————————————————————————— */
/* Logo en el modal de login */
/* ————————————————————————— */
.auth-menu .auth-logo {
  display: block;
  margin: 0 auto 1rem;    /* centra y separa del formulario */
  width: 120px;            /* ajusta al ancho que necesites */
  height: auto;
}

/* Opcional: si quieres bajar todo el modal aún más */
.auth-menu {
  padding-top: 2rem;       /* empuja contenido hacia abajo */
}

.auth-menu.show {
  display: block;
}

/* Título dentro del modal */
.auth-menu .auth-title {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: #333;
}

/* Pestañas */
ul.tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  border-bottom: 1px solid #ccc;
}

ul.tabs li {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

ul.tabs li.active {
  border-color: #007bff;
  font-weight: bold;
}

/* Contenido de cada pestaña */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Inputs y botones dentro del auth-menu */
.auth-menu input,
.auth-menu button {
  width: 100%;
  margin: 0.25rem 0;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Feedback de autenticación */
#auth-feedback {
  text-align: center;
  height: 1.2rem;
  font-size: 0.9rem;
}

/* ==========================================================================
   LAYOUT CONTAINERS
   ========================================================================== */
#contenedor-principal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  align-items: center;
  padding: 1rem;
}

/* ==========================================================================
   LEYENDA COLORES
   ========================================================================== */
#leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 15px;
}

.leyenda-item {
  padding: 4px 8px;
  margin: 4px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.8em;
  text-align: center;
}

.metal-alcalino      { background-color: #ff9aa2; }
.metal-alcalinotérreo{ background-color: #ffb7b2; }
.metal-transicion     { background-color: #ffdac1; }
.metaloide            { background-color: #e2f0cb; }
.no-metal             { background-color: #b5ead7; }
.halogeno             { background-color: #c7ceea; }
.gas-noble            { background-color: #a2d2ff; }
.lantanido            { background-color: #cdb4db; }
.actinido             { background-color: #a2d2ff; }

/* ==========================================================================
   TABLA PERIÓDICA
   ========================================================================== */
#tabla-periodica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  grid-auto-rows: minmax(60px, auto);
  gap: 2px;
  margin-bottom: 15px;
  width: 95%;
}

.elemento {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  font-size: 0.7em;
  cursor: pointer;
  text-align: center;
  padding: 3px;
}

.elemento:hover {
  background-color: #6cacc0;
}

.elemento .valencia { font-size: 0.7em; color: #555; }
.elemento .simbolo  { font-size: 1em; font-weight: bold; }
.elemento .nombre   { font-size: 0.7em; color: #777; display: none; }

/* ==========================================================================
   LABORATORIO VIRTUAL
   ========================================================================== */
#laboratorio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
}

#vaso-precipitado {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#vaso-precipitado img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

#elementos-en-vaso {
  position: absolute;
  top: 30%;
  left: 15%;
  width: 70%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  overflow-y: auto;
  padding: 5px;
  z-index: 1;
}

.elemento-en-vaso {
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
  font-size: 0.8em;
  text-align: center;
}

/* Recuadro para la fórmula */
#recuadro-formula {
  margin-top: 15px;
  padding: 8px;
  border: 2px solid #007bff;
  border-radius: 5px;
  background-color: #f9f9f9;
  min-width: 150px;
  text-align: center;
  font-size: 1em;
  color: #007bff;
  font-weight: bold;
}

/* Resultado */
#resultado-container {
  margin-top: 15px;
  text-align: center;
}

#formula-compuesto { font-size: 1em; font-weight: bold; color: #007bff; }
#nombre-compuesto  { font-size: 0.9em; color: #555; }

/* Botones debajo del vaso */
#acciones {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Lista de compuestos */
#lista-compuestos-container {
  width: 95%;
  margin-bottom: 20px;
}

#lista-nombres {
  list-style-type: none;
  padding: 0;
}

#lista-nombres li {
  margin-bottom: 5px;
  font-size: 0.9em;
}

/* Frases curiosas */
#frases-curiosas-container {
  width: 95%;
  background-color: #e8f0fe;
  border-left: 4px solid #3697ff;
  border-radius: 5px;
  padding: 10px 15px;
  margin-top: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#frases-curiosas-container h3 {
  color: #2289f7;
  margin-bottom: 15px;
  font-size: 1.1em;
}

#lista-frases {
  list-style-type: disc;
  padding-left: 15px;
  color: #060606;
}

#lista-frases li {
  margin-bottom: 4px;
  font-size: 0.9em;
  line-height: 1.3;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.2em; }
  .auth-menu { width: 90%; }
}

/* ================================================================
   FONDO POST-LOGIN A PANTALLA COMPLETA
   ================================================================= */

/* Aseguramos que html y body puedan ocupar 100% de alto */
html, body {
  height: 100%;
}

/* Cuando ya no esté body.locked (es decir, tras login), aplicamos fondo */
body:not(.locked) {
  background: url('istockphoto-1414802501-612x612.jpg') no-repeat center center fixed;
  background-size: cover;
}