* { 
    margin: 10px; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 14px;
}

/* ------------------------------------------------------- */
/* 🔥 BREAKPOINTS */
/* ------------------------------------------------------- */

/* Overlay */

#loading-overlay {
  background: #1b1d22;
  position: fixed;
  inset: 0;
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#particles-js {
  width: 100%;
  height: 100%;
}

.app-main {
  display: none;
  opacity: 0;
}

/* Clase que activa la animación */
.fade-in {
    display: block;
    animation: fadeIn 0.6s ease forwards;
}

/* Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 📱 Mobile (by default) */

body.light-mode {
  background: #ffffff;
  color: #222;
}

body.dark-mode {
  background: #1b1d22;
  color: #e8e8e8;
}

p.dark-mode, h1.dark-mode, h2.dark-mode, h3.dark-mode, h4.dark-mode, h5.dark-mode, h6.dark-mode {
  color: #e8e8e8 !important;
}

body.dark-mode .text-muted {
  color: #ffffff !important;
}
body.dark-mode #themeIcon {
  color: #ffffff !important;
}

/* CARD */
.weather-card {
  background: var(--card-bg);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

#location { width: 100%; }

#themeToggle {
    border: none;
    height: 48px;
    width: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.light-mode .weather-card {
  --card-bg: #ffffff;
}

body.dark-mode .weather-card {
  --card-bg: #2b2f38;
}

.hours-container .hour-card {
  min-width: 70px;
  background: var(--card-bg);
  padding: 10px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

#themeToggle {
    border: none;
    height: 48px;
}

.hour-card p {
  margin: 0;
}

body.dark-mode .hour-card {
  --card-bg: #2b2f38;
}
body.light-mode .hour-card {
  --card-bg: #ffffff;
}

/* Smooth scroll */
.hours-container::-webkit-scrollbar {
  height: 6px;
}
.hours-container::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

/* Larger than Mobile 📱 */
@media (min-width: 600px) {
  body{
    max-width:50% !important;
    margin:auto;
  }
  
  .small {
    font-size: 1rem;
  }

  #locationIcon { width: 50% !important; margin-left:auto; display:block;}
}