* {
     box-sizing: border-box;
   }

   body {
     margin: 0;
     padding: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;

     /* IMAGEN DE FONDO Y CAPA OSCURA */
     background: linear-gradient(rgba(0, 15, 35, 0.7), rgba(0, 15, 35, 0.8)),
       url('https://images.unsplash.com/photo-1530533718754-001d2668365a?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
   }

   .login-container {
     /* EFECTO VIDRIO (Glassmorphism) */
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: 40px 30px;
     border-radius: 20px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
     width: 90%;
     max-width: 400px;
     text-align: center;
   }

   .logo-campana {
     width: 130px;
     height: auto;
     margin-bottom: 15px;
     filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
   }

   .login-container h2 {
     margin-top: 0;
     color: #1a2b4c;
     font-size: 22px;
     margin-bottom: 5px;
     letter-spacing: 0.5px;
   }

   .login-container p {
     color: #666;
     font-size: 14px;
     margin-bottom: 25px;
   }

   .form-group {
     margin-bottom: 20px;
     text-align: left;
   }

   .form-group label {
     display: block;
     font-weight: 600;
     margin-bottom: 8px;
     color: #333;
     font-size: 14px;
   }

   .form-group input {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid #ccd0d5;
     border-radius: 8px;
     font-size: 16px;
     background-color: #f8f9fa;
     transition: all 0.3s;
   }

   .form-group input:focus {
     border-color: #0056b3;
     background-color: #ffffff;
     outline: none;
     box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
   }

   .btn-login {
     width: 100%;
     background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
     color: white;
     border: none;
     padding: 14px;
     border-radius: 8px;
     cursor: pointer;
     font-weight: bold;
     font-size: 16px;
     letter-spacing: 1px;
     transition: transform 0.2s, box-shadow 0.2s;
     box-shadow: 0 4px 10px rgba(0, 86, 179, 0.3);
   }

   .btn-login:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 15px rgba(0, 86, 179, 0.4);
   }

   .btn-login:active {
     transform: translateY(0);
   }

   /* LANDSCAPE EN MÓVIL: formulario compacto cuando la altura es reducida */
   @media (max-height: 500px) {
     .login-container {
       padding: 16px 24px;
     }

     .login-container h2 {
       font-size: 18px;
       margin-bottom: 8px;
     }

     .login-container p {
       margin-bottom: 12px;
     }

     .form-group {
       margin-bottom: 10px;
     }

     .logo-campana {
       width: 80px;
       margin-bottom: 8px;
     }
   }

   /* PANTALLAS MUY ESTRECHAS */
   @media (max-width: 360px) {
     .login-container {
       border-radius: 12px;
       padding: 24px 16px;
     }
   }

   /* === MEJORAS LOGIN V2 === */

   /* Animación de entrada */
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(30px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   .login-container {
     animation: fadeInUp 0.6s ease-out;
   }

   /* Animación de error (shake) */
   @keyframes shake {
     0%, 100% { transform: translateX(0); }
     15% { transform: translateX(-8px); }
     30% { transform: translateX(8px); }
     45% { transform: translateX(-6px); }
     60% { transform: translateX(6px); }
     75% { transform: translateX(-3px); }
     90% { transform: translateX(3px); }
   }

   .login-container.shake {
     animation: shake 0.6s ease-in-out;
   }

   /* Wrapper del input PIN con botón ojo */
   .input-wrapper {
     position: relative;
     display: flex;
     align-items: center;
   }

   .input-wrapper input {
     width: 100%;
     padding-right: 45px;
   }

   .toggle-pin {
     position: absolute;
     right: 10px;
     background: none;
     border: none;
     cursor: pointer;
     color: #888;
     padding: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.2s;
   }

   .toggle-pin:hover {
     color: #0056b3;
   }

   /* Checkbox "Recordar sesión" */
   .recordar-grupo {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 20px;
     font-size: 14px;
     color: #555;
   }

   .recordar-grupo input[type="checkbox"] {
     width: 16px;
     height: 16px;
     cursor: pointer;
     accent-color: #0056b3;
   }

   .recordar-grupo label {
     cursor: pointer;
     user-select: none;
   }

   /* Spinner dentro del botón */
   .spinner {
     display: inline-block;
     width: 16px;
     height: 16px;
     border: 2px solid rgba(255, 255, 255, 0.4);
     border-top-color: #ffffff;
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
     vertical-align: middle;
   }

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

   /* Botón deshabilitado durante carga */
   .btn-login:disabled {
     opacity: 0.7;
     cursor: not-allowed;
     transform: none;
     box-shadow: 0 4px 10px rgba(0, 86, 179, 0.2);
   }