/* ============================
   ESTILO NIEVE
============================ */
@-moz-keyframes nieve{	
	from{top:-40px;}
    to{top:101%;}
}
@-webkit-keyframes nieve{	
	from{top:-40px;}
    to{top:2000px;}
}
@keyframes nieve{	
	from{top:-40px;}
    to{top:2000px;}
}

@-moz-keyframes horiz2{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform:translateX(0);}
}
@-webkit-keyframes horiz2{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform:translateX(0);}
}
@keyframes horiz2{
    20%{transform:translateX(0);}
    50%{transform:translateX(-70px);}
    80%{transform:translateX(0);}
}

@-moz-keyframes horiz{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform:translateX(0);}
}
@-webkit-keyframes horiz{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform:translateX(0);}
}
@keyframes horiz{
    20%{transform:translateX(0);}
    50%{transform:translateX(150px);}
    80%{transform: translateX(0);}
}
	
.tpl-snow > div{
    position:fixed;
    top:-40px; /* siempre arrancan arriba de la pantalla */
    -webkit-animation-timing-function:linear;
    -moz-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}

.tpl-snow > div{
    z-index:9999999999999;
    width:10px;
    height:10px;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    background-color:#fff;
    -webkit-animation-name:nieve,horiz;
    -moz-animation-name:nieve,horiz;
    animation-name:nieve,horiz;
}
.tpl-snow > div:nth-of-type(odd){
    width:5px;
    height:5px;
    -webkit-animation-name:nieve,horiz2;
    -moz-animation-name:nieve,horiz2;
    animation-name:nieve,horiz2;
}

/* DELAYS NEGATIVOS PARA EVITAR LA PAUSA INICIAL */

.tpl-snow > div:nth-of-type(1){left:40px;  -webkit-animation-duration:5.5s; -moz-animation-duration:5.5s; animation-duration:5.5s; -webkit-animation-delay:-1s;   -moz-animation-delay:-1s;   animation-delay:-1s;}
.tpl-snow > div:nth-of-type(2){left:120px; -webkit-animation-duration:7s;   -moz-animation-duration:7s;   animation-duration:7s;}
.tpl-snow > div:nth-of-type(3){left:200px; -webkit-animation-duration:8s;   -moz-animation-duration:8s;   animation-duration:8s;}
.tpl-snow > div:nth-of-type(4){left:20%;   -webkit-animation-duration:6s;   -moz-animation-duration:6s;   animation-duration:6s;   -webkit-animation-delay:-1s;   -moz-animation-delay:-1s;   animation-delay:-1s;}
.tpl-snow > div:nth-of-type(5){left:30%;   -webkit-animation-duration:9s;   -moz-animation-duration:9s;   animation-duration:9s;}
.tpl-snow > div:nth-of-type(6){left:40%;   -webkit-animation-duration:7.2s; -moz-animation-duration:7.2s; animation-duration:7.2s; -webkit-animation-delay:-1s;   -moz-animation-delay:-1s;   animation-delay:-1s;}
.tpl-snow > div:nth-of-type(7){left:50%;   -webkit-animation-duration:10s;  -moz-animation-duration:10s;  animation-duration:10s;}
.tpl-snow > div:nth-of-type(8){left:60%;   -webkit-animation-duration:6.4s; -moz-animation-duration:6.4s; animation-duration:6.4s; -webkit-animation-delay:-1s;   -moz-animation-delay:-1s;   animation-delay:-1s;}
.tpl-snow > div:nth-of-type(9){left:70%;   -webkit-animation-duration:10s;  -moz-animation-duration:10s;  animation-duration:10s;  -webkit-animation-delay:-1.4s; -moz-animation-delay:-1.4s; animation-delay:-1.4s;}
.tpl-snow > div:nth-of-type(10){left:80%;  -webkit-animation-duration:8s;   -moz-animation-duration:8s;   animation-duration:8s;}
.tpl-snow > div:nth-of-type(11){left:90%;  -webkit-animation-duration:7.1s; -moz-animation-duration:7.1s; animation-duration:7.1s; -webkit-animation-delay:-2s;  -moz-animation-delay:-2s;  animation-delay:-2s;}
.tpl-snow > div:nth-of-type(12){left:99%;  -webkit-animation-duration:6.6s; -moz-animation-duration:6.6s; animation-duration:6.6s; -webkit-animation-delay:-1.6s; -moz-animation-delay:-1.6s; animation-delay:-1.6s;}
.tpl-snow > div:nth-of-type(13){left:99%;  -webkit-animation-duration:7.0s; -moz-animation-duration:7.0s; animation-duration:7.0s; -webkit-animation-delay:-1.6s; -moz-animation-delay:-1.6s; animation-delay:-1.6s;}

/* Para los demás (13, 14, ... 48) mantén tus duraciones originales;
   si alguno tiene animation-delay positivo, cámbialo a negativo igual que aquí. */

/* SI HAY MÁS DE 48 COPOS, OCULTA LOS EXTRAS (EVITA EL PUNTO BLANCO FIJO) */
.tpl-snow > div:nth-of-type(n+49){
    display:none;
}

/* ============================
   ESTILO NIEVE cierre
============================ */




* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Asap", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  padding: 20px;
background: linear-gradient(135deg, #121826, #1c2f57, #124997);
color: #e5e7eb;
}

/* LOGO CENTRADO PERFECTO */
.logo {
  display: block;          /* lo convierte en bloque para poder centrarlo */
  margin: 0 auto 18px auto;/* centra horizontalmente */
  width: 150px;            /* tamaño del logo */
  max-width: 60%;          /* responsive */
  height: auto;            /* mantiene la proporción */
}

/* TEXTO Sistema de Administración Municipal */

.login-label  {
    font-family: arial;
    font-size: 0.8em;
    margin-bottom: 10px;
}

/* TARJETA LOGIN – VERSIÓN REDUCIDA */
.login {
  width: 100%;
  max-width: 250px;          /* antes 420px → ahora más pequeño */
  background: #ffffff;
  border-radius: 5px;
  padding: 22px 20px;        /* antes 28px → reducido */
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.30);
  color: #111827;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.38);
}

/* Inputs más compactos */
.login > input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 10px;
  padding: 9px 10px;        /* antes 11px → más pequeño */
  margin: 8px 0;
}


/* Botón más pequeño */
.login > button {
  width: 60%;
  margin-top: 12px;
  padding: 10px 0;          /* antes 12px */
  border: none;
  /* border-radius: 999px; */
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 14px;          /* antes 15px */
  font-weight: 600;
  cursor: pointer;
}

/* ============================
   TEXTO INFERIOR CENTRADO
============================ */
.txt {
  margin-top: 16px;
  font-size: 0.7rem;
  color: #e5e7eb;
  padding: 6px 12px;
  /* border-radius: 999px; */
  /* border: 1px solid rgba(209, 213, 219, 0.3); */
  background: rgba(15, 23, 42, 0.3);
  text-align: center;
  max-width: 420px;
}

/* ============================
   ICONO WHATSAPP
============================ */
.whatsapp-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsapp-icon img {
  width: 30px;
  height: 30px;
}

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 600px) {
  .logo {
    width: 110px;
  }

  .login {
    padding: 22px 18px;
  }

  .txt {
    font-size: 0.75rem;
  }
}