/* initCSS.css — estilos mínimos para la carga inicial */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f9f9f9;
  color: #333;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
}

/* Logo principal */
#logo-container img {
  max-width: 60%;
  height: auto;
  margin-bottom: 1rem;
}

/* Overlay con protagonismo del logo */
#overlayRoot {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7); /* semi-transparente */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(6px);
  cursor: pointer; /* indica que se puede cerrar */
}

.overlay-content {
  text-align: center;
}

.overlay-logo {
  width: 160px; /* más grande para protagonismo */
  height: auto;
  margin-bottom: 1rem;
  opacity: 0.95;
}

/* Spinner */
.spinner {
  width: 64px;
  height: 64px;
  border: 6px solid rgba(0,0,0,0.2);
  border-top-color: #0078d7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  background: #eee;
  color: #444;
}

footer strong {
  color: #0078d7;
}

/* Animación de fade-out */
.fade-out {
  animation: fadeOut 0.6s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}


/* 🌙 Modo oscuro */
@media (prefers-color-scheme: dark) {
  html, body {
    background: #111;
    color: #eee;
  }

  #overlayRoot {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
  }

  .spinner {
    border: 6px solid rgba(255,255,255,0.2);
    border-top-color: #66b2ff;
  }

  footer {
    background: #222;
    color: #aaa;
  }

  footer strong {
    color: #66b2ff;
  }
}

/* 📱 Responsive */
@media (max-width: 768px) {
  main {
    padding: 1rem;
  }

  #logo-container img {
    max-width: 80%;
  }

  .overlay-content {
    max-width: 90%;
    padding: 1rem;
  }

  footer {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  h2, p, small {
    font-size: 0.9rem;
  }

  .spinner {
    width: 48px;
    height: 48px;
    border-width: 4px;
  }

  #logo-container img {
    max-width: 95%;
  }
}


/* Contenedor de acciones en el overlay */
.overlay-actions {
  margin-top: 1.5rem; /* separa el botón del texto */
  display: flex;
  justify-content: center;
}

/* Botón de reinstalación */
#resetAppButton {
  background-color: #0078d7; /* azul moderno */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover y focus */
#resetAppButton:hover,
#resetAppButton:focus {
  background-color: #005a9e; /* azul más oscuro */
  transform: translateY(-2px); /* pequeño efecto de elevación */
  outline: none;
}

/* Estado activo (clic) */
#resetAppButton:active {
  background-color: #004578;
  transform: translateY(0);
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  #resetAppButton {
    background-color: #66b2ff;
    color: #111;
  }

  #resetAppButton:hover,
  #resetAppButton:focus {
    background-color: #3399ff;
  }

  #resetAppButton:active {
    background-color: #1a75d1;
  }
}