body {
            background: #f5f5f5;
            margin: 0;
        }

        .wrapper {
            min-height: 100vh;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .box {			
            width: 100%;
            max-width: 380px;
            margin: auto;
			margin-top: 40px;
			margin-bottom: 20px;
            background: #fff;
            padding: 25px;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        }

        .logo {
            max-width: 150px;
            margin-bottom: 15px;
        }

        .btn-ponto {
            width: 100%;
            padding: 16px;
            margin-bottom: 12px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            gap: 10px;
            font-weight: 600;
            font-size: 15px;
            border: none;
            transition: all 0.2s ease;
        }

        .btn-primary-custom {
            background: #253E74;
            color: #fff;
        }

        .btn-primary-custom:hover {
            background: #FF550D;
        }

        .btn-secondary-custom {
            background: #fff;
            color: #253E74;
            border: 2px solid #253E74;
        }

        .btn-secondary-custom:hover {
            background: #FF550D;
            color: #fff;
            border-color: #FF550D;
        }

        .btn-ponto:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
		.btn-loading {
			opacity: 0.7;
			pointer-events: none;
		}

		.loader {
			width: 18px;
			height: 18px;
			border: 3px solid currentColor;
			border-top: 3px solid transparent;
			border-radius: 50%;
			animation: spin 0.8s linear infinite;
		}

		@keyframes spin {
			to { transform: rotate(360deg); }
		}		
		
		.toast-box {
			position: fixed;
			top: 20px;
			right: 20px;
			z-index: 999999;
		}

		.toast-msg {
			min-width: 250px;
			margin-bottom: 10px;
			padding: 12px 16px;
			border-radius: 8px;
			color: #fff;
			font-size: 14px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.15);
			animation: fadeIn 0.3s ease;
		}

		.toast-success {
			background: #28a745;
		}

		.toast-error {
			background: #dc3545;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(-10px); }
			to { opacity: 1; transform: translateY(0); }
		}		
		
		.footer {
			text-align: center;
			font-size: 12px;
			color: #999;
			padding: 10px 0;
		}		
		
		.btn-suporte {
			position: fixed;
			bottom: 20px;
			right: 20px;
			width: 55px;
			height: 55px;
			background: #25D366;
			color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.2);
			z-index: 999;
			text-decoration: none;
		}

		/* 🔥 ANIMAÇÃO PULSANTE */
		.btn-suporte::after {
			content: '';
			position: absolute;
			width: 55px;
			height: 55px;
			border-radius: 50%;
			background: rgba(37, 211, 102, 0.5);
			animation: pulse 1.5s infinite;
			z-index: -1;
		}

		@keyframes pulse {
			0% {
				transform: scale(1);
				opacity: 0.6;
			}
			70% {
				transform: scale(1.6);
				opacity: 0;
			}
			100% {
				opacity: 0;
			}
		}		

		.btn-toast {
			border: none;
			padding: 6px 10px;
			border-radius: 6px;
			font-size: 12px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		/* 🔵 OK (cor principal) */
		.btn-ok {
			background: #FF550D;
			color: #fff;
		}

		.btn-ok:hover {
			background: #d33d02;
		}

		/* ⚪ CANCELAR */
		.btn-cancel {
			background: #fff;
			color: #253E74;
			border: 1px solid #253E74;
		}

		.btn-cancel:hover {
			background: #FF550D;
			color: #fff;
			border-color: #FF550D;
		}