:root { --f7-theme-color:#2ecc71; }
body {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin:0; overflow:hidden;
  background:#ffffff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:100vh;
}

/* Cintillo indicador de conexión */
#status-indicator {
  width:100%;
  background:#fff;
  color:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:5px 0;
  font-weight:600;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
#status-icon {
  font-size:1.4rem;
}
.online #status-icon { color:#2ecc71; }
.offline #status-icon { color:red; }

/* Logo */
.app-logo-top { text-align:center; margin:10px 0; }
.app-logo-top img { width:160px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.2); }

/* Card login */
.login-card { width:90%; max-width:400px; border-radius:20px; overflow:hidden; box-shadow:0 15px 35px rgba(0,0,0,0.25); backdrop-filter:blur(10px); margin-top:10px; }
.card-header { background:linear-gradient(to right,#27ae60,#2ecc71); color:white; padding:15px; text-align:center; }
.app-title { font-size:1.8rem; font-weight:700; margin:0; }
.card-content { padding:20px; }

/* Inputs y select */
.item-input-wrap input,
.item-input-wrap select {
  height:40px;
  font-size:1.2rem;
  border-radius:12px;
  border:1px solid #e0e0e0;
  padding-right:45px; /* espacio para el icono a la derecha */
  width:100%;
  box-sizing:border-box;
}

/* Botón con icono */
.login-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px; /* espacio entre icono y texto */
  height:50px;
  font-weight:600;
  border-radius:12px;
  background:linear-gradient(to right,#27ae60,#2ecc71);
  border:none;
  text-transform:uppercase;
  width:100%;
  box-shadow:0 4px 15px rgba(46,204,113,0.3);
  margin-top:10px;
}
.item-input-wrap select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff; color:#000; }

.item-input-wrap input:focus,
.item-input-wrap select:focus { border-color:#2ecc71; box-shadow:0 0 0 2px rgba(46,204,113,0.2); }

/* Iconos a la derecha */
.input-icon { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#27ae60; font-size:1.2rem; }

/* Botón */
.login-button { height:50px; font-weight:600; border-radius:12px; background:linear-gradient(to right,#27ae60,#2ecc71); border:none; text-transform:uppercase; width:100%; box-shadow:0 4px 15px rgba(46,204,113,0.3); margin-top:10px; }

/* Footer */
.footer-info { margin-top:auto; width:100%; text-align:center; color:#2ecc71; font-weight:500; }
#clock { font-size:1.3rem; font-weight:bold; margin-top:5px; }

/* Toast estilos personalizados */
.custom-toast-success {
  font-size: 1.1rem;
  font-weight: 500;
  color: #2ecc71;
}

.custom-toast-error {
  font-size: 1.1rem;
  font-weight: 500;
  color: #e74c3c;
}


/* Burbujas */
.bg-bubbles { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
.bubble { position:absolute; bottom:-100px; background:rgba(46,204,113,0.15); border-radius:50%; animation:rise 15s infinite ease-in; }
.bubble:nth-child(1){width:40px;height:40px;left:10%;animation-duration:15s;}
.bubble:nth-child(2){width:20px;height:20px;left:20%;animation-duration:12s;animation-delay:1s;}
.bubble:nth-child(3){width:50px;height:50px;left:35%;animation-duration:16s;animation-delay:2s;}
.bubble:nth-child(4){width:80px;height:80px;left:50%;animation-duration:18s;}
.bubble:nth-child(5){width:35px;height:35px;left:55%;animation-duration:14s;animation-delay:1s;}
.bubble:nth-child(6){width:45px;height:45px;left:65%;animation-duration:16s;animation-delay:3s;}
.bubble:nth-child(7){width:30px;height:30px;left:75%;animation-duration:15s;animation-delay:2s;}
.bubble:nth-child(8){width:25px;height:25px;left:80%;animation-duration:17s;animation-delay:4s;}
.bubble:nth-child(9){width:60px;height:60px;left:70%;animation-duration:19s;animation-delay:1s;}
.bubble:nth-child(10){width:15px;height:15px;left:25%;animation-duration:13s;animation-delay:5s;}
@keyframes rise {0%{bottom:-100px;transform:translateX(0);}50%{transform:translateX(100px);}100%{bottom:1080px;transform:translateX(-200px);}}